feat:Added piechart in Dashboard
This commit is contained in:
+21
@@ -0,0 +1,21 @@
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2017 Ulrich-Matthias Schäfer
|
||||
|
||||
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.
|
||||
+71
@@ -0,0 +1,71 @@
|
||||
svg.resize.js
|
||||
=============
|
||||
|
||||
An extension of [svg.js](https://github.com/svgdotjs/svg.js) which allows to resize elements which are selected with [svg.select.js](https://github.com/svgdotjs/svg.select.js)
|
||||
|
||||
# Demo
|
||||
|
||||
For a demo see http://svgdotjs.github.io/svg.resize.js/
|
||||
|
||||
# Get Started
|
||||
|
||||
- Install `svg.resize.js` using bower:
|
||||
|
||||
bower install svg.resize.js
|
||||
|
||||
- Include the script after svg.js and svg.select.js into your page
|
||||
|
||||
<script src="svg.js"></script>
|
||||
<script src="svg.select.js"></script>
|
||||
<script src="svg.resize.js"></script>
|
||||
|
||||
- Select a rectangle and make it resizeable:
|
||||
|
||||
<div id="myDrawing"></div>
|
||||
|
||||
var drawing = new SVG('myDrawing').size(500, 500);
|
||||
drawing.rect(50,50).selectize().resize()
|
||||
|
||||
# Usage
|
||||
|
||||
Activate resizing
|
||||
|
||||
var draw = SVG('drawing');
|
||||
var rect = draw.rect(100,100);
|
||||
rect.selectize().resize();
|
||||
|
||||
Deactivate resizing
|
||||
|
||||
rect.resize('stop');
|
||||
|
||||
Keep element within constrained box
|
||||
|
||||
var draw = SVG('drawing');
|
||||
var rect = draw.rect(100, 100);
|
||||
var opt = {
|
||||
constraint: {
|
||||
minX: 0,
|
||||
minY: 0,
|
||||
maxX: 200,
|
||||
maxY: 300
|
||||
}
|
||||
};
|
||||
rect.selectize().resize(opt)
|
||||
|
||||
|
||||
# Options
|
||||
|
||||
- `snapToGrid`: Snaps the shape to a virtual grid while resizing (default `1`)
|
||||
- `snapToAngle`: Snaps to an angle when rotating (default `0.1`)
|
||||
- `constraint`: Keep element within constrained box (see usage above); The box snaps to the grid defined by `snapToGrid`.
|
||||
- `saveAspectRatio`: Save aspect ratio of the element while resizing with left-top, left-bottom, right-top, right-bottom points.
|
||||
|
||||
|
||||
# Events
|
||||
|
||||
- `resizing`: Fired when changes occur
|
||||
- `resizedone`: Fired when resizing is done
|
||||
|
||||
# Known Issues
|
||||
|
||||
- resize nested svgs does not work
|
||||
+493
@@ -0,0 +1,493 @@
|
||||
/*!
|
||||
* svg.resize.js - An extension for svg.js which allows to resize elements which are selected
|
||||
* @version 1.4.3
|
||||
* https://github.com/svgdotjs/svg.resize.js
|
||||
*
|
||||
* @copyright [object Object]
|
||||
* @license MIT
|
||||
*/;
|
||||
;(function() {
|
||||
"use strict";
|
||||
|
||||
;(function () {
|
||||
|
||||
function ResizeHandler(el) {
|
||||
|
||||
el.remember('_resizeHandler', this);
|
||||
|
||||
this.el = el;
|
||||
this.parameters = {};
|
||||
this.lastUpdateCall = null;
|
||||
this.p = el.doc().node.createSVGPoint();
|
||||
}
|
||||
|
||||
ResizeHandler.prototype.transformPoint = function(x, y, m){
|
||||
|
||||
this.p.x = x - (this.offset.x - window.pageXOffset);
|
||||
this.p.y = y - (this.offset.y - window.pageYOffset);
|
||||
|
||||
return this.p.matrixTransform(m || this.m);
|
||||
|
||||
};
|
||||
|
||||
ResizeHandler.prototype._extractPosition = function(event) {
|
||||
// Extract a position from a mouse/touch event.
|
||||
// Returns { x: .., y: .. }
|
||||
return {
|
||||
x: event.clientX != null ? event.clientX : event.touches[0].clientX,
|
||||
y: event.clientY != null ? event.clientY : event.touches[0].clientY
|
||||
}
|
||||
};
|
||||
|
||||
ResizeHandler.prototype.init = function (options) {
|
||||
|
||||
var _this = this;
|
||||
|
||||
this.stop();
|
||||
|
||||
if (options === 'stop') {
|
||||
return;
|
||||
}
|
||||
|
||||
this.options = {};
|
||||
|
||||
// Merge options and defaults
|
||||
for (var i in this.el.resize.defaults) {
|
||||
this.options[i] = this.el.resize.defaults[i];
|
||||
if (typeof options[i] !== 'undefined') {
|
||||
this.options[i] = options[i];
|
||||
}
|
||||
}
|
||||
|
||||
// We listen to all these events which are specifying different edges
|
||||
this.el.on('lt.resize', function(e){ _this.resize(e || window.event); }); // Left-Top
|
||||
this.el.on('rt.resize', function(e){ _this.resize(e || window.event); }); // Right-Top
|
||||
this.el.on('rb.resize', function(e){ _this.resize(e || window.event); }); // Right-Bottom
|
||||
this.el.on('lb.resize', function(e){ _this.resize(e || window.event); }); // Left-Bottom
|
||||
|
||||
this.el.on('t.resize', function(e){ _this.resize(e || window.event); }); // Top
|
||||
this.el.on('r.resize', function(e){ _this.resize(e || window.event); }); // Right
|
||||
this.el.on('b.resize', function(e){ _this.resize(e || window.event); }); // Bottom
|
||||
this.el.on('l.resize', function(e){ _this.resize(e || window.event); }); // Left
|
||||
|
||||
this.el.on('rot.resize', function(e){ _this.resize(e || window.event); }); // Rotation
|
||||
|
||||
this.el.on('point.resize', function(e){ _this.resize(e || window.event); }); // Point-Moving
|
||||
|
||||
// This call ensures, that the plugin reacts to a change of snapToGrid immediately
|
||||
this.update();
|
||||
|
||||
};
|
||||
|
||||
ResizeHandler.prototype.stop = function(){
|
||||
this.el.off('lt.resize');
|
||||
this.el.off('rt.resize');
|
||||
this.el.off('rb.resize');
|
||||
this.el.off('lb.resize');
|
||||
|
||||
this.el.off('t.resize');
|
||||
this.el.off('r.resize');
|
||||
this.el.off('b.resize');
|
||||
this.el.off('l.resize');
|
||||
|
||||
this.el.off('rot.resize');
|
||||
|
||||
this.el.off('point.resize');
|
||||
|
||||
return this;
|
||||
};
|
||||
|
||||
ResizeHandler.prototype.resize = function (event) {
|
||||
|
||||
var _this = this;
|
||||
|
||||
this.m = this.el.node.getScreenCTM().inverse();
|
||||
this.offset = { x: window.pageXOffset, y: window.pageYOffset };
|
||||
|
||||
var txPt = this._extractPosition(event.detail.event);
|
||||
this.parameters = {
|
||||
type: this.el.type, // the type of element
|
||||
p: this.transformPoint(txPt.x, txPt.y),
|
||||
x: event.detail.x, // x-position of the mouse when resizing started
|
||||
y: event.detail.y, // y-position of the mouse when resizing started
|
||||
box: this.el.bbox(), // The bounding-box of the element
|
||||
rotation: this.el.transform().rotation // The current rotation of the element
|
||||
};
|
||||
|
||||
// Add font-size parameter if the element type is text
|
||||
if (this.el.type === "text") {
|
||||
this.parameters.fontSize = this.el.attr()["font-size"];
|
||||
}
|
||||
|
||||
// the i-param in the event holds the index of the point which is moved, when using `deepSelect`
|
||||
if (event.detail.i !== undefined) {
|
||||
|
||||
// get the point array
|
||||
var array = this.el.array().valueOf();
|
||||
|
||||
// Save the index and the point which is moved
|
||||
this.parameters.i = event.detail.i;
|
||||
this.parameters.pointCoords = [array[event.detail.i][0], array[event.detail.i][1]];
|
||||
}
|
||||
|
||||
// Lets check which edge of the bounding-box was clicked and resize the this.el according to this
|
||||
switch (event.type) {
|
||||
|
||||
// Left-Top-Edge
|
||||
case 'lt':
|
||||
// We build a calculating function for every case which gives us the new position of the this.el
|
||||
this.calc = function (diffX, diffY) {
|
||||
// The procedure is always the same
|
||||
// First we snap the edge to the given grid (snapping to 1px grid is normal resizing)
|
||||
var snap = this.snapToGrid(diffX, diffY);
|
||||
|
||||
// Now we check if the new height and width still valid (> 0)
|
||||
if (this.parameters.box.width - snap[0] > 0 && this.parameters.box.height - snap[1] > 0) {
|
||||
// ...if valid, we resize the this.el (which can include moving because the coord-system starts at the left-top and this edge is moving sometimes when resized)
|
||||
|
||||
/*
|
||||
* but first check if the element is text box, so we can change the font size instead of
|
||||
* the width and height
|
||||
*/
|
||||
|
||||
if (this.parameters.type === "text") {
|
||||
this.el.move(this.parameters.box.x + snap[0], this.parameters.box.y);
|
||||
this.el.attr("font-size", this.parameters.fontSize - snap[0]);
|
||||
return;
|
||||
}
|
||||
|
||||
snap = this.checkAspectRatio(snap);
|
||||
|
||||
this.el.move(this.parameters.box.x + snap[0], this.parameters.box.y + snap[1]).size(this.parameters.box.width - snap[0], this.parameters.box.height - snap[1]);
|
||||
}
|
||||
};
|
||||
break;
|
||||
|
||||
// Right-Top
|
||||
case 'rt':
|
||||
// s.a.
|
||||
this.calc = function (diffX, diffY) {
|
||||
var snap = this.snapToGrid(diffX, diffY, 1 << 1);
|
||||
if (this.parameters.box.width + snap[0] > 0 && this.parameters.box.height - snap[1] > 0) {
|
||||
if (this.parameters.type === "text") {
|
||||
this.el.move(this.parameters.box.x - snap[0], this.parameters.box.y);
|
||||
this.el.attr("font-size", this.parameters.fontSize + snap[0]);
|
||||
return;
|
||||
}
|
||||
|
||||
snap = this.checkAspectRatio(snap, true);
|
||||
|
||||
this.el.move(this.parameters.box.x, this.parameters.box.y + snap[1]).size(this.parameters.box.width + snap[0], this.parameters.box.height - snap[1]);
|
||||
}
|
||||
};
|
||||
break;
|
||||
|
||||
// Right-Bottom
|
||||
case 'rb':
|
||||
// s.a.
|
||||
this.calc = function (diffX, diffY) {
|
||||
var snap = this.snapToGrid(diffX, diffY, 0);
|
||||
if (this.parameters.box.width + snap[0] > 0 && this.parameters.box.height + snap[1] > 0) {
|
||||
if (this.parameters.type === "text") {
|
||||
this.el.move(this.parameters.box.x - snap[0], this.parameters.box.y);
|
||||
this.el.attr("font-size", this.parameters.fontSize + snap[0]);
|
||||
return;
|
||||
}
|
||||
|
||||
snap = this.checkAspectRatio(snap);
|
||||
|
||||
this.el.move(this.parameters.box.x, this.parameters.box.y).size(this.parameters.box.width + snap[0], this.parameters.box.height + snap[1]);
|
||||
}
|
||||
};
|
||||
break;
|
||||
|
||||
// Left-Bottom
|
||||
case 'lb':
|
||||
// s.a.
|
||||
this.calc = function (diffX, diffY) {
|
||||
var snap = this.snapToGrid(diffX, diffY, 1);
|
||||
if (this.parameters.box.width - snap[0] > 0 && this.parameters.box.height + snap[1] > 0) {
|
||||
if (this.parameters.type === "text") {
|
||||
this.el.move(this.parameters.box.x + snap[0], this.parameters.box.y);
|
||||
this.el.attr("font-size", this.parameters.fontSize - snap[0]);
|
||||
return;
|
||||
}
|
||||
|
||||
snap = this.checkAspectRatio(snap, true);
|
||||
|
||||
this.el.move(this.parameters.box.x + snap[0], this.parameters.box.y).size(this.parameters.box.width - snap[0], this.parameters.box.height + snap[1]);
|
||||
}
|
||||
};
|
||||
break;
|
||||
|
||||
// Top
|
||||
case 't':
|
||||
// s.a.
|
||||
this.calc = function (diffX, diffY) {
|
||||
var snap = this.snapToGrid(diffX, diffY, 1 << 1);
|
||||
if (this.parameters.box.height - snap[1] > 0) {
|
||||
// Disable the font-resizing if it is not from the corner of bounding-box
|
||||
if (this.parameters.type === "text") {
|
||||
return;
|
||||
}
|
||||
|
||||
this.el.move(this.parameters.box.x, this.parameters.box.y + snap[1]).height(this.parameters.box.height - snap[1]);
|
||||
}
|
||||
};
|
||||
break;
|
||||
|
||||
// Right
|
||||
case 'r':
|
||||
// s.a.
|
||||
this.calc = function (diffX, diffY) {
|
||||
var snap = this.snapToGrid(diffX, diffY, 0);
|
||||
if (this.parameters.box.width + snap[0] > 0) {
|
||||
if (this.parameters.type === "text") {
|
||||
return;
|
||||
}
|
||||
|
||||
this.el.move(this.parameters.box.x, this.parameters.box.y).width(this.parameters.box.width + snap[0]);
|
||||
}
|
||||
};
|
||||
break;
|
||||
|
||||
// Bottom
|
||||
case 'b':
|
||||
// s.a.
|
||||
this.calc = function (diffX, diffY) {
|
||||
var snap = this.snapToGrid(diffX, diffY, 0);
|
||||
if (this.parameters.box.height + snap[1] > 0) {
|
||||
if (this.parameters.type === "text") {
|
||||
return;
|
||||
}
|
||||
|
||||
this.el.move(this.parameters.box.x, this.parameters.box.y).height(this.parameters.box.height + snap[1]);
|
||||
}
|
||||
};
|
||||
break;
|
||||
|
||||
// Left
|
||||
case 'l':
|
||||
// s.a.
|
||||
this.calc = function (diffX, diffY) {
|
||||
var snap = this.snapToGrid(diffX, diffY, 1);
|
||||
if (this.parameters.box.width - snap[0] > 0) {
|
||||
if (this.parameters.type === "text") {
|
||||
return;
|
||||
}
|
||||
|
||||
this.el.move(this.parameters.box.x + snap[0], this.parameters.box.y).width(this.parameters.box.width - snap[0]);
|
||||
}
|
||||
};
|
||||
break;
|
||||
|
||||
// Rotation
|
||||
case 'rot':
|
||||
// s.a.
|
||||
this.calc = function (diffX, diffY) {
|
||||
|
||||
// yes this is kinda stupid but we need the mouse coords back...
|
||||
var current = {x: diffX + this.parameters.p.x, y: diffY + this.parameters.p.y};
|
||||
|
||||
// start minus middle
|
||||
var sAngle = Math.atan2((this.parameters.p.y - this.parameters.box.y - this.parameters.box.height / 2), (this.parameters.p.x - this.parameters.box.x - this.parameters.box.width / 2));
|
||||
|
||||
// end minus middle
|
||||
var pAngle = Math.atan2((current.y - this.parameters.box.y - this.parameters.box.height / 2), (current.x - this.parameters.box.x - this.parameters.box.width / 2));
|
||||
|
||||
var angle = this.parameters.rotation + (pAngle - sAngle) * 180 / Math.PI + this.options.snapToAngle / 2;
|
||||
|
||||
// We have to move the element to the center of the box first and change the rotation afterwards
|
||||
// because rotation always works around a rotation-center, which is changed when moving the element
|
||||
// We also set the new rotation center to the center of the box.
|
||||
this.el.center(this.parameters.box.cx, this.parameters.box.cy).rotate(angle - (angle % this.options.snapToAngle), this.parameters.box.cx, this.parameters.box.cy);
|
||||
};
|
||||
break;
|
||||
|
||||
// Moving one single Point (needed when an element is deepSelected which means you can move every single point of the object)
|
||||
case 'point':
|
||||
this.calc = function (diffX, diffY) {
|
||||
|
||||
// Snapping the point to the grid
|
||||
var snap = this.snapToGrid(diffX, diffY, this.parameters.pointCoords[0], this.parameters.pointCoords[1]);
|
||||
|
||||
// Get the point array
|
||||
var array = this.el.array().valueOf();
|
||||
|
||||
// Changing the moved point in the array
|
||||
array[this.parameters.i][0] = this.parameters.pointCoords[0] + snap[0];
|
||||
array[this.parameters.i][1] = this.parameters.pointCoords[1] + snap[1];
|
||||
|
||||
// And plot the new this.el
|
||||
this.el.plot(array);
|
||||
};
|
||||
}
|
||||
|
||||
this.el.fire('resizestart', {dx: this.parameters.x, dy: this.parameters.y, event: event});
|
||||
// When resizing started, we have to register events for...
|
||||
// Touches.
|
||||
SVG.on(window, 'touchmove.resize', function(e) {
|
||||
_this.update(e || window.event);
|
||||
});
|
||||
SVG.on(window, 'touchend.resize', function() {
|
||||
_this.done();
|
||||
});
|
||||
// Mouse.
|
||||
SVG.on(window, 'mousemove.resize', function (e) {
|
||||
_this.update(e || window.event);
|
||||
});
|
||||
SVG.on(window, 'mouseup.resize', function () {
|
||||
_this.done();
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
// The update-function redraws the element every time the mouse is moving
|
||||
ResizeHandler.prototype.update = function (event) {
|
||||
|
||||
if (!event) {
|
||||
if (this.lastUpdateCall) {
|
||||
this.calc(this.lastUpdateCall[0], this.lastUpdateCall[1]);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// Calculate the difference between the mouseposition at start and now
|
||||
var txPt = this._extractPosition(event);
|
||||
var p = this.transformPoint(txPt.x, txPt.y);
|
||||
|
||||
var diffX = p.x - this.parameters.p.x,
|
||||
diffY = p.y - this.parameters.p.y;
|
||||
|
||||
this.lastUpdateCall = [diffX, diffY];
|
||||
|
||||
// Calculate the new position and height / width of the element
|
||||
this.calc(diffX, diffY);
|
||||
|
||||
// Emit an event to say we have changed.
|
||||
this.el.fire('resizing', {dx: diffX, dy: diffY, event: event});
|
||||
};
|
||||
|
||||
// Is called on mouseup.
|
||||
// Removes the update-function from the mousemove event
|
||||
ResizeHandler.prototype.done = function () {
|
||||
this.lastUpdateCall = null;
|
||||
SVG.off(window, 'mousemove.resize');
|
||||
SVG.off(window, 'mouseup.resize');
|
||||
SVG.off(window, 'touchmove.resize');
|
||||
SVG.off(window, 'touchend.resize');
|
||||
this.el.fire('resizedone');
|
||||
};
|
||||
|
||||
// The flag is used to determine whether the resizing is used with a left-Point (first bit) and top-point (second bit)
|
||||
// In this cases the temp-values are calculated differently
|
||||
ResizeHandler.prototype.snapToGrid = function (diffX, diffY, flag, pointCoordsY) {
|
||||
|
||||
var temp;
|
||||
|
||||
// If `pointCoordsY` is given, a single Point has to be snapped (deepSelect). That's why we need a different temp-value
|
||||
if (typeof pointCoordsY !== 'undefined') {
|
||||
// Note that flag = pointCoordsX in this case
|
||||
temp = [(flag + diffX) % this.options.snapToGrid, (pointCoordsY + diffY) % this.options.snapToGrid];
|
||||
} else {
|
||||
// We check if the flag is set and if not we set a default-value (both bits set - which means upper-left-edge)
|
||||
flag = flag == null ? 1 | 1 << 1 : flag;
|
||||
temp = [(this.parameters.box.x + diffX + (flag & 1 ? 0 : this.parameters.box.width)) % this.options.snapToGrid, (this.parameters.box.y + diffY + (flag & (1 << 1) ? 0 : this.parameters.box.height)) % this.options.snapToGrid];
|
||||
}
|
||||
|
||||
if(diffX < 0) {
|
||||
temp[0] -= this.options.snapToGrid;
|
||||
}
|
||||
if(diffY < 0) {
|
||||
temp[1] -= this.options.snapToGrid;
|
||||
}
|
||||
|
||||
diffX -= (Math.abs(temp[0]) < this.options.snapToGrid / 2 ?
|
||||
temp[0] :
|
||||
temp[0] - (diffX < 0 ? -this.options.snapToGrid : this.options.snapToGrid));
|
||||
diffY -= (Math.abs(temp[1]) < this.options.snapToGrid / 2 ?
|
||||
temp[1] :
|
||||
temp[1] - (diffY < 0 ? -this.options.snapToGrid : this.options.snapToGrid));
|
||||
|
||||
return this.constraintToBox(diffX, diffY, flag, pointCoordsY);
|
||||
|
||||
};
|
||||
|
||||
// keep element within constrained box
|
||||
ResizeHandler.prototype.constraintToBox = function (diffX, diffY, flag, pointCoordsY) {
|
||||
//return [diffX, diffY]
|
||||
var c = this.options.constraint || {};
|
||||
var orgX, orgY;
|
||||
|
||||
if (typeof pointCoordsY !== 'undefined') {
|
||||
orgX = flag;
|
||||
orgY = pointCoordsY;
|
||||
} else {
|
||||
orgX = this.parameters.box.x + (flag & 1 ? 0 : this.parameters.box.width);
|
||||
orgY = this.parameters.box.y + (flag & (1<<1) ? 0 : this.parameters.box.height);
|
||||
}
|
||||
|
||||
if (typeof c.minX !== 'undefined' && orgX + diffX < c.minX) {
|
||||
diffX = c.minX - orgX;
|
||||
}
|
||||
|
||||
if (typeof c.maxX !== 'undefined' && orgX + diffX > c.maxX) {
|
||||
diffX = c.maxX - orgX;
|
||||
}
|
||||
|
||||
if (typeof c.minY !== 'undefined' && orgY + diffY < c.minY) {
|
||||
diffY = c.minY - orgY;
|
||||
}
|
||||
|
||||
if (typeof c.maxY !== 'undefined' && orgY + diffY > c.maxY) {
|
||||
diffY = c.maxY - orgY;
|
||||
}
|
||||
|
||||
return [diffX, diffY];
|
||||
};
|
||||
|
||||
ResizeHandler.prototype.checkAspectRatio = function (snap, isReverse) {
|
||||
if (!this.options.saveAspectRatio) {
|
||||
return snap;
|
||||
}
|
||||
|
||||
var updatedSnap = snap.slice();
|
||||
var aspectRatio = this.parameters.box.width / this.parameters.box.height;
|
||||
var newW = this.parameters.box.width + snap[0];
|
||||
var newH = this.parameters.box.height - snap[1];
|
||||
var newAspectRatio = newW / newH;
|
||||
|
||||
if (newAspectRatio < aspectRatio) {
|
||||
// Height is too big. Adapt it
|
||||
updatedSnap[1] = newW / aspectRatio - this.parameters.box.height;
|
||||
isReverse && (updatedSnap[1] = -updatedSnap[1]);
|
||||
} else if (newAspectRatio > aspectRatio) {
|
||||
// Width is too big. Adapt it
|
||||
updatedSnap[0] = this.parameters.box.width - newH * aspectRatio;
|
||||
isReverse && (updatedSnap[0] = -updatedSnap[0]);
|
||||
}
|
||||
|
||||
return updatedSnap;
|
||||
};
|
||||
|
||||
SVG.extend(SVG.Element, {
|
||||
// Resize element with mouse
|
||||
resize: function (options) {
|
||||
|
||||
(this.remember('_resizeHandler') || new ResizeHandler(this)).init(options || {});
|
||||
|
||||
return this;
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
SVG.Element.prototype.resize.defaults = {
|
||||
snapToAngle: 0.1, // Specifies the speed the rotation is happening when moving the mouse
|
||||
snapToGrid: 1, // Snaps to a grid of `snapToGrid` Pixels
|
||||
constraint: {}, // keep element within constrained box
|
||||
saveAspectRatio: false // Save aspect ratio when resizing using lt, rt, rb or lb points
|
||||
};
|
||||
|
||||
}).call(this);
|
||||
}());
|
||||
+1
File diff suppressed because one or more lines are too long
+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.
|
||||
+72
@@ -0,0 +1,72 @@
|
||||
svg.select.js
|
||||
=============
|
||||
|
||||
An extension of [svg.js](https://github.com/svgdotjs/svg.js) which allows to select elements with mouse
|
||||
|
||||
**Note:** Duo to naming conflicts the exported method was renamed from `select()` to `selectize()`.
|
||||
|
||||
# Demo
|
||||
|
||||
For a demo see http://svgdotjs.github.io/svg.select.js/
|
||||
|
||||
# Get Started
|
||||
|
||||
- Install `svg.select.js` using bower:
|
||||
|
||||
bower install svg.select.js
|
||||
|
||||
- Include the script after svg.js into your page
|
||||
|
||||
<script src="svg.js"></script>
|
||||
<script src="svg.select.js"></script>
|
||||
|
||||
- Select a rectangle using this simple piece of code:
|
||||
|
||||
<div id="myDrawing"></div>
|
||||
|
||||
var drawing = new SVG('myDrawing').size(500, 500);
|
||||
drawing.rect(50,50).selectize()
|
||||
|
||||
# Usage
|
||||
|
||||
Select
|
||||
|
||||
var draw = SVG('drawing');
|
||||
var rect = draw.rect(100,100);
|
||||
rect.selectize();
|
||||
|
||||
// or deepSelect
|
||||
rect.selectize({deepSelect:true});
|
||||
|
||||
Unselect
|
||||
|
||||
rect.selectize(false);
|
||||
|
||||
// or deepSelect
|
||||
rect.selectize(false, {deepSelect:true});
|
||||
|
||||
|
||||
You can style the selection with the classes
|
||||
|
||||
- `svg_select_boundingRect`
|
||||
- `svg_select_points`
|
||||
- `svg_select_points_lt` - *left top*
|
||||
- `svg_select_points_rt` - *right top*
|
||||
- `svg_select_points_rb` - *right bottom*
|
||||
- `svg_select_points_lb` - *left bottom*
|
||||
- `svg_select_points_t` - *top*
|
||||
- `svg_select_points_r` - *right*
|
||||
- `svg_select_points_b` - *bottom*
|
||||
- `svg_select_points_l` - *left*
|
||||
- `svg_select_points_rot` - *rotation point*
|
||||
- `svg_select_points_point` - *deepSelect points*
|
||||
|
||||
|
||||
# Options
|
||||
|
||||
- points: Points should be drawn (default `true`)
|
||||
- classRect: Classname of the rect from the bounding Box (default `svg_select_boundingRect`)
|
||||
- classPoints: Classname/Prefix of the Points (default `svg_select_points`)
|
||||
- radius: Radius of the points (default `7`)
|
||||
- rotationPoint: Draws the point for doing rotation (default `true`)
|
||||
- deepSelect: Only for polygon/polyline/line. Selects the points itself (default `false`)
|
||||
+44
@@ -0,0 +1,44 @@
|
||||
.svg_select_points_lt{
|
||||
cursor: nw-resize;
|
||||
}
|
||||
.svg_select_points_rt{
|
||||
cursor: ne-resize;
|
||||
}
|
||||
.svg_select_points_rb{
|
||||
cursor: se-resize;
|
||||
}
|
||||
.svg_select_points_lb{
|
||||
cursor: sw-resize;
|
||||
}
|
||||
.svg_select_points_t{
|
||||
cursor: n-resize;
|
||||
}
|
||||
.svg_select_points_r{
|
||||
cursor: e-resize;
|
||||
}
|
||||
.svg_select_points_b{
|
||||
cursor: s-resize;
|
||||
}
|
||||
.svg_select_points_l{
|
||||
cursor: w-resize;
|
||||
}
|
||||
|
||||
.svg_select_points_rot{
|
||||
stroke-width:1;
|
||||
stroke:black;
|
||||
fill: #F9FFED;
|
||||
}
|
||||
|
||||
.svg_select_points_point{
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
.svg_select_boundingRect{
|
||||
stroke-width:1;
|
||||
fill:gray;
|
||||
stroke-dasharray:10 10;
|
||||
stroke:black;
|
||||
stroke-opacity:0.8;
|
||||
fill-opacity:0.1;
|
||||
pointer-events:none; /* This ons is needed if you want to deselect or drag the shape*/
|
||||
}
|
||||
+317
@@ -0,0 +1,317 @@
|
||||
/*!
|
||||
* svg.select.js - An extension of svg.js which allows to select elements with mouse
|
||||
* @version 2.1.2
|
||||
* https://github.com/svgdotjs/svg.select.js
|
||||
*
|
||||
* @copyright Ulrich-Matthias Schäfer
|
||||
* @license MIT
|
||||
*/;
|
||||
;(function() {
|
||||
"use strict";
|
||||
|
||||
function SelectHandler(el) {
|
||||
|
||||
this.el = el;
|
||||
el.remember('_selectHandler', this);
|
||||
this.pointSelection = {isSelected: false};
|
||||
this.rectSelection = {isSelected: false};
|
||||
|
||||
}
|
||||
|
||||
SelectHandler.prototype.init = function (value, options) {
|
||||
|
||||
var bbox = this.el.bbox();
|
||||
this.options = {};
|
||||
|
||||
// Merging the defaults and the options-object together
|
||||
for (var i in this.el.selectize.defaults) {
|
||||
this.options[i] = this.el.selectize.defaults[i];
|
||||
if (options[i] !== undefined) {
|
||||
this.options[i] = options[i];
|
||||
}
|
||||
}
|
||||
|
||||
this.parent = this.el.parent();
|
||||
this.nested = (this.nested || this.parent.group());
|
||||
this.nested.matrix(new SVG.Matrix(this.el).translate(bbox.x, bbox.y));
|
||||
|
||||
// When deepSelect is enabled and the element is a line/polyline/polygon, draw only points for moving
|
||||
if (this.options.deepSelect && ['line', 'polyline', 'polygon'].indexOf(this.el.type) !== -1) {
|
||||
this.selectPoints(value);
|
||||
} else {
|
||||
this.selectRect(value);
|
||||
}
|
||||
|
||||
this.observe();
|
||||
this.cleanup();
|
||||
|
||||
};
|
||||
|
||||
SelectHandler.prototype.selectPoints = function (value) {
|
||||
|
||||
this.pointSelection.isSelected = value;
|
||||
|
||||
// When set is already there we dont have to create one
|
||||
if (this.pointSelection.set) {
|
||||
return this;
|
||||
}
|
||||
|
||||
// Create our set of elements
|
||||
this.pointSelection.set = this.parent.set();
|
||||
// draw the circles and mark the element as selected
|
||||
this.drawCircles();
|
||||
|
||||
return this;
|
||||
|
||||
};
|
||||
|
||||
// create the point-array which contains the 2 points of a line or simply the points-array of polyline/polygon
|
||||
SelectHandler.prototype.getPointArray = function () {
|
||||
var bbox = this.el.bbox();
|
||||
|
||||
return this.el.array().valueOf().map(function (el) {
|
||||
return [el[0] - bbox.x, el[1] - bbox.y];
|
||||
});
|
||||
};
|
||||
|
||||
// The function to draw the circles
|
||||
SelectHandler.prototype.drawCircles = function () {
|
||||
|
||||
var _this = this, array = this.getPointArray();
|
||||
|
||||
// go through the array of points
|
||||
for (var i = 0, len = array.length; i < len; ++i) {
|
||||
|
||||
var curriedEvent = (function (k) {
|
||||
return function (ev) {
|
||||
ev = ev || window.event;
|
||||
ev.preventDefault ? ev.preventDefault() : ev.returnValue = false;
|
||||
ev.stopPropagation();
|
||||
|
||||
var x = ev.pageX || ev.touches[0].pageX;
|
||||
var y = ev.pageY || ev.touches[0].pageY;
|
||||
_this.el.fire('point', {x: x, y: y, i: k, event: ev});
|
||||
};
|
||||
})(i);
|
||||
|
||||
// add every point to the set
|
||||
this.pointSelection.set.add(
|
||||
// a circle with our css-classes and a touchstart-event which fires our event for moving points
|
||||
this.nested.circle(this.options.radius)
|
||||
.center(array[i][0], array[i][1])
|
||||
.addClass(this.options.classPoints)
|
||||
.addClass(this.options.classPoints + '_point')
|
||||
.on('touchstart', curriedEvent)
|
||||
.on('mousedown', curriedEvent)
|
||||
);
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
// every time a circle is moved, we have to update the positions of our circle
|
||||
SelectHandler.prototype.updatePointSelection = function () {
|
||||
var array = this.getPointArray();
|
||||
|
||||
this.pointSelection.set.each(function (i) {
|
||||
if (this.cx() === array[i][0] && this.cy() === array[i][1]) {
|
||||
return;
|
||||
}
|
||||
this.center(array[i][0], array[i][1]);
|
||||
});
|
||||
};
|
||||
|
||||
SelectHandler.prototype.updateRectSelection = function () {
|
||||
var bbox = this.el.bbox();
|
||||
|
||||
this.rectSelection.set.get(0).attr({
|
||||
width: bbox.width,
|
||||
height: bbox.height
|
||||
});
|
||||
|
||||
// set.get(1) is always in the upper left corner. no need to move it
|
||||
if (this.options.points) {
|
||||
this.rectSelection.set.get(2).center(bbox.width, 0);
|
||||
this.rectSelection.set.get(3).center(bbox.width, bbox.height);
|
||||
this.rectSelection.set.get(4).center(0, bbox.height);
|
||||
|
||||
this.rectSelection.set.get(5).center(bbox.width / 2, 0);
|
||||
this.rectSelection.set.get(6).center(bbox.width, bbox.height / 2);
|
||||
this.rectSelection.set.get(7).center(bbox.width / 2, bbox.height);
|
||||
this.rectSelection.set.get(8).center(0, bbox.height / 2);
|
||||
}
|
||||
|
||||
if (this.options.rotationPoint) {
|
||||
if (this.options.points) {
|
||||
this.rectSelection.set.get(9).center(bbox.width / 2, 20);
|
||||
} else {
|
||||
this.rectSelection.set.get(1).center(bbox.width / 2, 20);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
SelectHandler.prototype.selectRect = function (value) {
|
||||
|
||||
var _this = this, bbox = this.el.bbox();
|
||||
|
||||
this.rectSelection.isSelected = value;
|
||||
|
||||
// when set is already p
|
||||
this.rectSelection.set = this.rectSelection.set || this.parent.set();
|
||||
|
||||
// helperFunction to create a mouse-down function which triggers the event specified in `eventName`
|
||||
function getMoseDownFunc(eventName) {
|
||||
return function (ev) {
|
||||
ev = ev || window.event;
|
||||
ev.preventDefault ? ev.preventDefault() : ev.returnValue = false;
|
||||
ev.stopPropagation();
|
||||
|
||||
var x = ev.pageX || ev.touches[0].pageX;
|
||||
var y = ev.pageY || ev.touches[0].pageY;
|
||||
_this.el.fire(eventName, {x: x, y: y, event: ev});
|
||||
};
|
||||
}
|
||||
|
||||
// create the selection-rectangle and add the css-class
|
||||
if (!this.rectSelection.set.get(0)) {
|
||||
this.rectSelection.set.add(this.nested.rect(bbox.width, bbox.height).addClass(this.options.classRect));
|
||||
}
|
||||
|
||||
// Draw Points at the edges, if enabled
|
||||
if (this.options.points && !this.rectSelection.set.get(1)) {
|
||||
var ename ="touchstart", mname = "mousedown";
|
||||
this.rectSelection.set.add(this.nested.circle(this.options.radius).center(0, 0).attr('class', this.options.classPoints + '_lt').on(mname, getMoseDownFunc('lt')).on(ename, getMoseDownFunc('lt')));
|
||||
this.rectSelection.set.add(this.nested.circle(this.options.radius).center(bbox.width, 0).attr('class', this.options.classPoints + '_rt').on(mname, getMoseDownFunc('rt')).on(ename, getMoseDownFunc('rt')));
|
||||
this.rectSelection.set.add(this.nested.circle(this.options.radius).center(bbox.width, bbox.height).attr('class', this.options.classPoints + '_rb').on(mname, getMoseDownFunc('rb')).on(ename, getMoseDownFunc('rb')));
|
||||
this.rectSelection.set.add(this.nested.circle(this.options.radius).center(0, bbox.height).attr('class', this.options.classPoints + '_lb').on(mname, getMoseDownFunc('lb')).on(ename, getMoseDownFunc('lb')));
|
||||
|
||||
this.rectSelection.set.add(this.nested.circle(this.options.radius).center(bbox.width / 2, 0).attr('class', this.options.classPoints + '_t').on(mname, getMoseDownFunc('t')).on(ename, getMoseDownFunc('t')));
|
||||
this.rectSelection.set.add(this.nested.circle(this.options.radius).center(bbox.width, bbox.height / 2).attr('class', this.options.classPoints + '_r').on(mname, getMoseDownFunc('r')).on(ename, getMoseDownFunc('r')));
|
||||
this.rectSelection.set.add(this.nested.circle(this.options.radius).center(bbox.width / 2, bbox.height).attr('class', this.options.classPoints + '_b').on(mname, getMoseDownFunc('b')).on(ename, getMoseDownFunc('b')));
|
||||
this.rectSelection.set.add(this.nested.circle(this.options.radius).center(0, bbox.height / 2).attr('class', this.options.classPoints + '_l').on(mname, getMoseDownFunc('l')).on(ename, getMoseDownFunc('l')));
|
||||
|
||||
this.rectSelection.set.each(function () {
|
||||
this.addClass(_this.options.classPoints);
|
||||
});
|
||||
}
|
||||
|
||||
// draw rotationPint, if enabled
|
||||
if (this.options.rotationPoint && ((this.options.points && !this.rectSelection.set.get(9)) || (!this.options.points && !this.rectSelection.set.get(1)))) {
|
||||
|
||||
var curriedEvent = function (ev) {
|
||||
ev = ev || window.event;
|
||||
ev.preventDefault ? ev.preventDefault() : ev.returnValue = false;
|
||||
ev.stopPropagation();
|
||||
|
||||
var x = ev.pageX || ev.touches[0].pageX;
|
||||
var y = ev.pageY || ev.touches[0].pageY;
|
||||
_this.el.fire('rot', {x: x, y: y, event: ev});
|
||||
};
|
||||
this.rectSelection.set.add(this.nested.circle(this.options.radius).center(bbox.width / 2, 20).attr('class', this.options.classPoints + '_rot')
|
||||
.on("touchstart", curriedEvent).on("mousedown", curriedEvent));
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
SelectHandler.prototype.handler = function () {
|
||||
|
||||
var bbox = this.el.bbox();
|
||||
this.nested.matrix(new SVG.Matrix(this.el).translate(bbox.x, bbox.y));
|
||||
|
||||
if (this.rectSelection.isSelected) {
|
||||
this.updateRectSelection();
|
||||
}
|
||||
|
||||
if (this.pointSelection.isSelected) {
|
||||
this.updatePointSelection();
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
SelectHandler.prototype.observe = function () {
|
||||
var _this = this;
|
||||
|
||||
if (MutationObserver) {
|
||||
if (this.rectSelection.isSelected || this.pointSelection.isSelected) {
|
||||
this.observerInst = this.observerInst || new MutationObserver(function () {
|
||||
_this.handler();
|
||||
});
|
||||
this.observerInst.observe(this.el.node, {attributes: true});
|
||||
} else {
|
||||
try {
|
||||
this.observerInst.disconnect();
|
||||
delete this.observerInst;
|
||||
} catch (e) {
|
||||
}
|
||||
}
|
||||
} else {
|
||||
this.el.off('DOMAttrModified.select');
|
||||
|
||||
if (this.rectSelection.isSelected || this.pointSelection.isSelected) {
|
||||
this.el.on('DOMAttrModified.select', function () {
|
||||
_this.handler();
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
SelectHandler.prototype.cleanup = function () {
|
||||
|
||||
//var _this = this;
|
||||
|
||||
if (!this.rectSelection.isSelected && this.rectSelection.set) {
|
||||
// stop watching the element, remove the selection
|
||||
this.rectSelection.set.each(function () {
|
||||
this.remove();
|
||||
});
|
||||
|
||||
this.rectSelection.set.clear();
|
||||
delete this.rectSelection.set;
|
||||
}
|
||||
|
||||
if (!this.pointSelection.isSelected && this.pointSelection.set) {
|
||||
// Remove all points, clear the set, stop watching the element
|
||||
this.pointSelection.set.each(function () {
|
||||
this.remove();
|
||||
});
|
||||
|
||||
this.pointSelection.set.clear();
|
||||
delete this.pointSelection.set;
|
||||
}
|
||||
|
||||
if (!this.pointSelection.isSelected && !this.rectSelection.isSelected) {
|
||||
this.nested.remove();
|
||||
delete this.nested;
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
SVG.extend(SVG.Element, {
|
||||
// Select element with mouse
|
||||
selectize: function (value, options) {
|
||||
|
||||
// Check the parameters and reassign if needed
|
||||
if (typeof value === 'object') {
|
||||
options = value;
|
||||
value = true;
|
||||
}
|
||||
|
||||
var selectHandler = this.remember('_selectHandler') || new SelectHandler(this);
|
||||
|
||||
selectHandler.init(value === undefined ? true : value, options || {});
|
||||
|
||||
return this;
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
SVG.Element.prototype.selectize.defaults = {
|
||||
points: true, // If true, points at the edges are drawn. Needed for resize!
|
||||
classRect: 'svg_select_boundingRect', // Css-class added to the rect
|
||||
classPoints: 'svg_select_points', // Css-class added to the points
|
||||
radius: 7, // radius of the points
|
||||
rotationPoint: true, // If true, rotation point is drawn. Needed for rotation!
|
||||
deepSelect: false // If true, moving of single points is possible (only line, polyline, polyon)
|
||||
};
|
||||
}());
|
||||
+1
@@ -0,0 +1 @@
|
||||
.svg_select_points_lt{cursor:nw-resize}.svg_select_points_rt{cursor:ne-resize}.svg_select_points_rb{cursor:se-resize}.svg_select_points_lb{cursor:sw-resize}.svg_select_points_t{cursor:n-resize}.svg_select_points_r{cursor:e-resize}.svg_select_points_b{cursor:s-resize}.svg_select_points_l{cursor:w-resize}.svg_select_points_rot{stroke-width:1;stroke:#000;fill:#f9ffed}.svg_select_points_point{cursor:move}.svg_select_boundingRect{stroke-width:1;fill:gray;stroke-dasharray:10 10;stroke:#000;stroke-opacity:.8;fill-opacity:.1;pointer-events:none}
|
||||
+1
File diff suppressed because one or more lines are too long
+43
@@ -0,0 +1,43 @@
|
||||
{
|
||||
"name": "svg.select.js",
|
||||
"version": "2.1.2",
|
||||
"description": "An extension of svg.js which allows to select elements with mouse",
|
||||
"keywords": [
|
||||
"svg.js",
|
||||
"select",
|
||||
"mouse"
|
||||
],
|
||||
"bugs": "https://github.com/svgdotjs/svg.select.js/issues",
|
||||
"license": "MIT",
|
||||
"author": "Ulrich-Matthias Schäfer",
|
||||
"contributors": {
|
||||
"name": "Ulrich-Matthias Schäfer"
|
||||
},
|
||||
"homepage": "https://github.com/svgdotjs/svg.select.js",
|
||||
"main": "dist/svg.select.js",
|
||||
"files": [
|
||||
"dist/"
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/svgdotjs/svg.select.js.git"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.8.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"del": "^2.2.2",
|
||||
"gulp": "^3.9.1",
|
||||
"gulp-clean-css": "3.5.0",
|
||||
"gulp-header": "^1.8.8",
|
||||
"gulp-iife": "^0.3.0",
|
||||
"gulp-rename": "^1.2.2",
|
||||
"gulp-standard": "^10.0.0",
|
||||
"gulp-trimlines": "^1.0.1",
|
||||
"gulp-uglify": "^2.1.2",
|
||||
"gulp-wrap-iife": "0.0.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"svg.js": "^2.2.5"
|
||||
}
|
||||
}
|
||||
+49
@@ -0,0 +1,49 @@
|
||||
{
|
||||
"name": "svg.resize.js",
|
||||
"version": "1.4.3",
|
||||
"description": "An extension for svg.js which allows to resize elements which are selected",
|
||||
"keywords": [
|
||||
"svg.js",
|
||||
"resize",
|
||||
"mouse"
|
||||
],
|
||||
"bugs": "https://github.com/svgdotjs/svg.resize.js/issues",
|
||||
"license": "MIT",
|
||||
"author": {
|
||||
"name": "Ulrich-Matthias Schäfer"
|
||||
},
|
||||
"contributors": {
|
||||
"name": "Ulrich-Matthias Schäfer"
|
||||
},
|
||||
"homepage": "https://github.com/svgdotjs/svg.resize.js",
|
||||
"main": "dist/svg.resize.js",
|
||||
"files": [
|
||||
"dist/"
|
||||
],
|
||||
"scripts": {
|
||||
"build": "gulp"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/svgdotjs/svg.resize.js.git"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.8.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"del": "^2.2.2",
|
||||
"gulp": "^3.9.1",
|
||||
"gulp-header": "^1.8.12",
|
||||
"gulp-iife": "^0.3.0",
|
||||
"gulp-rename": "^1.3.0",
|
||||
"gulp-standard": "^10.1.2",
|
||||
"gulp-trimlines": "^1.0.1",
|
||||
"gulp-uglify": "^2.1.2",
|
||||
"gulp-wrap-iife": "0.0.1",
|
||||
"natives": "1.1.3"
|
||||
},
|
||||
"dependencies": {
|
||||
"svg.js": "^2.6.5",
|
||||
"svg.select.js": "^2.1.2"
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user