fixed problem with same id instead of previewId

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

@@ -284,12 +284,12 @@ $(function(){
 				newSvg.transformable();
 				newSvg.ftRegisterCallback(self.svgTransformUpdate);
 
-				file.id = id; // list entry id
-				file.previewId = previewId;
-				file.url = url;
-				file.misfit = "";
-
-				self.placedDesigns.push(file);
+				var fileCopy = $.extend(true,{},file);
+				fileCopy.id = id; // list entry id
+				fileCopy.previewId = previewId;
+				fileCopy.url = url;
+				fileCopy.misfit = "";
+				self.placedDesigns.push(fileCopy);
 			};
 			self.loadSVG(url, callback);
 		};
@@ -302,15 +302,6 @@ $(function(){
 			self.abortFreeTransforms();
 			snap.selectAll('#'+file.previewId).remove();
 			self.placedDesigns.remove(file);
-			// TODO debug why remove always clears all items of this type.
-//			self.placedDesigns.remove(function(item){
-//				console.log("item", item.previewId );
-//				//return false;
-//				if(item.previewId === file.previewId){
-//					console.log("match", item.previewId );
-//					return true;
-//				} else return false;
-//			});
 		};
 		self.fitSVG = function(file){
 			self.abortFreeTransforms();
@@ -345,10 +336,10 @@ $(function(){
 			var vertical = self.px2mm((bbox.y2 - bbox.y) * globalScale);
 			var id = svg.attr('id');
 			var label_id = id.substr(0, id.indexOf('-'));
-			$('#'+label_id+' .translation').text(tx.toFixed(1) + ',' + ty.toFixed(1));
-			$('#'+label_id+' .horizontal').text(horizontal.toFixed() + 'mm');
-			$('#'+label_id+' .vertical').text(vertical.toFixed() + 'mm');
-			$('#'+label_id+' .rotation').text(rot.toFixed(1) + '°');
+			$('#'+id+' .translation').text(tx.toFixed(1) + ',' + ty.toFixed(1));
+			$('#'+id+' .horizontal').text(horizontal.toFixed() + 'mm');
+			$('#'+id+' .vertical').text(vertical.toFixed() + 'mm');
+			$('#'+id+' .rotation').text(rot.toFixed(1) + '°');
 		};
 
 
@@ -438,11 +429,13 @@ $(function(){
 				newImg.transformable();
 				//newImg.ftDisableRotate();
 				newImg.ftRegisterCallback(self.svgTransformUpdate);
-				file.id = id;
-				file.previewId = previewId;
-				file.url = url;
-				file.subtype = "bitmap";
-				self.placedDesigns.push(file);
+
+				var fileCopy = $.extend(true,{},file);
+				fileCopy.id = id;
+				fileCopy.previewId = previewId;
+				fileCopy.url = url;
+				fileCopy.subtype = "bitmap";
+				self.placedDesigns.push(fileCopy);
 			};
 			img.src = url;
 		};

src/octoprint/templates/mrbeam_index.jinja2

@@ -160,7 +160,7 @@
 												-->
 												{{ _('Approx. Total Job Time') }}: <strong data-bind="text: estimatedPrintTimeString"></strong><br>
 												<div data-bind="visible: isPrinting() || isPaused()">
-													
+
 													<div class="progress">
 														<div class="bar" id="job_progressBar" data-bind="style: { width: progressString() + '%' }">&nbsp;{{ _('Processed') }} :  <strong data-bind="text: byteString"></strong></div>
 													</div>
@@ -183,7 +183,7 @@
 															</button>
 														</div>
 														<span>Passes</span>
-														
+
 													</div>
 
 												</div>
@@ -221,7 +221,7 @@
 									<div class="accordion-body collapse in overflow_visible" id="wa_filelist">
 										<div class="accordion-inner">
 											<div class="gcode_files" data-bind="slimScrolledForeach: placedDesigns">
-												<div class="entry" data-bind="attr: { id: $data.id }, template: { name: $root.templateFor($data), data: $data }"></div>
+												<div class="entry" data-bind="attr: { id: $data.previewId }, template: { name: $root.templateFor($data), data: $data }"></div>
 											</div>
 
 											<script type="text/html" id="wa_template_machinecode">
@@ -533,7 +533,7 @@
 												<i class="icon-camera icon-white"></i>
 												<span>{{ _('Photo') }}</span>
 											</a>
-												
+
 										</div>
 										<div id="gcode_upload_progress" class="progress" style="width: 100%;">
 											<div class="bar" style="width: 0%"></div>
@@ -601,7 +601,7 @@
 															<div class="btn-group action-buttons">
 <!--																<a class="btn btn-mini" data-bind="attr: {href: $root.downloadLink($data), css: {disabled: !$root.downloadLink($data)}}"><i class="icon-download-alt" title="{{ _('Download') }}"></i></a>
 																<div class="btn btn-mini" data-bind="click: function() { if ($root.enableRemove($data)) { $root.removeFile($data); } else { return; } }, css: {disabled: !$root.enableRemove($data)}"><i class="icon-trash" title="{{ _('Remove') }}"></i></div>-->
-																<div class="btn" data-bind="click: function() { if(!$root.workingArea.isPlaced($data)){ $root.workingArea.placeSVG($data); } }, css: {disabled: $root.workingArea.isPlaced($data)}"><i class="icon-ok" title="{{ _('Use') }}">Add</i></div>
+																<div class="btn" data-bind="click: function() { $root.workingArea.placeSVG($data); }"><i class="icon-ok" title="{{ _('Use') }}">Add</i></div>
 															</div>
 														</div>
 													</script>
@@ -628,7 +628,7 @@
 															<div class="btn-group action-buttons">
 <!--																<a class="btn btn-mini" data-bind="attr: {href: $root.downloadLink($data), css: {disabled: !$root.downloadLink($data)}}"><i class="icon-download-alt" title="{{ _('Download') }}"></i></a>
 																<div class="btn btn-mini" data-bind="click: function() { if ($root.enableRemove($data)) { $root.removeFile($data); } else { return; } }, css: {disabled: !$root.enableRemove($data)}"><i class="icon-trash" title="{{ _('Remove') }}"></i></div>-->
-																<div class="btn" data-bind="click: function() { if(!$root.workingArea.isPlaced($data)){ $root.workingArea.placeIMG($data); } }, css: {disabled: $root.workingArea.isPlaced($data)}"><i class="icon-ok" title="{{ _('Use') }}">Add</i></div>
+																<div class="btn" data-bind="click: function() { $root.workingArea.placeIMG($data);}"><i class="icon-ok" title="{{ _('Use') }}">Add</i></div>
 															</div>
 														</div>
 													</script>