--- /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:15:54 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
--- a/src/iconolab/static/iconolab/js/dist/bundle.js Tue Jun 21 15:40:54 2016 +0200
+++ b/src/iconolab/static/iconolab/js/dist/bundle.js Tue Jun 21 17:15:54 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