feat:Added piechart in Dashboard
This commit is contained in:
+21
@@ -0,0 +1,21 @@
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2014 Fuzzy
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
+619
@@ -0,0 +1,619 @@
|
||||
# svg.filter.js
|
||||
|
||||
A plugin for [svg.js](http://svgjs.com) adding filter functionality.
|
||||
|
||||
Svg.filter.js is licensed under the terms of the MIT License.
|
||||
|
||||
- [Examples](#examples)
|
||||
- [Furthermore](#furthermore)
|
||||
- [unfilter](#unfilter)
|
||||
- [referencing the filter node](#referencing-the-filter-node)
|
||||
- [Animating filter values](#animating-filter-values)
|
||||
- [Chaining Effects](#chaining-effects)
|
||||
- [Effect Classes](#effect-classes)
|
||||
|
||||
## Usage
|
||||
Include this plugin after including the svg.js library in your html document.
|
||||
|
||||
For a few visual examples look at the [svg.js filter page](http://svgjs.com/filter).
|
||||
|
||||
Here is how each filter effect on the example page is achieved.
|
||||
|
||||
|
||||
## Examples
|
||||
- [gaussian blur](#gaussian-blur)
|
||||
- [horizontal blur](#horizontal-blur)
|
||||
- [desaturate](#desaturate)
|
||||
- [contrast](#contrast)
|
||||
- [sepiatone](#sepiatone)
|
||||
- [hue rotate 180](#hue-rotate-180)
|
||||
- [luminance to alpha](#luminance-to-alpha)
|
||||
- [colorize](#colorize)
|
||||
- [posterize](#posterize)
|
||||
- [darken](#darken)
|
||||
- [lighten](#lighten)
|
||||
- [invert](#invert)
|
||||
- [gamma correct 1](#gamma-correct-1)
|
||||
- [gamma correct 2](#gamma-correct-2)
|
||||
- [drop shadow](#drop-shadow)
|
||||
- [extrude](#extrude)
|
||||
|
||||
### original
|
||||
|
||||
```javascript
|
||||
var image = draw.image('path/to/image.jpg').size(300, 300)
|
||||
```
|
||||
|
||||
### gaussian blur
|
||||
|
||||
```javascript
|
||||
image.filter(function(add) {
|
||||
add.gaussianBlur(30)
|
||||
})
|
||||
```
|
||||
|
||||
### horizontal blur
|
||||
|
||||
```javascript
|
||||
image.filter(function(add) {
|
||||
add.gaussianBlur(30, 0)
|
||||
})
|
||||
```
|
||||
|
||||
### desaturate
|
||||
|
||||
```javascript
|
||||
image.filter(function(add) {
|
||||
add.colorMatrix('saturate', 0)
|
||||
})
|
||||
```
|
||||
|
||||
### contrast
|
||||
|
||||
```javascript
|
||||
image.filter(function(add) {
|
||||
var amount = 1.5
|
||||
|
||||
add.componentTransfer({
|
||||
rgb: { type: 'linear', slope: amount, intercept: -(0.3 * amount) + 0.3 }
|
||||
})
|
||||
})
|
||||
```
|
||||
|
||||
### sepiatone
|
||||
|
||||
```javascript
|
||||
image.filter(function(add) {
|
||||
add.colorMatrix('matrix', [ .343, .669, .119, 0, 0
|
||||
, .249, .626, .130, 0, 0
|
||||
, .172, .334, .111, 0, 0
|
||||
, .000, .000, .000, 1, 0 ])
|
||||
})
|
||||
```
|
||||
|
||||
### hue rotate 180
|
||||
|
||||
```javascript
|
||||
image.filter(function(add) {
|
||||
add.colorMatrix('hueRotate', 180)
|
||||
})
|
||||
```
|
||||
|
||||
### luminance to alpha
|
||||
|
||||
```javascript
|
||||
image.filter(function(add) {
|
||||
add.colorMatrix('luminanceToAlpha')
|
||||
})
|
||||
```
|
||||
|
||||
### colorize
|
||||
|
||||
```javascript
|
||||
image.filter(function(add) {
|
||||
add.colorMatrix('matrix', [ 1.0, 0, 0, 0, 0
|
||||
, 0, 0.2, 0, 0, 0
|
||||
, 0, 0, 0.2, 0, 0
|
||||
, 0, 0, 0, 1.0, 0 ])
|
||||
})
|
||||
```
|
||||
|
||||
### posterize
|
||||
|
||||
```javascript
|
||||
image.filter(function(add) {
|
||||
add.componentTransfer({
|
||||
rgb: { type: 'discrete', tableValues: [0, 0.2, 0.4, 0.6, 0.8, 1] }
|
||||
})
|
||||
})
|
||||
```
|
||||
|
||||
### darken
|
||||
|
||||
```javascript
|
||||
image.filter(function(add) {
|
||||
add.componentTransfer({
|
||||
rgb: { type: 'linear', slope: 0.2 }
|
||||
})
|
||||
})
|
||||
```
|
||||
|
||||
### lighten
|
||||
|
||||
```javascript
|
||||
image.filter(function(add) {
|
||||
add.componentTransfer({
|
||||
rgb: { type: 'linear', slope: 1.5, intercept: 0.2 }
|
||||
})
|
||||
})
|
||||
```
|
||||
|
||||
### invert
|
||||
|
||||
```javascript
|
||||
image.filter(function(add) {
|
||||
add.componentTransfer({
|
||||
rgb: { type: 'table', tableValues: [1, 0] }
|
||||
})
|
||||
})
|
||||
```
|
||||
|
||||
### gamma correct 1
|
||||
|
||||
```javascript
|
||||
image.filter(function(add) {
|
||||
add.componentTransfer({
|
||||
g: { type: 'gamma', amplitude: 1, exponent: 0.5 }
|
||||
})
|
||||
})
|
||||
```
|
||||
|
||||
### gamma correct 2
|
||||
|
||||
```javascript
|
||||
image.filter(function(add) {
|
||||
add.componentTransfer({
|
||||
g: { type: 'gamma', amplitude: 1, exponent: 0.5, offset: -0.1 }
|
||||
})
|
||||
})
|
||||
```
|
||||
|
||||
|
||||
### drop shadow
|
||||
You will notice that all the effect descriptions have a drop shadow. Here is how this drop shadow can be achieved:
|
||||
|
||||
```javascript
|
||||
var text = draw.text('SVG text with drop shadow').fill('#fff')
|
||||
|
||||
text.filter(function(add) {
|
||||
var blur = add.offset(0, 1).in(add.sourceAlpha).gaussianBlur(1)
|
||||
|
||||
add.blend(add.source, blur)
|
||||
})
|
||||
```
|
||||
|
||||
This technique can be achieved on any other shape of course:
|
||||
|
||||
```javascript
|
||||
var rect = draw.rect(100,100).fill('#f09').stroke({ width: 3, color: '#0f9' }).move(10,10)
|
||||
|
||||
rect.filter(function(add) {
|
||||
var blur = add.offset(20, 20).in(add.sourceAlpha).gaussianBlur(5)
|
||||
|
||||
add.blend(add.source, blur)
|
||||
|
||||
this.size('200%','200%').move('-50%', '-50%')
|
||||
})
|
||||
```
|
||||
|
||||
If the drop shadow should get the colour of the shape so it appears like coloured glass:
|
||||
|
||||
```javascript
|
||||
var rect = draw.rect(100,100).fill('#f09').stroke({ width: 3, color: '#0f9' }).move(10,10)
|
||||
|
||||
rect.filter(function(add) {
|
||||
var blur = add.offset(20, 20).gaussianBlur(5)
|
||||
|
||||
add.blend(add.source, blur)
|
||||
|
||||
this.size('200%','200%').move('-50%', '-50%')
|
||||
})
|
||||
```
|
||||
|
||||
### extrude
|
||||
```javascript
|
||||
image.filter(function(add){
|
||||
var matrix = add.convolveMatrix([
|
||||
1,0,0,0,0,0,
|
||||
0,1,0,0,0,0,
|
||||
0,0,1,0,0,0,
|
||||
0,0,0,1,0,0,
|
||||
0,0,0,0,1,0,
|
||||
0,0,0,0,0,1
|
||||
]).attr({
|
||||
devisor: '2',
|
||||
preserveAlpha: 'false'
|
||||
}).in(add.sourceAlpha)
|
||||
|
||||
//recolor it
|
||||
var color = add.composite(add.flood('#ff2222'),matrix,'in');
|
||||
|
||||
//merge all of them toggether
|
||||
add.merge(color,add.source);
|
||||
})
|
||||
```
|
||||
|
||||
|
||||
## Furthermore
|
||||
Some more features you should know about.
|
||||
|
||||
### unfilter
|
||||
The `unfilter` method removes the filter attribute from the node:
|
||||
|
||||
```javascript
|
||||
image.unfilter()
|
||||
```
|
||||
|
||||
This will return the element to its original state but will retain the filter in the defs node. If the filter node should be removed as well, simply pass the `true` as the first argument:
|
||||
|
||||
```javascript
|
||||
image.unfilter(true)
|
||||
```
|
||||
|
||||
|
||||
### referencing the filter node
|
||||
An internal reference to the filter node is made in the element:
|
||||
|
||||
```javascript
|
||||
image.filterer
|
||||
```
|
||||
|
||||
This can also be very useful to reuse an existing filter on various elements:
|
||||
|
||||
```javascript
|
||||
otherImage.filter(image.filterer)
|
||||
```
|
||||
|
||||
### Animating filter values
|
||||
Every filter value can be animated as well:
|
||||
|
||||
```javascript
|
||||
var hueRotate
|
||||
|
||||
image.filter(function(add) {
|
||||
hueRotate = add.colorMatrix('hueRotate', 0)
|
||||
})
|
||||
|
||||
hueRotate.animate(3000).attr('values', 360)
|
||||
```
|
||||
|
||||
### Chaining Effects
|
||||
|
||||
[Method chaining](https://en.wikipedia.org/wiki/Method_chaining) is a programing style where each function retures the object it blongs to, for an example look at JQuery.<br>
|
||||
its posible to chain the effects on a filter when you are creating them, for example
|
||||
```javascript
|
||||
image.filter(function(add){
|
||||
add.flood('black',0.5).composite(add.sourceAlpha,'in').offset(10).merge(add.source)
|
||||
})
|
||||
```
|
||||
|
||||
this would create a basic shadow filter where the first input on the `composite` effect would be the `flood` effect, and the input on the offset effect would be the `composite` effect.<br>
|
||||
same with the `merge` effect, its first input would be the `offset` effect, and its second input would be `add.source`
|
||||
|
||||
some effects like [Merge](#merge), [Blend](blend), [Composite](#composite), [DisplacementMap](displacementmap) have thier arguments changed when they are chained, for example
|
||||
```javascript
|
||||
image.filter(function(add){
|
||||
add.flood('black',0.5).composite(add.sourceAlpha,'in')
|
||||
})
|
||||
```
|
||||
the `composite` effects first input is set to the `flood` effect and its second input becomes the first argument, this is the same for the merge, blend, composite, and displacmentMap effect. <br>
|
||||
for more details check out each effects doc below
|
||||
|
||||
## Effect Classes
|
||||
|
||||
- [Base Effect Class](base-effect-class)
|
||||
- [Blend](#blend)
|
||||
- [ColorMatrix](#colormatrix)
|
||||
- [ComponentTransfer](#componenttransfer)
|
||||
- [Composite](#composite)
|
||||
- [ConvolveMatrix](#convolvematrix)
|
||||
- [DiffuseLighting](#diffuseLighting)
|
||||
- [DisplacementMap](#displacementmap)
|
||||
- [Flood](#flood)
|
||||
- [GaussianBlur](#gaussianglur)
|
||||
- [Image](#image)
|
||||
- [Merge](#merge)
|
||||
- [Morphology](#morphology)
|
||||
- [Offset](#offset)
|
||||
- [SpecularLighting](#specularlighting)
|
||||
- [Tile](#tile)
|
||||
- [Turbulence](#turbulence)
|
||||
|
||||
### Base Effect Class
|
||||
|
||||
#### in(effect)
|
||||
gets or sets the `in` attribute of the effect
|
||||
some effect like [Blend](blend), [Composite](#composite), [DisplacementMap](displacementmap) have a `in2` function, it works the same as the as
|
||||
|
||||
- **effect:** this can be another effect or a string <br>
|
||||
if **effect** is not provided it will look for another effect on the same filter whos `result` is equal to this effects `in`, else it will return the value of the `in` attribute
|
||||
```javascript
|
||||
image.filter(function(add){
|
||||
var offset = add.offset(10)
|
||||
|
||||
//create the blur effect and then set its input
|
||||
var blur = add.gaussianBlur(3)
|
||||
|
||||
//set the input to an effect
|
||||
blur.in(offset)
|
||||
|
||||
//this will return the offset effect
|
||||
var input = blur.in()
|
||||
|
||||
//set the input to a string
|
||||
blur.in('another-result-as-a-string')
|
||||
|
||||
//this will return a string since there is no other effect which has a matching result attribute
|
||||
var input2 = blur.in()
|
||||
})
|
||||
```
|
||||
|
||||
#### result(string)
|
||||
gets or sets the `result` attribute of the effect
|
||||
|
||||
- **string:** if no string if provided it will act as a getter and return the value of the `result` attruibute
|
||||
|
||||
### Blend
|
||||
|
||||
[W3 doc](https://www.w3.org/TR/SVG/filters.html#feBlendElement)
|
||||
|
||||
```javascript
|
||||
filter.blend(in1, in2, mode)
|
||||
//or
|
||||
new SVG.BlendEffect(in1, in2, mode)
|
||||
```
|
||||
|
||||
- **in1**: an effect or the result of effect
|
||||
- **in2**: same as **in1**
|
||||
- **mode**: "normal | multiply | screen | darken | lighten" defaults to "normal"
|
||||
|
||||
**chaining** when this effect is called right after another effect, for example:
|
||||
```javascript
|
||||
filter.offset(10).blend(filter.source)
|
||||
```
|
||||
the first input is set to the `offset` effect and the second input is set to `filter.source` or what ever was passed as the first argument, and the second input becomes the **mode**
|
||||
|
||||
### ColorMatrix
|
||||
|
||||
[W3 doc](https://www.w3.org/TR/SVG/filters.html#feColorMatrixElement)
|
||||
|
||||
```javascript
|
||||
filter.colorMatrix(type, values);
|
||||
//or
|
||||
new SVG.ColorMatrixEffect(type, values);
|
||||
```
|
||||
|
||||
- **type**: "matrix | saturate | hueRotate | luminanceToAlpha"
|
||||
- **values**
|
||||
- **type="matrix"**: values would be a matrix the size of 4x5
|
||||
- **type="saturate"**: number (0 to 1)
|
||||
- **type="hueRotate"**: number (0 to 360) deg
|
||||
- **type="luminanceToAlpha"**: value not needed
|
||||
|
||||
### ComponentTransfer
|
||||
|
||||
[W3 doc](https://www.w3.org/TR/SVG/filters.html#feComponentTransferElement)
|
||||
|
||||
```javascript
|
||||
filter.componentTransfer(components);
|
||||
//or
|
||||
new SVG.ComponentTransferEffect(components);
|
||||
```
|
||||
|
||||
- **components**: an object with one `rgb` property for the (r, g and b) chanels or `r`, `g`, `b`, `a` properties for each chanel
|
||||
```javascript
|
||||
{
|
||||
rgb: {
|
||||
type: "identity | table | discrete | linear | gamma",
|
||||
|
||||
//type="table"
|
||||
tableValues: "0 0.5 2 1", //number sperated by spaces
|
||||
|
||||
//type="linear"
|
||||
slope: 1, //number
|
||||
intercept: 3,//number
|
||||
|
||||
//type="gamma"
|
||||
amplitude: 0, //number
|
||||
exponent: 0, //number
|
||||
offset: 0 //number
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Composite
|
||||
|
||||
[W3 doc](https://www.w3.org/TR/SVG/filters.html#feCompositeElement)
|
||||
|
||||
```javascript
|
||||
filter.composite(in1, in2, operator);
|
||||
//or
|
||||
new SVG.CompositeEffect(in1, in2, operator);
|
||||
```
|
||||
|
||||
- **in1**: an effect or the result of an effect
|
||||
- **in2**: same as **in1**
|
||||
- **operator**: "over | in | out | atop | xor | arithmetic" defaults to "over"
|
||||
|
||||
**chaining** when this effect is called right after another effect, for example:
|
||||
```javascript
|
||||
filter.flood('black',0.5).composite(filter.sourceAlpha,'in')
|
||||
```
|
||||
the first input is set to the `flood` effect and the second input is set to `filter.sourceAlpha` or what ever was passed as the first argument.<br>
|
||||
also the second argument becomes the **operator**
|
||||
|
||||
### ConvolveMatrix
|
||||
|
||||
[W3 doc](https://www.w3.org/TR/SVG/filters.html#feConvolveMatrixElement)
|
||||
|
||||
```javascript
|
||||
filter.convolveMatrix(matrix);
|
||||
//or
|
||||
new SVG.ConvolveMatrixEffect(matrix);
|
||||
```
|
||||
|
||||
- **matrix**: a square matrix of numbers that will be applied to the image
|
||||
- exmaple:
|
||||
```javascript
|
||||
[
|
||||
1,0,0,
|
||||
0,1,0,
|
||||
0,0,1
|
||||
]
|
||||
```
|
||||
|
||||
### DiffuseLighting
|
||||
|
||||
[W3 doc](https://www.w3.org/TR/SVG/filters.html#feDiffuseLightingElement)
|
||||
|
||||
```javascript
|
||||
filter.displacementMap(surfaceScale, diffuseConstant, kernelUnitLength);
|
||||
//or
|
||||
new SVG.DisplacementMapEffect(surfaceScale, diffuseConstant, kernelUnitLength);
|
||||
```
|
||||
|
||||
***very complicated, just check out the W3 doc***
|
||||
|
||||
### DisplacementMap
|
||||
|
||||
[W3 doc](https://www.w3.org/TR/SVG/filters.html#feDisplacementMapElement)
|
||||
|
||||
```javascript
|
||||
filter.displacementMap(in1, in2, scale, xChannelSelector, yChannelSelector);
|
||||
//or
|
||||
new SVG.DisplacementMapEffect(in1, in2, scale, xChannelSelector, yChannelSelector);
|
||||
```
|
||||
|
||||
***very complicated, just check out the W3 doc***
|
||||
|
||||
**chaining** when this effect is called right after another effect, for example:
|
||||
```javascript
|
||||
filter.offset(20,50).displacementMap(filter.source,2)
|
||||
```
|
||||
the first input is set to the `offset` effect and the second input is set to `filter.source` or what ever was passed as the first argument.<br>
|
||||
also the second argument becomes the **scale**, and the third argument is the **xChannelSelector** and so on
|
||||
|
||||
### Flood
|
||||
|
||||
[W3 doc](https://www.w3.org/TR/SVG/filters.html#feFloodElement)
|
||||
|
||||
```javascript
|
||||
filter.flood(color,opacity);
|
||||
//or
|
||||
new SVG.FloodEffect(color,opacity);
|
||||
```
|
||||
|
||||
- **color**: a named or hex color in string format
|
||||
- **opacity**: number form 0 to 1
|
||||
|
||||
### GaussianBlur
|
||||
|
||||
[W3 doc](https://www.w3.org/TR/SVG/filters.html#feGaussianBlurElement)
|
||||
|
||||
```javascript
|
||||
filter.gaussianBlur(x, y);
|
||||
//or
|
||||
new SVG.GaussianBlurEffect(x, y);
|
||||
```
|
||||
|
||||
- **x**: blur on the X
|
||||
- **y**: blur on the y, will default to the **x** if not provided
|
||||
|
||||
### Image
|
||||
|
||||
[W3 doc](https://www.w3.org/TR/SVG/filters.html#feImageElement)
|
||||
|
||||
```javascript
|
||||
filter.image(src);
|
||||
//or
|
||||
new SVG.ImageEffect(src);
|
||||
```
|
||||
|
||||
### Merge
|
||||
|
||||
[W3 doc](https://www.w3.org/TR/SVG/filters.html#feMergeElement)
|
||||
|
||||
```javascript
|
||||
filter.merge();
|
||||
//or
|
||||
new SVG.MergeEffect();
|
||||
```
|
||||
|
||||
- **Array**: an Array of effects or effect results `filter.merge([effectOne,"result-two",another_effect])`
|
||||
- **SVG.Set**: a set of effects
|
||||
- **arguments**: pass each effect or result in as arguments `filter.merge(effect,"some-result",anotherEffect)`
|
||||
- **chianing** you can also chian the merge effect `filter.offset(10).merge(anotherEffect)` will result in a merge effect with its first input set to the `offset` effect and its second input set to `anotherEffect`
|
||||
|
||||
### Morphology
|
||||
|
||||
[W3 doc](https://www.w3.org/TR/SVG/filters.html#feMorphologyElement)
|
||||
|
||||
```javascript
|
||||
filter.morphology(operator, radius);
|
||||
//or
|
||||
new SVG.MorphologyEffect(operator, radius);
|
||||
```
|
||||
|
||||
- **operator**: "erode | dilate"
|
||||
- **radius**: a single number or a string of two number sperated by a space
|
||||
- the first number is the X
|
||||
- the second number is the Y, if no provided it will default to the first number
|
||||
|
||||
### Offset
|
||||
|
||||
[W3 doc](https://www.w3.org/TR/SVG/filters.html#feOffsetElement)
|
||||
|
||||
```javascript
|
||||
filter.offset(x, y);
|
||||
//or
|
||||
new SVG.OffsetEffect(x, y);
|
||||
```
|
||||
|
||||
- **x**: move on the X
|
||||
- **y**: move on the y, will default to the **x** if not provided
|
||||
|
||||
### SpecularLighting
|
||||
|
||||
[W3 doc](https://www.w3.org/TR/SVG/filters.html#feSpecularLightingElement)
|
||||
|
||||
```javascript
|
||||
filter.specularLighting(surfaceScale, diffuseConstant, specularExponent, kernelUnitLength);
|
||||
//or
|
||||
new SVG.SpecularLightingEffect(surfaceScale, diffuseConstant, specularExponent, kernelUnitLength);
|
||||
```
|
||||
|
||||
***very complicated, just check out the W3 doc***
|
||||
|
||||
### Tile
|
||||
|
||||
[W3 doc](https://www.w3.org/TR/SVG/filters.html#feTileElement)
|
||||
|
||||
```javascript
|
||||
filter.tile();
|
||||
//or
|
||||
new SVG.TileEffect();
|
||||
```
|
||||
|
||||
***no arguments, but if you want to find out what it dose check out the W3 doc***
|
||||
|
||||
### Turbulence
|
||||
|
||||
[W3 doc](https://www.w3.org/TR/SVG/filters.html#feTurbulenceElement)
|
||||
|
||||
```javascript
|
||||
filter.turbulence(baseFrequency, numOctaves, seed, stitchTiles, type);
|
||||
//or
|
||||
new SVG.TurbulenceEffect(baseFrequency, numOctaves, seed, stitchTiles, type);
|
||||
```
|
||||
|
||||
***very complicated, just check out the W3 doc***
|
||||
+624
@@ -0,0 +1,624 @@
|
||||
/*! svg.filter.js - v2.0.2 - 2016-02-24
|
||||
* https://github.com/wout/svg.filter.js
|
||||
* Copyright (c) 2016 Wout Fierens; Licensed MIT */
|
||||
;(function() {
|
||||
|
||||
// Main filter class
|
||||
SVG.Filter = SVG.invent({
|
||||
create: 'filter',
|
||||
inherit: SVG.Parent,
|
||||
extend: {
|
||||
// Static strings
|
||||
source: 'SourceGraphic',
|
||||
sourceAlpha: 'SourceAlpha',
|
||||
background: 'BackgroundImage',
|
||||
backgroundAlpha: 'BackgroundAlpha',
|
||||
fill: 'FillPaint',
|
||||
stroke: 'StrokePaint',
|
||||
|
||||
autoSetIn: true,
|
||||
// Custom put method for leaner code
|
||||
put: function(element, i) {
|
||||
this.add(element, i)
|
||||
|
||||
if(!element.attr('in') && this.autoSetIn){
|
||||
element.attr('in',this.source)
|
||||
}
|
||||
if(!element.attr('result')){
|
||||
element.attr('result',element)
|
||||
}
|
||||
|
||||
return element
|
||||
},
|
||||
// Blend effect
|
||||
blend: function(in1, in2, mode) {
|
||||
return this.put(new SVG.BlendEffect(in1, in2, mode))
|
||||
},
|
||||
// ColorMatrix effect
|
||||
colorMatrix: function(type, values) {
|
||||
return this.put(new SVG.ColorMatrixEffect(type, values))
|
||||
},
|
||||
// ConvolveMatrix effect
|
||||
convolveMatrix: function(matrix) {
|
||||
return this.put(new SVG.ConvolveMatrixEffect(matrix))
|
||||
},
|
||||
// ComponentTransfer effect
|
||||
componentTransfer: function(components) {
|
||||
return this.put(new SVG.ComponentTransferEffect(components))
|
||||
},
|
||||
// Composite effect
|
||||
composite: function(in1, in2, operator) {
|
||||
return this.put(new SVG.CompositeEffect(in1, in2, operator))
|
||||
},
|
||||
// Flood effect
|
||||
flood: function(color, opacity) {
|
||||
return this.put(new SVG.FloodEffect(color, opacity))
|
||||
},
|
||||
// Offset effect
|
||||
offset: function(x, y) {
|
||||
return this.put(new SVG.OffsetEffect(x,y))
|
||||
},
|
||||
// Image effect
|
||||
image: function(src) {
|
||||
return this.put(new SVG.ImageEffect(src))
|
||||
},
|
||||
// Merge effect
|
||||
merge: function() {
|
||||
//pass the array of arguments to the constructor because we dont know if the user gave us an array as the first arguemnt or wether they listed the effects in the arguments
|
||||
var args = [undefined]
|
||||
for(var i in arguments) args.push(arguments[i])
|
||||
return this.put(new (SVG.MergeEffect.bind.apply(SVG.MergeEffect,args)))
|
||||
},
|
||||
// Gaussian Blur effect
|
||||
gaussianBlur: function(x,y) {
|
||||
return this.put(new SVG.GaussianBlurEffect(x,y))
|
||||
},
|
||||
// Morphology effect
|
||||
morphology: function(operator,radius){
|
||||
return this.put(new SVG.MorphologyEffect(operator,radius))
|
||||
},
|
||||
// DiffuseLighting effect
|
||||
diffuseLighting: function(surfaceScale,diffuseConstant,kernelUnitLength){
|
||||
return this.put(new SVG.DiffuseLightingEffect(surfaceScale,diffuseConstant,kernelUnitLength))
|
||||
},
|
||||
// DisplacementMap effect
|
||||
displacementMap: function(in1,in2,scale,xChannelSelector,yChannelSelector){
|
||||
return this.put(new SVG.DisplacementMapEffect(in1,in2,scale,xChannelSelector,yChannelSelector))
|
||||
},
|
||||
// SpecularLighting effect
|
||||
specularLighting: function(surfaceScale,diffuseConstant,specularExponent,kernelUnitLength){
|
||||
return this.put(new SVG.SpecularLightingEffect(surfaceScale,diffuseConstant,specularExponent,kernelUnitLength))
|
||||
},
|
||||
// Tile effect
|
||||
tile: function(){
|
||||
return this.put(new SVG.TileEffect());
|
||||
},
|
||||
// Turbulence effect
|
||||
turbulence: function(baseFrequency,numOctaves,seed,stitchTiles,type){
|
||||
return this.put(new SVG.TurbulenceEffect(baseFrequency,numOctaves,seed,stitchTiles,type))
|
||||
},
|
||||
// Default string value
|
||||
toString: function() {
|
||||
return 'url(#' + this.attr('id') + ')'
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
//add .filter function
|
||||
SVG.extend(SVG.Defs, {
|
||||
// Define filter
|
||||
filter: function(block) {
|
||||
var filter = this.put(new SVG.Filter)
|
||||
|
||||
/* invoke passed block */
|
||||
if (typeof block === 'function')
|
||||
block.call(filter, filter)
|
||||
|
||||
return filter
|
||||
}
|
||||
})
|
||||
SVG.extend(SVG.Container, {
|
||||
// Define filter on defs
|
||||
filter: function(block) {
|
||||
return this.defs().filter(block)
|
||||
}
|
||||
})
|
||||
SVG.extend(SVG.Element, SVG.G, SVG.Nested, {
|
||||
// Create filter element in defs and store reference
|
||||
filter: function(block) {
|
||||
this.filterer = block instanceof SVG.Element ?
|
||||
block : this.doc().filter(block)
|
||||
|
||||
if(this.doc() && this.filterer.doc() !== this.doc()){
|
||||
this.doc().defs().add(this.filterer)
|
||||
}
|
||||
|
||||
this.attr('filter', this.filterer)
|
||||
|
||||
return this.filterer
|
||||
},
|
||||
// Remove filter
|
||||
unfilter: function(remove) {
|
||||
/* also remove the filter node */
|
||||
if (this.filterer && remove === true)
|
||||
this.filterer.remove()
|
||||
|
||||
/* delete reference to filterer */
|
||||
delete this.filterer
|
||||
|
||||
/* remove filter attribute */
|
||||
return this.attr('filter', null)
|
||||
}
|
||||
})
|
||||
|
||||
// Create SVG.Effect class
|
||||
SVG.Effect = SVG.invent({
|
||||
create: function(){
|
||||
this.constructor.call(this)
|
||||
},
|
||||
inherit: SVG.Element,
|
||||
extend: {
|
||||
// Set in attribute
|
||||
in: function(effect) {
|
||||
return effect == null? this.parent() && this.parent().select('[result="'+this.attr('in')+'"]').get(0) || this.attr('in') : this.attr('in', effect)
|
||||
},
|
||||
// Named result
|
||||
result: function(result) {
|
||||
return result == null? this.attr('result') : this.attr('result',result)
|
||||
},
|
||||
// Stringification
|
||||
toString: function() {
|
||||
return this.result()
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// create class for parent effects like merge
|
||||
// Inherit from SVG.Parent
|
||||
SVG.ParentEffect = SVG.invent({
|
||||
create: function(){
|
||||
this.constructor.call(this)
|
||||
},
|
||||
inherit: SVG.Parent,
|
||||
extend: {
|
||||
// Set in attribute
|
||||
in: function(effect) {
|
||||
return effect == null? this.parent() && this.parent().select('[result="'+this.attr('in')+'"]').get(0) || this.attr('in') : this.attr('in', effect)
|
||||
},
|
||||
// Named result
|
||||
result: function(result) {
|
||||
return result == null? this.attr('result') : this.attr('result',result)
|
||||
},
|
||||
// Stringification
|
||||
toString: function() {
|
||||
return this.result()
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
//chaining
|
||||
var chainingEffects = {
|
||||
// Blend effect
|
||||
blend: function(in2, mode) {
|
||||
return this.parent() && this.parent().blend(this, in2, mode) //pass this as the first input
|
||||
},
|
||||
// ColorMatrix effect
|
||||
colorMatrix: function(type, values) {
|
||||
return this.parent() && this.parent().colorMatrix(type, values).in(this)
|
||||
},
|
||||
// ConvolveMatrix effect
|
||||
convolveMatrix: function(matrix) {
|
||||
return this.parent() && this.parent().convolveMatrix(matrix).in(this)
|
||||
},
|
||||
// ComponentTransfer effect
|
||||
componentTransfer: function(components) {
|
||||
return this.parent() && this.parent().componentTransfer(components).in(this)
|
||||
},
|
||||
// Composite effect
|
||||
composite: function(in2, operator) {
|
||||
return this.parent() && this.parent().composite(this, in2, operator) //pass this as the first input
|
||||
},
|
||||
// Flood effect
|
||||
flood: function(color, opacity) {
|
||||
return this.parent() && this.parent().flood(color, opacity) //this effect dont have inputs
|
||||
},
|
||||
// Offset effect
|
||||
offset: function(x, y) {
|
||||
return this.parent() && this.parent().offset(x,y).in(this)
|
||||
},
|
||||
// Image effect
|
||||
image: function(src) {
|
||||
return this.parent() && this.parent().image(src) //this effect dont have inputs
|
||||
},
|
||||
// Merge effect
|
||||
merge: function() {
|
||||
return this.parent() && this.parent().merge.apply(this.parent(),[this].concat(arguments)) //pass this as the first argument
|
||||
},
|
||||
// Gaussian Blur effect
|
||||
gaussianBlur: function(x,y) {
|
||||
return this.parent() && this.parent().gaussianBlur(x,y).in(this)
|
||||
},
|
||||
// Morphology effect
|
||||
morphology: function(operator,radius){
|
||||
return this.parent() && this.parent().morphology(operator,radius).in(this)
|
||||
},
|
||||
// DiffuseLighting effect
|
||||
diffuseLighting: function(surfaceScale,diffuseConstant,kernelUnitLength){
|
||||
return this.parent() && this.parent().diffuseLighting(surfaceScale,diffuseConstant,kernelUnitLength).in(this)
|
||||
},
|
||||
// DisplacementMap effect
|
||||
displacementMap: function(in2,scale,xChannelSelector,yChannelSelector){
|
||||
return this.parent() && this.parent().displacementMap(this,in2,scale,xChannelSelector,yChannelSelector) //pass this as the first input
|
||||
},
|
||||
// SpecularLighting effect
|
||||
specularLighting: function(surfaceScale,diffuseConstant,specularExponent,kernelUnitLength){
|
||||
return this.parent() && this.parent().specularLighting(surfaceScale,diffuseConstant,specularExponent,kernelUnitLength).in(this)
|
||||
},
|
||||
// Tile effect
|
||||
tile: function(){
|
||||
return this.parent() && this.parent().tile().in(this)
|
||||
},
|
||||
// Turbulence effect
|
||||
turbulence: function(baseFrequency,numOctaves,seed,stitchTiles,type){
|
||||
return this.parent() && this.parent().turbulence(baseFrequency,numOctaves,seed,stitchTiles,type).in(this)
|
||||
}
|
||||
}
|
||||
SVG.extend(SVG.Effect,chainingEffects)
|
||||
SVG.extend(SVG.ParentEffect,chainingEffects)
|
||||
|
||||
//crea class for child effects, like MergeNode, FuncR and lights
|
||||
SVG.ChildEffect = SVG.invent({
|
||||
create: function(){
|
||||
this.constructor.call(this)
|
||||
},
|
||||
inherit: SVG.Element,
|
||||
extend: {
|
||||
in: function(effect){
|
||||
this.attr('in',effect)
|
||||
}
|
||||
//dont include any "result" functions because these types of nodes dont have them
|
||||
}
|
||||
})
|
||||
|
||||
// Create all different effects
|
||||
var effects = {
|
||||
blend: function(in1,in2,mode){
|
||||
this.attr({
|
||||
in: in1,
|
||||
in2: in2,
|
||||
mode: mode || 'normal'
|
||||
})
|
||||
},
|
||||
colorMatrix: function(type,values){
|
||||
if (type == 'matrix')
|
||||
values = normaliseMatrix(values)
|
||||
|
||||
this.attr({
|
||||
type: type
|
||||
, values: typeof values == 'undefined' ? null : values
|
||||
})
|
||||
},
|
||||
convolveMatrix: function(matrix){
|
||||
matrix = normaliseMatrix(matrix)
|
||||
|
||||
this.attr({
|
||||
order: Math.sqrt(matrix.split(' ').length)
|
||||
, kernelMatrix: matrix
|
||||
})
|
||||
},
|
||||
composite: function(in1, in2, operator){
|
||||
this.attr({
|
||||
in: in1,
|
||||
in2: in2,
|
||||
operator: operator
|
||||
})
|
||||
},
|
||||
flood: function(color,opacity){
|
||||
this.attr('flood-color',color)
|
||||
if(opacity != null) this.attr('flood-opacity',opacity)
|
||||
},
|
||||
offset: function(x,y){
|
||||
this.attr({
|
||||
dx: x,
|
||||
dy: y
|
||||
})
|
||||
},
|
||||
image: function(src){
|
||||
this.attr('href', src, SVG.xlink)
|
||||
},
|
||||
displacementMap: function(in1,in2,scale,xChannelSelector,yChannelSelector){
|
||||
this.attr({
|
||||
in: in1,
|
||||
in2: in2,
|
||||
scale: scale,
|
||||
xChannelSelector: xChannelSelector,
|
||||
yChannelSelector: yChannelSelector
|
||||
})
|
||||
},
|
||||
gaussianBlur: function(x,y){
|
||||
if(x != null || y != null)
|
||||
this.attr('stdDeviation', listString(Array.prototype.slice.call(arguments)))
|
||||
else
|
||||
this.attr('stdDeviation', '0 0')
|
||||
},
|
||||
morphology: function(operator,radius){
|
||||
this.attr({
|
||||
operator: operator,
|
||||
radius: radius
|
||||
})
|
||||
},
|
||||
tile: function(){
|
||||
|
||||
},
|
||||
turbulence: function(baseFrequency,numOctaves,seed,stitchTiles,type){
|
||||
this.attr({
|
||||
numOctaves: numOctaves,
|
||||
seed: seed,
|
||||
stitchTiles: stitchTiles,
|
||||
baseFrequency: baseFrequency,
|
||||
type: type
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// Create all parent effects
|
||||
var parentEffects = {
|
||||
merge: function(){
|
||||
var children
|
||||
|
||||
//test to see if we have a set
|
||||
if(arguments[0] instanceof SVG.Set){
|
||||
var that = this
|
||||
arguments[0].each(function(i){
|
||||
if(this instanceof SVG.MergeNode)
|
||||
that.put(this)
|
||||
else if(this instanceof SVG.Effect || this instanceof SVG.ParentEffect)
|
||||
that.put(new SVG.MergeNode(this))
|
||||
})
|
||||
}
|
||||
else{
|
||||
//if the first argument is an array use it
|
||||
if(Array.isArray(arguments[0]))
|
||||
children = arguments[0]
|
||||
else
|
||||
children = arguments
|
||||
|
||||
for(var i = 0; i < children.length; i++){
|
||||
if(children[i] instanceof SVG.MergeNode){
|
||||
this.put(children[i])
|
||||
}
|
||||
else this.put(new SVG.MergeNode(children[i]))
|
||||
}
|
||||
}
|
||||
},
|
||||
componentTransfer: function(compontents){
|
||||
/* create rgb set */
|
||||
this.rgb = new SVG.Set
|
||||
|
||||
/* create components */
|
||||
;(['r', 'g', 'b', 'a']).forEach(function(c) {
|
||||
/* create component */
|
||||
this[c] = new SVG['Func' + c.toUpperCase()]('identity')
|
||||
|
||||
/* store component in set */
|
||||
this.rgb.add(this[c])
|
||||
|
||||
/* add component node */
|
||||
this.node.appendChild(this[c].node)
|
||||
}.bind(this)) //lost context in foreach
|
||||
|
||||
/* set components */
|
||||
if (compontents) {
|
||||
if (compontents.rgb) {
|
||||
/* set bundled components */
|
||||
;(['r', 'g', 'b']).forEach(function(c) {
|
||||
this[c].attr(compontents.rgb)
|
||||
}.bind(this))
|
||||
|
||||
delete compontents.rgb
|
||||
}
|
||||
|
||||
/* set individual components */
|
||||
for (var c in compontents)
|
||||
this[c].attr(compontents[c])
|
||||
}
|
||||
},
|
||||
diffuseLighting: function(surfaceScale,diffuseConstant,kernelUnitLength){
|
||||
this.attr({
|
||||
surfaceScale: surfaceScale,
|
||||
diffuseConstant: diffuseConstant,
|
||||
kernelUnitLength: kernelUnitLength
|
||||
})
|
||||
},
|
||||
specularLighting: function(surfaceScale,diffuseConstant,specularExponent,kernelUnitLength){
|
||||
this.attr({
|
||||
surfaceScale: surfaceScale,
|
||||
diffuseConstant: diffuseConstant,
|
||||
specularExponent: specularExponent,
|
||||
kernelUnitLength: kernelUnitLength
|
||||
})
|
||||
},
|
||||
}
|
||||
|
||||
// Create child effects like PointLight and MergeNode
|
||||
var childEffects = {
|
||||
distantLight: function(azimuth, elevation){
|
||||
this.attr({
|
||||
azimuth: azimuth,
|
||||
elevation: elevation
|
||||
})
|
||||
},
|
||||
pointLight: function(x,y,z){
|
||||
this.attr({
|
||||
x: x,
|
||||
y: y,
|
||||
z: z
|
||||
})
|
||||
},
|
||||
spotLight: function(x,y,z,pointsAtX,pointsAtY,pointsAtZ){
|
||||
this.attr({
|
||||
x: x,
|
||||
y: y,
|
||||
z: z,
|
||||
pointsAtX: pointsAtX,
|
||||
pointsAtY: pointsAtY,
|
||||
pointsAtZ: pointsAtZ
|
||||
})
|
||||
},
|
||||
mergeNode: function(in1){
|
||||
this.attr('in',in1)
|
||||
}
|
||||
}
|
||||
|
||||
// Create compontent functions
|
||||
;(['r', 'g', 'b', 'a']).forEach(function(c) {
|
||||
/* create class */
|
||||
childEffects['Func' + c.toUpperCase()] = function(type) {
|
||||
this.attr('type',type)
|
||||
|
||||
// take diffent arguments based on the type
|
||||
switch(type){
|
||||
case 'table':
|
||||
this.attr('tableValues',arguments[1])
|
||||
break
|
||||
case 'linear':
|
||||
this.attr('slope',arguments[1])
|
||||
this.attr('intercept',arguments[2])
|
||||
break
|
||||
case 'gamma':
|
||||
this.attr('amplitude',arguments[1])
|
||||
this.attr('exponent',arguments[2])
|
||||
this.attr('offset',arguments[2])
|
||||
break
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
//create effects
|
||||
foreach(effects,function(effect,i){
|
||||
|
||||
/* capitalize name */
|
||||
var name = i.charAt(0).toUpperCase() + i.slice(1)
|
||||
var proto = {}
|
||||
|
||||
/* create class */
|
||||
SVG[name + 'Effect'] = SVG.invent({
|
||||
create: function() {
|
||||
//call super
|
||||
this.constructor.call(this, SVG.create('fe' + name))
|
||||
|
||||
//call constructor for this effect
|
||||
effect.apply(this,arguments)
|
||||
|
||||
//set the result
|
||||
this.result(this.attr('id') + 'Out')
|
||||
},
|
||||
inherit: SVG.Effect,
|
||||
extend: proto
|
||||
})
|
||||
})
|
||||
|
||||
//create parent effects
|
||||
foreach(parentEffects,function(effect,i){
|
||||
|
||||
/* capitalize name */
|
||||
var name = i.charAt(0).toUpperCase() + i.slice(1)
|
||||
var proto = {}
|
||||
|
||||
/* create class */
|
||||
SVG[name + 'Effect'] = SVG.invent({
|
||||
create: function() {
|
||||
//call super
|
||||
this.constructor.call(this, SVG.create('fe' + name))
|
||||
|
||||
//call constructor for this effect
|
||||
effect.apply(this,arguments)
|
||||
|
||||
//set the result
|
||||
this.result(this.attr('id') + 'Out')
|
||||
},
|
||||
inherit: SVG.ParentEffect,
|
||||
extend: proto
|
||||
})
|
||||
})
|
||||
|
||||
//create child effects
|
||||
foreach(childEffects,function(effect,i){
|
||||
|
||||
/* capitalize name */
|
||||
var name = i.charAt(0).toUpperCase() + i.slice(1)
|
||||
var proto = {}
|
||||
|
||||
/* create class */
|
||||
SVG[name] = SVG.invent({
|
||||
create: function() {
|
||||
//call super
|
||||
this.constructor.call(this, SVG.create('fe' + name))
|
||||
|
||||
//call constructor for this effect
|
||||
effect.apply(this,arguments)
|
||||
},
|
||||
inherit: SVG.ChildEffect,
|
||||
extend: proto
|
||||
})
|
||||
})
|
||||
|
||||
// Effect-specific extensions
|
||||
SVG.extend(SVG.MergeEffect,{
|
||||
in: function(effect){
|
||||
if(effect instanceof SVG.MergeNode)
|
||||
this.add(effect,0)
|
||||
else
|
||||
this.add(new SVG.MergeNode(effect),0)
|
||||
|
||||
return this
|
||||
}
|
||||
})
|
||||
SVG.extend(SVG.CompositeEffect,SVG.BlendEffect,SVG.DisplacementMapEffect,{
|
||||
in2: function(effect){
|
||||
return effect == null? this.parent() && this.parent().select('[result="'+this.attr('in2')+'"]').get(0) || this.attr('in2') : this.attr('in2', effect)
|
||||
}
|
||||
})
|
||||
|
||||
// Presets
|
||||
SVG.filter = {
|
||||
sepiatone: [ .343, .669, .119, 0, 0
|
||||
, .249, .626, .130, 0, 0
|
||||
, .172, .334, .111, 0, 0
|
||||
, .000, .000, .000, 1, 0 ]
|
||||
}
|
||||
|
||||
// Helpers
|
||||
function normaliseMatrix(matrix) {
|
||||
/* convert possible array value to string */
|
||||
if (Array.isArray(matrix))
|
||||
matrix = new SVG.Array(matrix)
|
||||
|
||||
/* ensure there are no leading, tailing or double spaces */
|
||||
return matrix.toString().replace(/^\s+/, '').replace(/\s+$/, '').replace(/\s+/g, ' ')
|
||||
}
|
||||
|
||||
function listString(list) {
|
||||
if (!Array.isArray(list))
|
||||
return list
|
||||
|
||||
for (var i = 0, l = list.length, s = []; i < l; i++)
|
||||
s.push(list[i])
|
||||
|
||||
return s.join(' ')
|
||||
}
|
||||
|
||||
function foreach(){ //loops through mutiple objects
|
||||
var fn = function(){}
|
||||
if(typeof arguments[arguments.length-1] == 'function'){
|
||||
fn = arguments[arguments.length-1]
|
||||
Array.prototype.splice.call(arguments,arguments.length-1,1)
|
||||
}
|
||||
for(var k in arguments){
|
||||
for(var i in arguments[k]){
|
||||
fn(arguments[k][i],i,arguments[k])
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}).call(this)
|
||||
+4
File diff suppressed because one or more lines are too long
+41
@@ -0,0 +1,41 @@
|
||||
{
|
||||
"name": "svg.filter.js",
|
||||
"version": "2.0.2",
|
||||
"description": "A plugin for svg.js adding filter functionality",
|
||||
"keywords": [
|
||||
"svg.js",
|
||||
"filter",
|
||||
"effect"
|
||||
],
|
||||
"bugs": "https://github.com/wout/svg.filter.js/issues",
|
||||
"license": "MIT",
|
||||
"author": {
|
||||
"name": "Wout Fierens"
|
||||
},
|
||||
"contributors": {
|
||||
"name": "Wout Fierens"
|
||||
},
|
||||
"homepage": "https://github.com/wout/svg.filter.js",
|
||||
"main": "dist/svg.filter.js",
|
||||
"files": [
|
||||
"dist/"
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/wout/svg.filter.js.git"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.8.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"grunt-contrib-jshint": "~0.10.0",
|
||||
"grunt-contrib-concat": "~0.3.0",
|
||||
"grunt-contrib-uglify": "~0.2.0",
|
||||
"grunt-contrib-watch": "~0.4.0",
|
||||
"grunt-contrib-clean": "~0.4.0",
|
||||
"grunt": "~0.4.5"
|
||||
},
|
||||
"dependencies": {
|
||||
"svg.js":"^2.2.5"
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user