Upgraded svg.js library to version 3
This commit is contained in:
parent
d8a1b66738
commit
fb7f43ed23
17 changed files with 7968 additions and 5917 deletions
346
hal-core/resources/web/js/lib/svg.draggable.js
vendored
346
hal-core/resources/web/js/lib/svg.draggable.js
vendored
|
|
@ -1,221 +1,177 @@
|
|||
/*! svg.draggable.js - v2.2.0 - 2016-05-21
|
||||
* https://github.com/wout/svg.draggable.js
|
||||
* Copyright (c) 2016 Wout Fierens; Licensed MIT */
|
||||
;(function() {
|
||||
/*!
|
||||
* @svgdotjs/svg.draggable.js - An extension for svg.js which allows to drag elements with your mouse
|
||||
* @version 3.0.2
|
||||
* https://github.com/svgdotjs/svg.draggable.js
|
||||
*
|
||||
* @copyright Wout Fierens
|
||||
* @license MIT
|
||||
*
|
||||
* BUILT: Tue Feb 19 2019 17:12:16 GMT+0100 (GMT+01:00)
|
||||
*/;
|
||||
(function (svg_js) {
|
||||
'use strict';
|
||||
|
||||
// creates handler, saves it
|
||||
function DragHandler(el){
|
||||
el.remember('_draggable', this)
|
||||
this.el = el
|
||||
function _classCallCheck(instance, Constructor) {
|
||||
if (!(instance instanceof Constructor)) {
|
||||
throw new TypeError("Cannot call a class as a function");
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 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) })
|
||||
function _defineProperties(target, props) {
|
||||
for (var i = 0; i < props.length; i++) {
|
||||
var descriptor = props[i];
|
||||
descriptor.enumerable = descriptor.enumerable || false;
|
||||
descriptor.configurable = true;
|
||||
if ("value" in descriptor) descriptor.writable = true;
|
||||
Object.defineProperty(target, descriptor.key, descriptor);
|
||||
}
|
||||
}
|
||||
|
||||
// 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.pageX - (offset || 0)
|
||||
this.p.y = touches.pageY
|
||||
return this.p.matrixTransform(this.m)
|
||||
function _createClass(Constructor, protoProps, staticProps) {
|
||||
if (protoProps) _defineProperties(Constructor.prototype, protoProps);
|
||||
if (staticProps) _defineProperties(Constructor, staticProps);
|
||||
return Constructor;
|
||||
}
|
||||
|
||||
// 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()
|
||||
var getCoordsFromEvent = function getCoordsFromEvent(ev) {
|
||||
if (ev.changedTouches) {
|
||||
ev = ev.changedTouches[0];
|
||||
}
|
||||
|
||||
return box
|
||||
}
|
||||
return {
|
||||
x: ev.clientX,
|
||||
y: ev.clientY
|
||||
};
|
||||
}; // Creates handler, saves it
|
||||
|
||||
// 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
|
||||
var DragHandler =
|
||||
/*#__PURE__*/
|
||||
function () {
|
||||
function DragHandler(el) {
|
||||
_classCallCheck(this, DragHandler);
|
||||
|
||||
// fire beforedrag event
|
||||
this.el.fire('beforedrag', { event: e, handler: this })
|
||||
el.remember('_draggable', this);
|
||||
this.el = el;
|
||||
this.drag = this.drag.bind(this);
|
||||
this.startDrag = this.startDrag.bind(this);
|
||||
this.endDrag = this.endDrag.bind(this);
|
||||
} // Enables or disabled drag based on input
|
||||
|
||||
// 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
|
||||
}
|
||||
|
||||
// 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})
|
||||
|
||||
// prevent browser drag behavior
|
||||
e.preventDefault()
|
||||
|
||||
// prevent propagation to a parent that might also have dragging enabled
|
||||
e.stopPropagation();
|
||||
}
|
||||
|
||||
// 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
|
||||
|
||||
var event = new CustomEvent('dragmove', {
|
||||
detail: {
|
||||
event: e
|
||||
, p: p
|
||||
, m: this.m
|
||||
, handler: this
|
||||
_createClass(DragHandler, [{
|
||||
key: "init",
|
||||
value: function init(enabled) {
|
||||
if (enabled) {
|
||||
this.el.on('mousedown.drag', this.startDrag);
|
||||
this.el.on('touchstart.drag', this.startDrag);
|
||||
} else {
|
||||
this.el.off('mousedown.drag');
|
||||
this.el.off('touchstart.drag');
|
||||
}
|
||||
, cancelable: true
|
||||
})
|
||||
|
||||
this.el.fire(event)
|
||||
|
||||
if(event.defaultPrevented) return p
|
||||
} // Start dragging
|
||||
|
||||
// move the element to its new position, if possible by constraint
|
||||
if (typeof c == 'function') {
|
||||
}, {
|
||||
key: "startDrag",
|
||||
value: function startDrag(ev) {
|
||||
var isMouse = !ev.type.indexOf('mouse'); // Check for left button
|
||||
|
||||
var coord = c.call(this.el, x, y, this.m)
|
||||
if (isMouse && (ev.which || ev.buttons) !== 1) {
|
||||
return;
|
||||
} // Fire beforedrag event
|
||||
|
||||
// bool, just show us if movement is allowed or not
|
||||
if (typeof coord == 'boolean') {
|
||||
coord = {
|
||||
x: coord,
|
||||
y: coord
|
||||
|
||||
if (this.el.dispatch('beforedrag', {
|
||||
event: ev,
|
||||
handler: this
|
||||
}).defaultPrevented) {
|
||||
return;
|
||||
} // Prevent browser drag behavior as soon as possible
|
||||
|
||||
|
||||
ev.preventDefault(); // Prevent propagation to a parent that might also have dragging enabled
|
||||
|
||||
ev.stopPropagation(); // Make sure that start events are unbound so that one element
|
||||
// is only dragged by one input only
|
||||
|
||||
this.init(false);
|
||||
this.box = this.el.bbox();
|
||||
this.lastClick = this.el.point(getCoordsFromEvent(ev)); // We consider the drag done, when a touch is canceled, too
|
||||
|
||||
var eventMove = (isMouse ? 'mousemove' : 'touchmove') + '.drag';
|
||||
var eventEnd = (isMouse ? 'mouseup' : 'touchcancel.drag touchend') + '.drag'; // Bind drag and end events to window
|
||||
|
||||
svg_js.on(window, eventMove, this.drag);
|
||||
svg_js.on(window, eventEnd, this.endDrag); // Fire dragstart event
|
||||
|
||||
this.el.fire('dragstart', {
|
||||
event: ev,
|
||||
handler: this,
|
||||
box: this.box
|
||||
});
|
||||
} // While dragging
|
||||
|
||||
}, {
|
||||
key: "drag",
|
||||
value: function drag(ev) {
|
||||
var box = this.box,
|
||||
lastClick = this.lastClick;
|
||||
var currentClick = this.el.point(getCoordsFromEvent(ev));
|
||||
var x = box.x + (currentClick.x - lastClick.x);
|
||||
var y = box.y + (currentClick.y - lastClick.y);
|
||||
var newBox = new svg_js.Box(x, y, box.w, box.h);
|
||||
if (this.el.dispatch('dragmove', {
|
||||
event: ev,
|
||||
handler: this,
|
||||
box: newBox
|
||||
}).defaultPrevented) return;
|
||||
this.move(x, y);
|
||||
return newBox;
|
||||
}
|
||||
}, {
|
||||
key: "move",
|
||||
value: function move(x, y) {
|
||||
// Svg elements bbox depends on their content even though they have
|
||||
// x, y, width and height - strange!
|
||||
// Thats why we handle them the same as groups
|
||||
if (this.el.type === 'svg') {
|
||||
svg_js.G.prototype.move.call(this.el, x, y);
|
||||
} else {
|
||||
this.el.move(x, y);
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: "endDrag",
|
||||
value: function endDrag(ev) {
|
||||
// final drag
|
||||
var box = this.drag(ev); // fire dragend event
|
||||
|
||||
// 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)
|
||||
this.el.fire('dragend', {
|
||||
event: ev,
|
||||
handler: this,
|
||||
box: box
|
||||
}); // unbind events
|
||||
|
||||
svg_js.off(window, 'mousemove.drag');
|
||||
svg_js.off(window, 'touchmove.drag');
|
||||
svg_js.off(window, 'mouseup.drag');
|
||||
svg_js.off(window, 'touchend.drag'); // Rebind initial Events
|
||||
|
||||
this.init(true);
|
||||
}
|
||||
}]);
|
||||
|
||||
if (coord.y === true) {
|
||||
this.el.y(y)
|
||||
} else if (coord.y !== false) {
|
||||
this.el.y(coord.y)
|
||||
}
|
||||
return DragHandler;
|
||||
}();
|
||||
|
||||
} else if (typeof c == 'object') {
|
||||
|
||||
// keep element within constrained box
|
||||
if (c.minX != null && x < c.minX)
|
||||
x = c.minX
|
||||
else if (c.maxX != null && x > c.maxX - box.width){
|
||||
x = c.maxX - box.width
|
||||
}if (c.minY != null && y < c.minY)
|
||||
y = c.minY
|
||||
else if (c.maxY != null && y > c.maxY - box.height)
|
||||
y = c.maxY - box.height
|
||||
|
||||
this.el.move(x, y)
|
||||
svg_js.extend(svg_js.Element, {
|
||||
draggable: function draggable() {
|
||||
var enable = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
|
||||
var dragHandler = this.remember('_draggable') || new DragHandler(this);
|
||||
dragHandler.init(enable);
|
||||
return this;
|
||||
}
|
||||
|
||||
// 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);
|
||||
}(SVG));
|
||||
//# sourceMappingURL=svg.draggable.js.map
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue