# HG changeset patch # User Harris Baptiste # Date 1466521422 -7200 # Node ID bd81bdca63360c3b19f6a5e0a168c0caf6704847 # Parent 713882b2bbb40e751df38180116c8189bde7735f new shape resizer diff -r 713882b2bbb4 -r bd81bdca6336 src/iconolab/static/iconolab/js/components/cutout/index.js --- a/src/iconolab/static/iconolab/js/components/cutout/index.js Mon Jun 20 15:05:23 2016 +0200 +++ b/src/iconolab/static/iconolab/js/components/cutout/index.js Tue Jun 21 17:03:42 2016 +0200 @@ -1,6 +1,7 @@ var Snap = require('snapsvg'); ShapeResizer = require("./shape-resizer"); +eventEmitter = require("event-emitter")({}); /* custom plugin */ Snap.plugin(function (Snap, Element, Paper, glob) { @@ -62,7 +63,6 @@ rectZone = paper.rect(bbBox.x, bbBox.y, bbBox.width, bbBox.height); rectZone.attr({fill: FILL_COLOR, stroke: STROKE_COLOR, opacity: 0.6}); drawing_path = rectZone; - drawing_path.drag(); canDraw = false; pathIsClosed = true; ShapeResizer.apply_resize(paper, drawing_path); @@ -178,7 +178,6 @@ }; var onMoveHandler = function (dx, dy, posX, posY, e) { - console.log("in onMoveHandler..."); isDragged = true; /* update point then update the view */ var transformValue = this.data('origTransform') + (this.data('origTransform') ? "T" : "t") + [dx, dy]; @@ -316,14 +315,12 @@ paper.mouseup(function () { if ((drawingMode === FREE_MODE) || pathIsClosed || !rectZone) { return false; } - rectZone.drag(); drawing_path = rectZone; ShapeResizer.apply_resize(paper, rectZone); canDraw = false; pathIsClosed = true; }); }; - var attachPointEvents = function (paper) { if (readOnly) { return; } paper.click( function(e) { @@ -341,7 +338,6 @@ setPath: function (pathString) { /* redraw the path */ var pathInfos = pathString.split(';'); - console.log(pathInfos); if( availableModes.indexOf(pathInfos[1]) === -1) { /* We assume then it is a free path */ pathInfos[1] = "FREE"; @@ -382,7 +378,6 @@ if (availableModes.indexOf(mode) !== -1) { drawingMode = mode; } - console.log(onChangeCallback); if (typeof onChangeCallback === "function") { onChangeCallback(drawingMode); } @@ -400,17 +395,9 @@ /*clear path is exists*/ if (drawing_path) { - - console.log(drawingMode); - if (drawingMode === RECT_MODE) { - alert("radical ... "); - console.log("radical ... "); - console.log(drawing_path.getBBox().path.toString()); - } - //drawing_path.getBBox().path.toString() drawing_path.remove(); } - + eventEmitter.emit("cutout:clear"); pointData = []; startPoint = null; drawing_path = null; @@ -466,7 +453,6 @@ if (typeof config.onDrawingModeChange === 'function') { onChangeCallback = config.onDrawingModeChange; } - console.log(config); onChangeCallback if (!cutCanvas.length) { diff -r 713882b2bbb4 -r bd81bdca6336 src/iconolab/static/iconolab/js/components/cutout/shape-resizer.js --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/src/iconolab/static/iconolab/js/components/cutout/shape-resizer.js Tue Jun 21 17:03:42 2016 +0200 @@ -0,0 +1,128 @@ +/* Enabling us to resize a shape width a handler + #http://stackoverflow.com/questions/32390028/how-to-drag-and-resize-svg-rectangle-using-cursor-types +*/ +eventEmitter = require("event-emitter")({}); + +var ShapeResizer = function (paper, shape) { + this.paper = paper; + this.shape = shape; + this.handlers = []; + this.isResizing = false; + this.currentPosition = {}; + this.HANDLER_SIZE = 8; + this.SHAPE_MIN_SIZE = 20; + this.states = {}; + this.noop = function (){} + this.init(); +} + +var api = ShapeResizer.prototype = { + + init: function () { + this.showHandlers(); + }, + + showHandlers: function () { + /* show handler here */ + var bbox = this.shape.getBBox(); + var handleX = bbox.x - this.HANDLER_SIZE/2; + var handleY = bbox.y - this.HANDLER_SIZE/2; + handler = this.paper.rect(handleX, handleY, this.HANDLER_SIZE, this.HANDLER_SIZE).attr({fill: 'red'}); + var handlerInfos = {position: "t_r", handler: handler}; + this.handlers.push(handlerInfos); + this.shapesGroup = this.paper.g(this.shape, handler); + this.attachEvents(); + }, + + /*one handlers */ + updateShapePositions: function (handlerData, dx, dy) { + //start + var handlerBBox = handlerData.handler.getBBox(); + var shapeBBox = this.shape.data("origBbox"); + var newX = handlerBBox.x + this.HANDLER_SIZE / 2; + var newY = handlerBBox.y + this.HANDLER_SIZE / 2; + + /*to the right => reduce the size */ + var newWidth = (dx > 0) ? shapeBBox.width - dx : shapeBBox.width + Math.abs(dx); + var newHeight = (dy > 0) ? shapeBBox.height - dy : shapeBBox.height + Math.abs(dy); + var transformValue = this.shape.data('origTransform') + (this.shape.data('origTransform') ? "T" : "t") + [dx, dy]; + this.shape.attr({'transform': transformValue, width: newWidth, height: newHeight}); + }, + + dragEvents: { + onStart: function (handlerData, dx, dy, e) { + this.startPosition = {x: e.clientX, y: e.clientY}; + this.isResizing = true; + this.currentPosition = {}; + handlerData.handler.data("origTransform", handlerData.handler.transform().local); + this.shape.data("origBbox", this.shape.getBBox()); + this.shape.data("origTransform", this.shape.transform().local); + }, + + onMove: function (handlerData, dx, dy, x, y, e) { + var transformValue = handlerData.handler.data('origTransform') + (handlerData.handler.data('origTransform') ? "T" : "t") + [dx, dy]; + this.currentPosition.x = e.clientX; + this.currentPosition.y = e.clientY; + /* deal with boundaries */ + if (! this.checkBondaries(dx, dy)) { return; } + handlerData.handler.attr({ transform: transformValue}); + this.updateShapePositions(handlerData, dx, dy); + }, + + onStop: function () { + this.isResizing = false; + this.startPosition = {}; + this.currentPosition = {}; + } + }, + + checkBondaries: function (dx, dy) { + var result = true; + + if (this.shape.data("origBbox").width - dx <= this.SHAPE_MIN_SIZE) { + result = false; + } + + if (this.shape.data("origBbox").height - dy <= this.SHAPE_MIN_SIZE) { + result = false; + } + + return result; + }, + + destroy: function () { + this.handlers.map(function (handlerData) { + handlerData.handler.remove(); + }); + delete this; + }, + + attachEvents: function () { + var self = this; + this.handlers.map(function (handlerData) { + handlerData.handler.drag( + self.dragEvents.onMove.bind(self, handlerData), + self.dragEvents.onStart.bind(self, handlerData), + self.dragEvents.onStop.bind(self, handlerData)); + }); + + eventEmitter.on("cutout:clear", function () { + self.destroy(); + }); + + this.shapesGroup.drag(function (dx, dy) { + if (self.isResizing) { return; } + var transformValue = this.data('origTransform') + (this.data('origTransform') ? "T" : "t") + [dx, dy]; + this.transform(transformValue); + }, function () { + this.data('origTransform', this.transform().local); + }, this.noop); + }, +} + +module.exports = { + + apply_resize : function (paper, rect) { + new ShapeResizer(paper, rect); + } +} \ No newline at end of file diff -r 713882b2bbb4 -r bd81bdca6336 src/iconolab/static/iconolab/js/dist/bundle.js --- a/src/iconolab/static/iconolab/js/dist/bundle.js Mon Jun 20 15:05:23 2016 +0200 +++ b/src/iconolab/static/iconolab/js/dist/bundle.js Tue Jun 21 17:03:42 2016 +0200 @@ -47,10 +47,10 @@ var cutout = __webpack_require__(1); /* expose jQuery */ - var test = __webpack_require__(3); + var test = __webpack_require__(19); /* expose Vue */ - __webpack_require__(5); + __webpack_require__(21); var api = { initCutoutComponent: function (config) { @@ -59,10 +59,7 @@ }; module.exports = api; - - iconolab = api; - - console.log(test); + iconolab = api; /***/ }, /* 1 */ @@ -70,7 +67,8 @@ var Snap = __webpack_require__(2); - ShapeResizer = __webpack_require__(10); + ShapeResizer = __webpack_require__(3); + eventEmitter = __webpack_require__(4)({}); /* custom plugin */ Snap.plugin(function (Snap, Element, Paper, glob) { @@ -132,7 +130,6 @@ rectZone = paper.rect(bbBox.x, bbBox.y, bbBox.width, bbBox.height); rectZone.attr({fill: FILL_COLOR, stroke: STROKE_COLOR, opacity: 0.6}); drawing_path = rectZone; - drawing_path.drag(); canDraw = false; pathIsClosed = true; ShapeResizer.apply_resize(paper, drawing_path); @@ -248,7 +245,6 @@ }; var onMoveHandler = function (dx, dy, posX, posY, e) { - console.log("in onMoveHandler..."); isDragged = true; /* update point then update the view */ var transformValue = this.data('origTransform') + (this.data('origTransform') ? "T" : "t") + [dx, dy]; @@ -386,14 +382,12 @@ paper.mouseup(function () { if ((drawingMode === FREE_MODE) || pathIsClosed || !rectZone) { return false; } - rectZone.drag(); drawing_path = rectZone; ShapeResizer.apply_resize(paper, rectZone); canDraw = false; pathIsClosed = true; }); }; - var attachPointEvents = function (paper) { if (readOnly) { return; } paper.click( function(e) { @@ -411,7 +405,6 @@ setPath: function (pathString) { /* redraw the path */ var pathInfos = pathString.split(';'); - console.log(pathInfos); if( availableModes.indexOf(pathInfos[1]) === -1) { /* We assume then it is a free path */ pathInfos[1] = "FREE"; @@ -452,7 +445,6 @@ if (availableModes.indexOf(mode) !== -1) { drawingMode = mode; } - console.log(onChangeCallback); if (typeof onChangeCallback === "function") { onChangeCallback(drawingMode); } @@ -470,17 +462,9 @@ /*clear path is exists*/ if (drawing_path) { - - console.log(drawingMode); - if (drawingMode === RECT_MODE) { - alert("radical ... "); - console.log("radical ... "); - console.log(drawing_path.getBBox().path.toString()); - } - //drawing_path.getBBox().path.toString() drawing_path.remove(); } - + eventEmitter.emit("cutout:clear"); pointData = []; startPoint = null; drawing_path = null; @@ -536,7 +520,6 @@ if (typeof config.onDrawingModeChange === 'function') { onChangeCallback = config.onDrawingModeChange; } - console.log(config); onChangeCallback if (!cutCanvas.length) { @@ -8762,11 +8745,539 @@ /* 3 */ /***/ function(module, exports, __webpack_require__) { - /* WEBPACK VAR INJECTION */(function(global) {module.exports = global["jQuery"] = __webpack_require__(4); + /* Enabling us to resize a shape width a handler + #http://stackoverflow.com/questions/32390028/how-to-drag-and-resize-svg-rectangle-using-cursor-types + */ + eventEmitter = __webpack_require__(4)({}); + + var ShapeResizer = function (paper, shape) { + this.paper = paper; + this.shape = shape; + this.handlers = []; + this.isResizing = false; + this.currentPosition = {}; + this.HANDLER_SIZE = 8; + this.SHAPE_MIN_SIZE = 20; + this.states = {}; + this.noop = function (){} + this.init(); + } + + var api = ShapeResizer.prototype = { + + init: function () { + this.showHandlers(); + }, + + showHandlers: function () { + /* show handler here */ + var bbox = this.shape.getBBox(); + var handleX = bbox.x - this.HANDLER_SIZE/2; + var handleY = bbox.y - this.HANDLER_SIZE/2; + handler = this.paper.rect(handleX, handleY, this.HANDLER_SIZE, this.HANDLER_SIZE).attr({fill: 'red'}); + var handlerInfos = {position: "t_r", handler: handler}; + this.handlers.push(handlerInfos); + this.shapesGroup = this.paper.g(this.shape, handler); + this.attachEvents(); + }, + + /*one handlers */ + updateShapePositions: function (handlerData, dx, dy) { + //start + var handlerBBox = handlerData.handler.getBBox(); + var shapeBBox = this.shape.data("origBbox"); + var newX = handlerBBox.x + this.HANDLER_SIZE / 2; + var newY = handlerBBox.y + this.HANDLER_SIZE / 2; + + /*to the right => reduce the size */ + var newWidth = (dx > 0) ? shapeBBox.width - dx : shapeBBox.width + Math.abs(dx); + var newHeight = (dy > 0) ? shapeBBox.height - dy : shapeBBox.height + Math.abs(dy); + var transformValue = this.shape.data('origTransform') + (this.shape.data('origTransform') ? "T" : "t") + [dx, dy]; + this.shape.attr({'transform': transformValue, width: newWidth, height: newHeight}); + }, + + dragEvents: { + onStart: function (handlerData, dx, dy, e) { + this.startPosition = {x: e.clientX, y: e.clientY}; + this.isResizing = true; + this.currentPosition = {}; + handlerData.handler.data("origTransform", handlerData.handler.transform().local); + this.shape.data("origBbox", this.shape.getBBox()); + this.shape.data("origTransform", this.shape.transform().local); + }, + + onMove: function (handlerData, dx, dy, x, y, e) { + var transformValue = handlerData.handler.data('origTransform') + (handlerData.handler.data('origTransform') ? "T" : "t") + [dx, dy]; + this.currentPosition.x = e.clientX; + this.currentPosition.y = e.clientY; + /* deal with boundaries */ + if (! this.checkBondaries(dx, dy)) { return; } + handlerData.handler.attr({ transform: transformValue}); + this.updateShapePositions(handlerData, dx, dy); + }, + + onStop: function () { + this.isResizing = false; + this.startPosition = {}; + this.currentPosition = {}; + } + }, + + checkBondaries: function (dx, dy) { + var result = true; + + if (this.shape.data("origBbox").width - dx <= this.SHAPE_MIN_SIZE) { + result = false; + } + + if (this.shape.data("origBbox").height - dy <= this.SHAPE_MIN_SIZE) { + result = false; + } + + return result; + }, + + destroy: function () { + this.handlers.map(function (handlerData) { + handlerData.handler.remove(); + }); + delete this; + }, + + attachEvents: function () { + var self = this; + this.handlers.map(function (handlerData) { + handlerData.handler.drag( + self.dragEvents.onMove.bind(self, handlerData), + self.dragEvents.onStart.bind(self, handlerData), + self.dragEvents.onStop.bind(self, handlerData)); + }); + + eventEmitter.on("cutout:clear", function () { + self.destroy(); + }); + + this.shapesGroup.drag(function (dx, dy) { + if (self.isResizing) { return; } + var transformValue = this.data('origTransform') + (this.data('origTransform') ? "T" : "t") + [dx, dy]; + this.transform(transformValue); + }, function () { + this.data('origTransform', this.transform().local); + }, this.noop); + }, + } + + module.exports = { + + apply_resize : function (paper, rect) { + new ShapeResizer(paper, rect); + } + } + +/***/ }, +/* 4 */ +/***/ function(module, exports, __webpack_require__) { + + 'use strict'; + + var d = __webpack_require__(5) + , callable = __webpack_require__(18) + + , apply = Function.prototype.apply, call = Function.prototype.call + , create = Object.create, defineProperty = Object.defineProperty + , defineProperties = Object.defineProperties + , hasOwnProperty = Object.prototype.hasOwnProperty + , descriptor = { configurable: true, enumerable: false, writable: true } + + , on, once, off, emit, methods, descriptors, base; + + on = function (type, listener) { + var data; + + callable(listener); + + if (!hasOwnProperty.call(this, '__ee__')) { + data = descriptor.value = create(null); + defineProperty(this, '__ee__', descriptor); + descriptor.value = null; + } else { + data = this.__ee__; + } + if (!data[type]) data[type] = listener; + else if (typeof data[type] === 'object') data[type].push(listener); + else data[type] = [data[type], listener]; + + return this; + }; + + once = function (type, listener) { + var once, self; + + callable(listener); + self = this; + on.call(this, type, once = function () { + off.call(self, type, once); + apply.call(listener, this, arguments); + }); + + once.__eeOnceListener__ = listener; + return this; + }; + + off = function (type, listener) { + var data, listeners, candidate, i; + + callable(listener); + + if (!hasOwnProperty.call(this, '__ee__')) return this; + data = this.__ee__; + if (!data[type]) return this; + listeners = data[type]; + + if (typeof listeners === 'object') { + for (i = 0; (candidate = listeners[i]); ++i) { + if ((candidate === listener) || + (candidate.__eeOnceListener__ === listener)) { + if (listeners.length === 2) data[type] = listeners[i ? 0 : 1]; + else listeners.splice(i, 1); + } + } + } else { + if ((listeners === listener) || + (listeners.__eeOnceListener__ === listener)) { + delete data[type]; + } + } + + return this; + }; + + emit = function (type) { + var i, l, listener, listeners, args; + + if (!hasOwnProperty.call(this, '__ee__')) return; + listeners = this.__ee__[type]; + if (!listeners) return; + + if (typeof listeners === 'object') { + l = arguments.length; + args = new Array(l - 1); + for (i = 1; i < l; ++i) args[i - 1] = arguments[i]; + + listeners = listeners.slice(); + for (i = 0; (listener = listeners[i]); ++i) { + apply.call(listener, this, args); + } + } else { + switch (arguments.length) { + case 1: + call.call(listeners, this); + break; + case 2: + call.call(listeners, this, arguments[1]); + break; + case 3: + call.call(listeners, this, arguments[1], arguments[2]); + break; + default: + l = arguments.length; + args = new Array(l - 1); + for (i = 1; i < l; ++i) { + args[i - 1] = arguments[i]; + } + apply.call(listeners, this, args); + } + } + }; + + methods = { + on: on, + once: once, + off: off, + emit: emit + }; + + descriptors = { + on: d(on), + once: d(once), + off: d(off), + emit: d(emit) + }; + + base = defineProperties({}, descriptors); + + module.exports = exports = function (o) { + return (o == null) ? create(base) : defineProperties(Object(o), descriptors); + }; + exports.methods = methods; + + +/***/ }, +/* 5 */ +/***/ function(module, exports, __webpack_require__) { + + 'use strict'; + + var assign = __webpack_require__(6) + , normalizeOpts = __webpack_require__(13) + , isCallable = __webpack_require__(14) + , contains = __webpack_require__(15) + + , d; + + d = module.exports = function (dscr, value/*, options*/) { + var c, e, w, options, desc; + if ((arguments.length < 2) || (typeof dscr !== 'string')) { + options = value; + value = dscr; + dscr = null; + } else { + options = arguments[2]; + } + if (dscr == null) { + c = w = true; + e = false; + } else { + c = contains.call(dscr, 'c'); + e = contains.call(dscr, 'e'); + w = contains.call(dscr, 'w'); + } + + desc = { value: value, configurable: c, enumerable: e, writable: w }; + return !options ? desc : assign(normalizeOpts(options), desc); + }; + + d.gs = function (dscr, get, set/*, options*/) { + var c, e, options, desc; + if (typeof dscr !== 'string') { + options = set; + set = get; + get = dscr; + dscr = null; + } else { + options = arguments[3]; + } + if (get == null) { + get = undefined; + } else if (!isCallable(get)) { + options = get; + get = set = undefined; + } else if (set == null) { + set = undefined; + } else if (!isCallable(set)) { + options = set; + set = undefined; + } + if (dscr == null) { + c = true; + e = false; + } else { + c = contains.call(dscr, 'c'); + e = contains.call(dscr, 'e'); + } + + desc = { get: get, set: set, configurable: c, enumerable: e }; + return !options ? desc : assign(normalizeOpts(options), desc); + }; + + +/***/ }, +/* 6 */ +/***/ function(module, exports, __webpack_require__) { + + 'use strict'; + + module.exports = __webpack_require__(7)() + ? Object.assign + : __webpack_require__(8); + + +/***/ }, +/* 7 */ +/***/ function(module, exports) { + + 'use strict'; + + module.exports = function () { + var assign = Object.assign, obj; + if (typeof assign !== 'function') return false; + obj = { foo: 'raz' }; + assign(obj, { bar: 'dwa' }, { trzy: 'trzy' }); + return (obj.foo + obj.bar + obj.trzy) === 'razdwatrzy'; + }; + + +/***/ }, +/* 8 */ +/***/ function(module, exports, __webpack_require__) { + + 'use strict'; + + var keys = __webpack_require__(9) + , value = __webpack_require__(12) + + , max = Math.max; + + module.exports = function (dest, src/*, …srcn*/) { + var error, i, l = max(arguments.length, 2), assign; + dest = Object(value(dest)); + assign = function (key) { + try { dest[key] = src[key]; } catch (e) { + if (!error) error = e; + } + }; + for (i = 1; i < l; ++i) { + src = arguments[i]; + keys(src).forEach(assign); + } + if (error !== undefined) throw error; + return dest; + }; + + +/***/ }, +/* 9 */ +/***/ function(module, exports, __webpack_require__) { + + 'use strict'; + + module.exports = __webpack_require__(10)() + ? Object.keys + : __webpack_require__(11); + + +/***/ }, +/* 10 */ +/***/ function(module, exports) { + + 'use strict'; + + module.exports = function () { + try { + Object.keys('primitive'); + return true; + } catch (e) { return false; } + }; + + +/***/ }, +/* 11 */ +/***/ function(module, exports) { + + 'use strict'; + + var keys = Object.keys; + + module.exports = function (object) { + return keys(object == null ? object : Object(object)); + }; + + +/***/ }, +/* 12 */ +/***/ function(module, exports) { + + 'use strict'; + + module.exports = function (value) { + if (value == null) throw new TypeError("Cannot use null or undefined"); + return value; + }; + + +/***/ }, +/* 13 */ +/***/ function(module, exports) { + + 'use strict'; + + var forEach = Array.prototype.forEach, create = Object.create; + + var process = function (src, obj) { + var key; + for (key in src) obj[key] = src[key]; + }; + + module.exports = function (options/*, …options*/) { + var result = create(null); + forEach.call(arguments, function (options) { + if (options == null) return; + process(Object(options), result); + }); + return result; + }; + + +/***/ }, +/* 14 */ +/***/ function(module, exports) { + + // Deprecated + + 'use strict'; + + module.exports = function (obj) { return typeof obj === 'function'; }; + + +/***/ }, +/* 15 */ +/***/ function(module, exports, __webpack_require__) { + + 'use strict'; + + module.exports = __webpack_require__(16)() + ? String.prototype.contains + : __webpack_require__(17); + + +/***/ }, +/* 16 */ +/***/ function(module, exports) { + + 'use strict'; + + var str = 'razdwatrzy'; + + module.exports = function () { + if (typeof str.contains !== 'function') return false; + return ((str.contains('dwa') === true) && (str.contains('foo') === false)); + }; + + +/***/ }, +/* 17 */ +/***/ function(module, exports) { + + 'use strict'; + + var indexOf = String.prototype.indexOf; + + module.exports = function (searchString/*, position*/) { + return indexOf.call(this, searchString, arguments[1]) > -1; + }; + + +/***/ }, +/* 18 */ +/***/ function(module, exports) { + + 'use strict'; + + module.exports = function (fn) { + if (typeof fn !== 'function') throw new TypeError(fn + " is not a function"); + return fn; + }; + + +/***/ }, +/* 19 */ +/***/ function(module, exports, __webpack_require__) { + + /* WEBPACK VAR INJECTION */(function(global) {module.exports = global["jQuery"] = __webpack_require__(20); /* WEBPACK VAR INJECTION */}.call(exports, (function() { return this; }()))) /***/ }, -/* 4 */ +/* 20 */ /***/ function(module, exports, __webpack_require__) { var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/*! @@ -18586,14 +19097,14 @@ /***/ }, -/* 5 */ +/* 21 */ /***/ function(module, exports, __webpack_require__) { - /* WEBPACK VAR INJECTION */(function(global) {module.exports = global["Vue"] = __webpack_require__(6); + /* WEBPACK VAR INJECTION */(function(global) {module.exports = global["Vue"] = __webpack_require__(22); /* WEBPACK VAR INJECTION */}.call(exports, (function() { return this; }()))) /***/ }, -/* 6 */ +/* 22 */ /***/ function(module, exports, __webpack_require__) { /* WEBPACK VAR INJECTION */(function(global, process) {/*! @@ -28626,10 +29137,10 @@ }, 0); module.exports = Vue; - /* WEBPACK VAR INJECTION */}.call(exports, (function() { return this; }()), __webpack_require__(7))) + /* WEBPACK VAR INJECTION */}.call(exports, (function() { return this; }()), __webpack_require__(23))) /***/ }, -/* 7 */ +/* 23 */ /***/ function(module, exports) { // shim for using process in browser @@ -28733,89 +29244,5 @@ process.umask = function() { return 0; }; -/***/ }, -/* 8 */, -/* 9 */, -/* 10 */ -/***/ function(module, exports) { - - /* Enabling us to resize a shape width a handler - #http://stackoverflow.com/questions/32390028/how-to-drag-and-resize-svg-rectangle-using-cursor-types - */ - - - var ShapeResizer = function (paper, shape) { - this.paper = paper; - this.shape = shape; - this.handlers = []; - - this.HANDLER_SIZE = 6; - this.states = {}; - this.init(); - } - - var api = ShapeResizer.prototype = { - - init: function () { - this.showHandlers(); - }, - - showHandlers: function () { - /* show handler here */ - var bbox = this.shape.getBBox(); - var handleX = bbox.x - this.HANDLER_SIZE/2; - var handleY = bbox.y - this.HANDLER_SIZE/2; - handler = this.paper.rect(handleX, handleY, this.HANDLER_SIZE, this.HANDLER_SIZE).attr({fill: 'red'}); - var handlerInfos = {position: "t_r", handler: handler}; - this.handlers.push(handlerInfos); - this.attachHandlerEvents(); - }, - - /*one handlers */ - updateShapePositions: function () { - - }, - - dragEvents: { - onStart: function (handlerData, dx, dy, posX, posY, e) { - console.log(e); - this.startPosition = {x: e.offsetX, y: e.offsetY}; - this.currentPosition = {}; - handlerData.handler.data("origTransform", handlerData.handler.transform().local); - - }, - - onMove: function (handlerData, dx, dy, e) { - this.currentPosition.x = e.offsetX; - this.currentPosition.y = e.offsetY; - console.log(this.currentPosition); - console.log("arguments", arguments); - - }, - - onStop: function () { - this.startPosition = {}; - this.currentPosition = {}; - } - }, - - attachHandlerEvents: function () { - var self = this; - this.handlers.map(function (handlerData) { - handlerData.handler.drag( - self.dragEvents.onStart.bind(self, handlerData), - self.dragEvents.onMove.bind(self, handlerData), - self.dragEvents.onStop.bind(self, handlerData)); - }); - }, - } - - module.exports = { - - apply_resize : function (paper, rect) { - new ShapeResizer(paper, rect); - } - } - /***/ } /******/ ]); \ No newline at end of file diff -r 713882b2bbb4 -r bd81bdca6336 src/iconolab/static/iconolab/js/main.js --- a/src/iconolab/static/iconolab/js/main.js Mon Jun 20 15:05:23 2016 +0200 +++ b/src/iconolab/static/iconolab/js/main.js Tue Jun 21 17:03:42 2016 +0200 @@ -13,7 +13,4 @@ }; module.exports = api; - -iconolab = api; - -console.log(test); \ No newline at end of file +iconolab = api; \ No newline at end of file diff -r 713882b2bbb4 -r bd81bdca6336 src/iconolab/static/iconolab/js/package.json --- a/src/iconolab/static/iconolab/js/package.json Mon Jun 20 15:05:23 2016 +0200 +++ b/src/iconolab/static/iconolab/js/package.json Tue Jun 21 17:03:42 2016 +0200 @@ -18,6 +18,7 @@ "dependencies": { "bootstrap": "^3.3.6", "css-loader": "^0.23.1", + "event-emitter": "^0.3.4", "expose-loader": "^0.7.1", "font-awesome": "^4.6.3", "html-loader": "^0.4.3",