visualization of local transform

src/octoprint/plugins/svgtogcode/static/js/drag_scale_rotate.js

@@ -194,9 +194,11 @@ Snap.plugin(function (Snap, Element, Paper, global) {
 		};
 		
 		Element.prototype.ftUpdateTransform = function() {
+			//console.log("translate: ", this.data('tx'), this.data('ty'), 'rotate: ', this.data('angle'), 'scale: ', this.data('scale'));
 			var tstring = "t" + this.data("tx") + "," + this.data("ty") + this.ftGetInitialTransformMatrix().toTransformString() + "r" + this.data("angle") + 'S' + this.data("scale" );		
 			this.attr({ transform: tstring });
 			this.data("bbT") && this.ftHighlightBB(this.paper.select('#userContent'));
+			this.ftReportTransformation();
 			return this;
 		};
 
@@ -214,6 +216,21 @@ Snap.plugin(function (Snap, Element, Paper, global) {
 			return this;
 		};
 		
+		Element.prototype.ftReportTransformation = function(){
+			if(this.data('ftCallbacks') && this.data('ftCallbacks').length > 0){
+				for (var idx = 0; idx < this.data('ftCallbacks').length; idx++) {
+					var cb = this.data('ftCallbacks')[idx];
+					cb(this);
+				}
+			}
+		};
+		Element.prototype.ftRegisterCallback = function(callback){
+			if(typeof this.data('ftCallbacks') === 'undefined'){
+				this.data('ftCallbacks', [callback]);
+			} else {
+				this.data('ftCallbacks').push(callback);
+			}
+		};
 	});
 
 	function rectObjFromBB ( bb ) {
@@ -284,7 +301,7 @@ Snap.plugin(function (Snap, Element, Paper, global) {
 		var distance = calcDistance( mainBB.cx, mainBB.cy, handle.attr('cx'), handle.attr('cy') );
 		var scale = distance / mainEl.data("scaleFactor");
 		if(event.shiftKey){
-			scale = Math.round(scale*4) / 4;	
+			scale = Math.round(scale*4) / 4;
 		}
 		mainEl.data("scale", scale );
 

src/octoprint/plugins/svgtogcode/static/js/working_area.js

@@ -97,6 +97,7 @@ $(function(){
 		
 
 		self.trigger_resize = function(){
+			if(typeof(snap) !== 'undefined') self.abortFreeTransforms();
 			self.availableHeight(document.documentElement.clientHeight - $('body>nav').outerHeight()  - $('footer>*').outerHeight() - 39); // magic number
 			self.availableWidth($('#workingarea div.span8').innerWidth());
 		};
@@ -105,7 +106,6 @@ $(function(){
 			self.abortFreeTransforms();
 			if(self.state.isOperational() && !self.state.isPrinting()){
 				var x = self.px2mm(event.offsetX);
-		//		var y = self.px2mm(event.toElement.offsetHeight - event.offsetY); // toElement.offsetHeight is always 0 on svg>* elements ???
 				var y = self.px2mm(event.toElement.ownerSVGElement.offsetHeight - event.offsetY); // hopefully this works across browsers
 				$.ajax({
 					url: API_BASEURL + "printer/printhead",
@@ -243,12 +243,14 @@ $(function(){
 				}
 				
 				newSvg.bake(); // remove transforms
+				newSvg.selectAll('path').attr({strokeWidth: '0.5'});
 				newSvg.attr(newSvgAttrs);
 				var id = self.getEntryId(file); 
 				var previewId = self.generateUniqueId(id); // appends -# if multiple times the same design is placed.
 				newSvg.attr({id: previewId});
 				snap.select("#userContent").append(newSvg);
 				newSvg.transformable();
+				newSvg.ftRegisterCallback(self.svgTransformUpdate);
 				
 				file.id = id; // list entry id
 				file.previewId = previewId;
@@ -298,6 +300,21 @@ $(function(){
 			}
 		};
 		
+		self.svgTransformUpdate = function(svg){
+			var tx = self.px2mm(svg.data('tx')).toFixed(0);
+			var ty = self.px2mm(svg.data('ty')).toFixed(0);
+			var rot = svg.data('angle').toFixed(1);
+			var scale = Math.round(svg.data('scale')*100);
+			var id = svg.attr('id');
+			var label_id = id.substr(0, id.indexOf('-'));
+			console.log('#'+label_id+' .translation');
+			$('#'+label_id+' .translation').text(tx + ',' + ty);
+			$('#'+label_id+' .scale').text(scale + '%');
+			$('#'+label_id+' .rotation').text(rot + '°');
+		};
+		
+
+		
 		self.outsideWorkingArea = function(svg){
 			var waBB = snap.select('#coordGrid').getBBox();
 			var svgBB = svg.getBBox();

src/octoprint/plugins/svgtogcode/templates/override_index.jinja2

@@ -198,6 +198,12 @@
 														<div class="btn btn-mini" data-bind="click: function() { $root.removeSVG($data); }"><i class="icon-remove" title="{{ _('Remove') }}"></i></div>
 													</div>
 													<div class="detail_information" >
+														<div class="local_transformation muted">
+															<i class="icon-move translation" title="{{ _('translation') }}"> </i>
+															<i class="icon-resize-full scale" title="{{ _('scale') }}"> </i>
+															<i class="icon-repeat rotation" title="{{ _('rotation') }}"> </i>
+															
+														</div>
 														<div class="misfit_warning" >
 															<i class="icon-exclamation-sign" style="color:red;" title="{{ _('exceeds working area') }}"> Design exceeds the working area.</i>
 															<a href="#" data-bind="click: function(){ $root.fitSVG($data) } ">Transform to fit closely</a>