# HG changeset patch # User Harris Baptiste # Date 1466427923 -7200 # Node ID 713882b2bbb40e751df38180116c8189bde7735f # Parent 2c58c2c0d7f69652ff4f9b8c03e9771a0fb62dd7 fix image size for firefox diff -r 2c58c2c0d7f6 -r 713882b2bbb4 src/iconolab/static/iconolab/js/components/cutout/index.js --- a/src/iconolab/static/iconolab/js/components/cutout/index.js Fri Jun 17 19:01:09 2016 +0200 +++ b/src/iconolab/static/iconolab/js/components/cutout/index.js Mon Jun 20 15:05:23 2016 +0200 @@ -1,7 +1,6 @@ var Snap = require('snapsvg'); -resizer = require("./resizer"); -console.log(resizer); +ShapeResizer = require("./shape-resizer"); /* custom plugin */ Snap.plugin(function (Snap, Element, Paper, glob) { @@ -66,7 +65,7 @@ drawing_path.drag(); canDraw = false; pathIsClosed = true; - resizer.apply_resize(paper, drawing_path); + ShapeResizer.apply_resize(paper, drawing_path); }; @@ -319,6 +318,7 @@ if ((drawingMode === FREE_MODE) || pathIsClosed || !rectZone) { return false; } rectZone.drag(); drawing_path = rectZone; + ShapeResizer.apply_resize(paper, rectZone); canDraw = false; pathIsClosed = true; }); @@ -351,8 +351,8 @@ var pathData =pathInfos[0]; /* deal with path nomalization x = ImageWith/MaxXBound*/ - var xRatio = paper.node.clientWidth / viewBoxBounds.X; - var yRatio = paper.node.clientHeight / viewBoxBounds.Y; + var xRatio = mainImage.width() / viewBoxBounds.X; + var yRatio = mainImage.height() / viewBoxBounds.Y; if(isNaN(xRatio) || isNaN(yRatio)) { new Error('Ratio should be a number.'); @@ -433,9 +433,8 @@ } } - var xRatio = viewBoxBounds.X / paper.node.clientWidth; - var yRatio = viewBoxBounds.Y / paper.node.clientHeight; - + var xRatio = viewBoxBounds.X / mainImage.width(); + var yRatio = viewBoxBounds.Y / mainImage.height(); if(isNaN(xRatio) || isNaN(yRatio)) { new Error('ratio should be a number.'); } @@ -460,7 +459,7 @@ init: function(config) { - var mainImage = jQuery(config.wrapperId).find('img').eq(0); + mainImage = jQuery(config.wrapperId).find('img').eq(0); var cutCanvas = jQuery(config.wrapperId).find('.cut-canvas').eq(0); var path = jQuery(config.wrapperId).find('.image-path').eq(0); diff -r 2c58c2c0d7f6 -r 713882b2bbb4 src/iconolab/static/iconolab/js/dist/bundle.js --- a/src/iconolab/static/iconolab/js/dist/bundle.js Fri Jun 17 19:01:09 2016 +0200 +++ b/src/iconolab/static/iconolab/js/dist/bundle.js Mon Jun 20 15:05:23 2016 +0200 @@ -70,8 +70,7 @@ var Snap = __webpack_require__(2); - resizer = __webpack_require__(8); - console.log(resizer); + ShapeResizer = __webpack_require__(10); /* custom plugin */ Snap.plugin(function (Snap, Element, Paper, glob) { @@ -136,7 +135,7 @@ drawing_path.drag(); canDraw = false; pathIsClosed = true; - resizer.apply_resize(paper, drawing_path); + ShapeResizer.apply_resize(paper, drawing_path); }; @@ -389,6 +388,7 @@ if ((drawingMode === FREE_MODE) || pathIsClosed || !rectZone) { return false; } rectZone.drag(); drawing_path = rectZone; + ShapeResizer.apply_resize(paper, rectZone); canDraw = false; pathIsClosed = true; }); @@ -421,8 +421,8 @@ var pathData =pathInfos[0]; /* deal with path nomalization x = ImageWith/MaxXBound*/ - var xRatio = paper.node.clientWidth / viewBoxBounds.X; - var yRatio = paper.node.clientHeight / viewBoxBounds.Y; + var xRatio = mainImage.width() / viewBoxBounds.X; + var yRatio = mainImage.height() / viewBoxBounds.Y; if(isNaN(xRatio) || isNaN(yRatio)) { new Error('Ratio should be a number.'); @@ -503,9 +503,8 @@ } } - var xRatio = viewBoxBounds.X / paper.node.clientWidth; - var yRatio = viewBoxBounds.Y / paper.node.clientHeight; - + var xRatio = viewBoxBounds.X / mainImage.width(); + var yRatio = viewBoxBounds.Y / mainImage.height(); if(isNaN(xRatio) || isNaN(yRatio)) { new Error('ratio should be a number.'); } @@ -530,7 +529,7 @@ init: function(config) { - var mainImage = jQuery(config.wrapperId).find('img').eq(0); + mainImage = jQuery(config.wrapperId).find('img').eq(0); var cutCanvas = jQuery(config.wrapperId).find('.cut-canvas').eq(0); var path = jQuery(config.wrapperId).find('.image-path').eq(0); @@ -582,7 +581,7 @@ /* 2 */ /***/ function(module, exports, __webpack_require__) { - var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_LOCAL_MODULE_0__;/*** IMPORTS FROM imports-loader ***/ + var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_LOCAL_MODULE_0__;var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/*** IMPORTS FROM imports-loader ***/ (function() { var fix = module.exports=0; @@ -28735,50 +28734,87 @@ /***/ }, -/* 8 */ +/* 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 Resizer = function (paper, shape) { - this.paper = paper; - this.shape = shape; - - this.HANDLER_SIZE = 6; - this.states = {}; - this.init(); - } - - var api = Resizer.prototype = { - - init: function () { - alert(" radical - blaze "); - this.showHandlers(); - this.bindEvents(); - }, - - 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'}); - }, - - bindEvents: function () { - this.shape.click(function () { alert("radical ..."); }); - this.shape.drag(); - } - } - - module.exports = { - - apply_resize : function (paper, rect) { - new Resizer(paper, rect); - } + /* 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); + } } /***/ }