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.
|
||||
+118
@@ -0,0 +1,118 @@
|
||||
# svg.draggable.js
|
||||
|
||||
A plugin for the [svgdotjs.github.io](https://svgdotjs.github.io/) library to make elements draggable.
|
||||
|
||||
Svg.draggable.js is licensed under the terms of the MIT License.
|
||||
|
||||
## Usage
|
||||
|
||||
Install the plugin:
|
||||
|
||||
bower install svg.draggable.js
|
||||
|
||||
Include this plugin after including the svg.js library in your html document.
|
||||
|
||||
```html
|
||||
<script src="svg.js"></script>
|
||||
<script src="svg.draggable.js"></script>
|
||||
```
|
||||
|
||||
To make an element draggable just call `draggable()` in the element
|
||||
|
||||
```javascript
|
||||
var draw = SVG('canvas').size(400, 400)
|
||||
var rect = draw.rect(100, 100)
|
||||
|
||||
rect.draggable()
|
||||
```
|
||||
|
||||
Yes indeed, that's it! Now the `rect` is draggable.
|
||||
|
||||
## Events
|
||||
The Plugin fires 4 different events
|
||||
|
||||
- beforedrag (cancelable)
|
||||
- dragstart
|
||||
- dragmove (cancelable)
|
||||
- dragend
|
||||
|
||||
You can bind/unbind listeners to this events:
|
||||
|
||||
```javascript
|
||||
// bind
|
||||
rect.on('dragstart.namespace', function(event){
|
||||
|
||||
// event.detail.event hold the given data explained below
|
||||
|
||||
})
|
||||
|
||||
// unbind
|
||||
rect.off('dragstart.namespace')
|
||||
```
|
||||
|
||||
### event.detail
|
||||
|
||||
`beforedrag`, `dragstart`, `dragmove` and `dragend` gives you the `event` and the `handler` which calculates the drag.
|
||||
Except for `beforedrag` the events also give you:
|
||||
|
||||
- `detail.m` transformation matrix to calculate screen coords to coords in the elements userspace
|
||||
- `detail.p` pageX and pageY transformed into the elements userspace
|
||||
|
||||
### cancelable events
|
||||
|
||||
You can prevent the default action of `beforedrag` and `dragmove` with a call to `event.preventDefault()` in the callback function.
|
||||
The shape won't be dragged in this case. That is helpfull if you want to implement your own drag handling.
|
||||
|
||||
```javascript
|
||||
rect.draggable().on('beforedrag', function(e){
|
||||
e.preventDefault()
|
||||
// no other events are bound
|
||||
// drag was completely prevented
|
||||
})
|
||||
|
||||
rect.draggable().on('dragmove', function(e){
|
||||
e.preventDefault()
|
||||
this.move(e.detail.p.x, e.detail.p.y)
|
||||
// events are still bound e.g. dragend will fire anyway
|
||||
})
|
||||
```
|
||||
|
||||
## Constraint
|
||||
The drag functionality can be limited within a given box. You can pass the the constraint values as an object:
|
||||
|
||||
```javascript
|
||||
rect.draggable({
|
||||
minX: 10
|
||||
, minY: 15
|
||||
, maxX: 200
|
||||
, maxY: 100
|
||||
, snapToGrid: 20
|
||||
})
|
||||
```
|
||||
|
||||
For more dynamic constraints a function can be passed as well:
|
||||
|
||||
```javascript
|
||||
rect.draggable(function(x, y) {
|
||||
return { x: x < 1000, y: y < 300 }
|
||||
})
|
||||
```
|
||||
|
||||
**Note** that every constraint given is evaluated in the elements coordinate system and not in the screen-space
|
||||
|
||||
## Remove
|
||||
The draggable functionality can be removed calling draggable again with false as argument:
|
||||
|
||||
```javascript
|
||||
rect.draggable(false)
|
||||
```
|
||||
|
||||
|
||||
## Restrictions
|
||||
|
||||
- If your root-svg is transformed this plugin won't work properly (Viewbox is possible)
|
||||
- Furthermore it is not possible to move a rotated or flipped group properly. However transformed nested SVGs are possible and should be used instead.
|
||||
|
||||
|
||||
## Dependencies
|
||||
This module requires svg.js >= v2.0.1
|
||||
+235
@@ -0,0 +1,235 @@
|
||||
/*! svg.draggable.js - v2.2.2 - 2019-01-08
|
||||
* https://github.com/svgdotjs/svg.draggable.js
|
||||
* Copyright (c) 2019 Wout Fierens; Licensed MIT */
|
||||
;(function() {
|
||||
|
||||
// creates handler, saves it
|
||||
function DragHandler(el){
|
||||
el.remember('_draggable', this)
|
||||
this.el = el
|
||||
}
|
||||
|
||||
|
||||
// Sets new parameter, starts dragging
|
||||
DragHandler.prototype.init = function(constraint, val){
|
||||
var _this = this
|
||||
this.constraint = constraint
|
||||
this.value = val
|
||||
this.el.on('mousedown.drag', function(e){ _this.start(e) })
|
||||
this.el.on('touchstart.drag', function(e){ _this.start(e) })
|
||||
}
|
||||
|
||||
// transforms one point from screen to user coords
|
||||
DragHandler.prototype.transformPoint = function(event, offset){
|
||||
event = event || window.event
|
||||
var touches = event.changedTouches && event.changedTouches[0] || event
|
||||
this.p.x = touches.clientX - (offset || 0)
|
||||
this.p.y = touches.clientY
|
||||
return this.p.matrixTransform(this.m)
|
||||
}
|
||||
|
||||
// gets elements bounding box with special handling of groups, nested and use
|
||||
DragHandler.prototype.getBBox = function(){
|
||||
|
||||
var box = this.el.bbox()
|
||||
|
||||
if(this.el instanceof SVG.Nested) box = this.el.rbox()
|
||||
|
||||
if (this.el instanceof SVG.G || this.el instanceof SVG.Use || this.el instanceof SVG.Nested) {
|
||||
box.x = this.el.x()
|
||||
box.y = this.el.y()
|
||||
}
|
||||
|
||||
return box
|
||||
}
|
||||
|
||||
// start dragging
|
||||
DragHandler.prototype.start = function(e){
|
||||
|
||||
// check for left button
|
||||
if(e.type == 'click'|| e.type == 'mousedown' || e.type == 'mousemove'){
|
||||
if((e.which || e.buttons) != 1){
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
var _this = this
|
||||
|
||||
// fire beforedrag event
|
||||
this.el.fire('beforedrag', { event: e, handler: this })
|
||||
if(this.el.event().defaultPrevented) return;
|
||||
|
||||
// prevent browser drag behavior as soon as possible
|
||||
e.preventDefault();
|
||||
|
||||
// prevent propagation to a parent that might also have dragging enabled
|
||||
e.stopPropagation();
|
||||
|
||||
// search for parent on the fly to make sure we can call
|
||||
// draggable() even when element is not in the dom currently
|
||||
this.parent = this.parent || this.el.parent(SVG.Nested) || this.el.parent(SVG.Doc)
|
||||
this.p = this.parent.node.createSVGPoint()
|
||||
|
||||
// save current transformation matrix
|
||||
this.m = this.el.node.getScreenCTM().inverse()
|
||||
|
||||
var box = this.getBBox()
|
||||
|
||||
var anchorOffset;
|
||||
|
||||
// fix text-anchor in text-element (#37)
|
||||
if(this.el instanceof SVG.Text){
|
||||
anchorOffset = this.el.node.getComputedTextLength();
|
||||
|
||||
switch(this.el.attr('text-anchor')){
|
||||
case 'middle':
|
||||
anchorOffset /= 2;
|
||||
break
|
||||
case 'start':
|
||||
anchorOffset = 0;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
this.startPoints = {
|
||||
// We take absolute coordinates since we are just using a delta here
|
||||
point: this.transformPoint(e, anchorOffset),
|
||||
box: box,
|
||||
transform: this.el.transform()
|
||||
}
|
||||
|
||||
// add drag and end events to window
|
||||
SVG.on(window, 'mousemove.drag', function(e){ _this.drag(e) })
|
||||
SVG.on(window, 'touchmove.drag', function(e){ _this.drag(e) })
|
||||
SVG.on(window, 'mouseup.drag', function(e){ _this.end(e) })
|
||||
SVG.on(window, 'touchend.drag', function(e){ _this.end(e) })
|
||||
|
||||
// fire dragstart event
|
||||
this.el.fire('dragstart', {event: e, p: this.startPoints.point, m: this.m, handler: this})
|
||||
}
|
||||
|
||||
// while dragging
|
||||
DragHandler.prototype.drag = function(e){
|
||||
|
||||
var box = this.getBBox()
|
||||
, p = this.transformPoint(e)
|
||||
, x = this.startPoints.box.x + p.x - this.startPoints.point.x
|
||||
, y = this.startPoints.box.y + p.y - this.startPoints.point.y
|
||||
, c = this.constraint
|
||||
, gx = p.x - this.startPoints.point.x
|
||||
, gy = p.y - this.startPoints.point.y
|
||||
|
||||
this.el.fire('dragmove', {
|
||||
event: e
|
||||
, p: p
|
||||
, m: this.m
|
||||
, handler: this
|
||||
})
|
||||
|
||||
if(this.el.event().defaultPrevented) return p
|
||||
|
||||
// move the element to its new position, if possible by constraint
|
||||
if (typeof c == 'function') {
|
||||
|
||||
var coord = c.call(this.el, x, y, this.m)
|
||||
|
||||
// bool, just show us if movement is allowed or not
|
||||
if (typeof coord == 'boolean') {
|
||||
coord = {
|
||||
x: coord,
|
||||
y: coord
|
||||
}
|
||||
}
|
||||
|
||||
// if true, we just move. If !false its a number and we move it there
|
||||
if (coord.x === true) {
|
||||
this.el.x(x)
|
||||
} else if (coord.x !== false) {
|
||||
this.el.x(coord.x)
|
||||
}
|
||||
|
||||
if (coord.y === true) {
|
||||
this.el.y(y)
|
||||
} else if (coord.y !== false) {
|
||||
this.el.y(coord.y)
|
||||
}
|
||||
|
||||
} else if (typeof c == 'object') {
|
||||
|
||||
// keep element within constrained box
|
||||
if (c.minX != null && x < c.minX) {
|
||||
x = c.minX
|
||||
gx = x - this.startPoints.box.x
|
||||
} else if (c.maxX != null && x > c.maxX - box.width) {
|
||||
x = c.maxX - box.width
|
||||
gx = x - this.startPoints.box.x
|
||||
} if (c.minY != null && y < c.minY) {
|
||||
y = c.minY
|
||||
gy = y - this.startPoints.box.y
|
||||
} else if (c.maxY != null && y > c.maxY - box.height) {
|
||||
y = c.maxY - box.height
|
||||
gy = y - this.startPoints.box.y
|
||||
}
|
||||
|
||||
if (c.snapToGrid != null) {
|
||||
x = x - (x % c.snapToGrid)
|
||||
y = y - (y % c.snapToGrid)
|
||||
gx = gx - (gx % c.snapToGrid)
|
||||
gy = gy - (gy % c.snapToGrid)
|
||||
}
|
||||
|
||||
if(this.el instanceof SVG.G)
|
||||
this.el.matrix(this.startPoints.transform).transform({x:gx, y: gy}, true)
|
||||
else
|
||||
this.el.move(x, y)
|
||||
}
|
||||
|
||||
// so we can use it in the end-method, too
|
||||
return p
|
||||
}
|
||||
|
||||
DragHandler.prototype.end = function(e){
|
||||
|
||||
// final drag
|
||||
var p = this.drag(e);
|
||||
|
||||
// fire dragend event
|
||||
this.el.fire('dragend', { event: e, p: p, m: this.m, handler: this })
|
||||
|
||||
// unbind events
|
||||
SVG.off(window, 'mousemove.drag')
|
||||
SVG.off(window, 'touchmove.drag')
|
||||
SVG.off(window, 'mouseup.drag')
|
||||
SVG.off(window, 'touchend.drag')
|
||||
|
||||
}
|
||||
|
||||
SVG.extend(SVG.Element, {
|
||||
// Make element draggable
|
||||
// Constraint might be an object (as described in readme.md) or a function in the form "function (x, y)" that gets called before every move.
|
||||
// The function can return a boolean or an object of the form {x, y}, to which the element will be moved. "False" skips moving, true moves to raw x, y.
|
||||
draggable: function(value, constraint) {
|
||||
|
||||
// Check the parameters and reassign if needed
|
||||
if (typeof value == 'function' || typeof value == 'object') {
|
||||
constraint = value
|
||||
value = true
|
||||
}
|
||||
|
||||
var dragHandler = this.remember('_draggable') || new DragHandler(this)
|
||||
|
||||
// When no parameter is given, value is true
|
||||
value = typeof value === 'undefined' ? true : value
|
||||
|
||||
if(value) dragHandler.init(constraint || {}, value)
|
||||
else {
|
||||
this.off('mousedown.drag')
|
||||
this.off('touchstart.drag')
|
||||
}
|
||||
|
||||
return this
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
}).call(this);
|
||||
+4
@@ -0,0 +1,4 @@
|
||||
/*! svg.draggable.js - v2.2.2 - 2019-01-08
|
||||
* https://github.com/svgdotjs/svg.draggable.js
|
||||
* Copyright (c) 2019 Wout Fierens; Licensed MIT */
|
||||
(function(){function a(a){a.remember("_draggable",this),this.el=a}a.prototype.init=function(a,b){var c=this;this.constraint=a,this.value=b,this.el.on("mousedown.drag",function(a){c.start(a)}),this.el.on("touchstart.drag",function(a){c.start(a)})},a.prototype.transformPoint=function(a,b){a=a||window.event;var c=a.changedTouches&&a.changedTouches[0]||a;return this.p.x=c.clientX-(b||0),this.p.y=c.clientY,this.p.matrixTransform(this.m)},a.prototype.getBBox=function(){var a=this.el.bbox();return this.el instanceof SVG.Nested&&(a=this.el.rbox()),(this.el instanceof SVG.G||this.el instanceof SVG.Use||this.el instanceof SVG.Nested)&&(a.x=this.el.x(),a.y=this.el.y()),a},a.prototype.start=function(a){if("click"!=a.type&&"mousedown"!=a.type&&"mousemove"!=a.type||1==(a.which||a.buttons)){var b=this;if(this.el.fire("beforedrag",{event:a,handler:this}),!this.el.event().defaultPrevented){a.preventDefault(),a.stopPropagation(),this.parent=this.parent||this.el.parent(SVG.Nested)||this.el.parent(SVG.Doc),this.p=this.parent.node.createSVGPoint(),this.m=this.el.node.getScreenCTM().inverse();var c,d=this.getBBox();if(this.el instanceof SVG.Text)switch(c=this.el.node.getComputedTextLength(),this.el.attr("text-anchor")){case"middle":c/=2;break;case"start":c=0}this.startPoints={point:this.transformPoint(a,c),box:d,transform:this.el.transform()},SVG.on(window,"mousemove.drag",function(a){b.drag(a)}),SVG.on(window,"touchmove.drag",function(a){b.drag(a)}),SVG.on(window,"mouseup.drag",function(a){b.end(a)}),SVG.on(window,"touchend.drag",function(a){b.end(a)}),this.el.fire("dragstart",{event:a,p:this.startPoints.point,m:this.m,handler:this})}}},a.prototype.drag=function(a){var b=this.getBBox(),c=this.transformPoint(a),d=this.startPoints.box.x+c.x-this.startPoints.point.x,e=this.startPoints.box.y+c.y-this.startPoints.point.y,f=this.constraint,g=c.x-this.startPoints.point.x,h=c.y-this.startPoints.point.y;if(this.el.fire("dragmove",{event:a,p:c,m:this.m,handler:this}),this.el.event().defaultPrevented)return c;if("function"==typeof f){var i=f.call(this.el,d,e,this.m);"boolean"==typeof i&&(i={x:i,y:i}),i.x===!0?this.el.x(d):i.x!==!1&&this.el.x(i.x),i.y===!0?this.el.y(e):i.y!==!1&&this.el.y(i.y)}else"object"==typeof f&&(null!=f.minX&&d<f.minX?(d=f.minX,g=d-this.startPoints.box.x):null!=f.maxX&&d>f.maxX-b.width&&(d=f.maxX-b.width,g=d-this.startPoints.box.x),null!=f.minY&&e<f.minY?(e=f.minY,h=e-this.startPoints.box.y):null!=f.maxY&&e>f.maxY-b.height&&(e=f.maxY-b.height,h=e-this.startPoints.box.y),null!=f.snapToGrid&&(d-=d%f.snapToGrid,e-=e%f.snapToGrid,g-=g%f.snapToGrid,h-=h%f.snapToGrid),this.el instanceof SVG.G?this.el.matrix(this.startPoints.transform).transform({x:g,y:h},!0):this.el.move(d,e));return c},a.prototype.end=function(a){var b=this.drag(a);this.el.fire("dragend",{event:a,p:b,m:this.m,handler:this}),SVG.off(window,"mousemove.drag"),SVG.off(window,"touchmove.drag"),SVG.off(window,"mouseup.drag"),SVG.off(window,"touchend.drag")},SVG.extend(SVG.Element,{draggable:function(b,c){("function"==typeof b||"object"==typeof b)&&(c=b,b=!0);var d=this.remember("_draggable")||new a(this);return b="undefined"==typeof b?!0:b,b?d.init(c||{},b):(this.off("mousedown.drag"),this.off("touchstart.drag")),this}})}).call(this);
|
||||
+43
@@ -0,0 +1,43 @@
|
||||
{
|
||||
"name": "svg.draggable.js",
|
||||
"version": "2.2.2",
|
||||
"description": "An extension for svg.js which allows to drag elements with your mouse",
|
||||
"main": "dist/svg.draggable.js",
|
||||
"keywords": [
|
||||
"svg.js",
|
||||
"draggable",
|
||||
"mouse"
|
||||
],
|
||||
"bugs": "https://github.com/svgdotjs/svg.draggable.js/issues",
|
||||
"license": "MIT",
|
||||
"author": {
|
||||
"name": "Wout Fierens"
|
||||
},
|
||||
"contributors": [
|
||||
{ "name": "Wout Fierens" },
|
||||
{ "name": "Ulrich-Matthias Schäfer" }
|
||||
],
|
||||
"homepage": "https://github.com/svgdotjs/svg.draggable.js",
|
||||
"files": [
|
||||
"dist/"
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/svgdotjs/svg.draggable.js.git"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.8.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"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-contrib-copy": "^0.7.0",
|
||||
"grunt": "~0.4.5",
|
||||
"grunt-bumper": "^1.0.4"
|
||||
},
|
||||
"dependencies": {
|
||||
"svg.js":"^2.0.1"
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user