From dc23dac20c8465b07e5b9c0e0ee8d6a511b799eb Mon Sep 17 00:00:00 2001 From: make-ing Date: Fri, 15 Apr 2016 15:42:04 +0200 Subject: [PATCH 1/3] fix for the chrome 50 changes where they removed the SVGElement.offset* attributes. --- .../svgtogcode/static/js/working_area.js | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/octoprint/plugins/svgtogcode/static/js/working_area.js b/src/octoprint/plugins/svgtogcode/static/js/working_area.js index 4b35b252..3aedbee5 100644 --- a/src/octoprint/plugins/svgtogcode/static/js/working_area.js +++ b/src/octoprint/plugins/svgtogcode/static/js/working_area.js @@ -102,11 +102,11 @@ $(function(){ self.availableWidth($('#workingarea div.span8').innerWidth()); }; - self.move_laser = function(el){ + self.move_laser = function(data, evt){ self.abortFreeTransforms(); if(self.state.isOperational() && !self.state.isPrinting()){ - var x = self.px2mm(event.offsetX); - var y = self.px2mm(event.toElement.ownerSVGElement.offsetHeight - event.offsetY); // hopefully this works across browsers + var x = self.px2mm(evt.offsetX); + var y = self.px2mm(evt.toElement.ownerSVGElement.getBoundingClientRect().height - evt.offsetY); // hopefully this works across browsers x = Math.min(x, self.workingAreaWidthMM()); y = Math.min(y, self.workingAreaHeightMM()); $.ajax({ @@ -390,7 +390,7 @@ $(function(){ }); }; - + self.placeIMG = function (file) { var url = self._getIMGserveUrl(file); var img = new Image(); @@ -632,13 +632,13 @@ $(function(){ var userContent = snap.select("#userContent").clone(); compSvg.append(userContent); - + self.renderInfill(compSvg, fillAreas, wMM, hMM, 10, function(svgWithRenderedInfill){ callback( self._wrapInSvgAndScale(svgWithRenderedInfill)); $('#compSvg').remove(); }); }; - + self._wrapInSvgAndScale = function(content){ var svgStr = content.innerSVG(); if(svgStr !== ''){ @@ -721,7 +721,7 @@ $(function(){ self.clear_gcode = function(){ snap.select('#gCodePreview').clear(); }; - + self.onStartup = function(){ self.state.workingArea = self; self.files.workingArea = self; @@ -754,9 +754,9 @@ $(function(){ } }); }; - + self._embedAllImages = function(svg, callback){ - + var allImages = svg.selectAll('image'); var linkedImages = allImages.items.filter(function(i){ if(i.attr('xlink:href') != null) { @@ -795,7 +795,7 @@ $(function(){ var fillings = userContent.removeUnfilled(fillAreas); for (var i = 0; i < fillings.length; i++) { var item = fillings[i]; - + if (item.type === 'image') { // remove filter effects on images for proper rendering var style = item.attr('style'); From 974094b9075daa970414a50350bd2496d60a1f12 Mon Sep 17 00:00:00 2001 From: make-ing Date: Fri, 15 Apr 2016 15:53:48 +0200 Subject: [PATCH 2/3] changed "toElement" to "target" for better cross browser compatibility --- src/octoprint/plugins/svgtogcode/static/js/working_area.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/octoprint/plugins/svgtogcode/static/js/working_area.js b/src/octoprint/plugins/svgtogcode/static/js/working_area.js index 3aedbee5..42b0aeaa 100644 --- a/src/octoprint/plugins/svgtogcode/static/js/working_area.js +++ b/src/octoprint/plugins/svgtogcode/static/js/working_area.js @@ -106,7 +106,7 @@ $(function(){ self.abortFreeTransforms(); if(self.state.isOperational() && !self.state.isPrinting()){ var x = self.px2mm(evt.offsetX); - var y = self.px2mm(evt.toElement.ownerSVGElement.getBoundingClientRect().height - evt.offsetY); // hopefully this works across browsers + var y = self.px2mm(evt.target.ownerSVGElement.getBoundingClientRect().height - evt.offsetY); // hopefully this works across browsers x = Math.min(x, self.workingAreaWidthMM()); y = Math.min(y, self.workingAreaHeightMM()); $.ajax({ From c0e4f123fffb81047937a66ff5de7fd8196928b5 Mon Sep 17 00:00:00 2001 From: make-ing Date: Mon, 18 Apr 2016 11:35:28 +0200 Subject: [PATCH 3/3] Firefox bug fixes --- .../svgtogcode/static/js/working_area.js | 38 +++++++++++++++---- 1 file changed, 31 insertions(+), 7 deletions(-) diff --git a/src/octoprint/plugins/svgtogcode/static/js/working_area.js b/src/octoprint/plugins/svgtogcode/static/js/working_area.js index 42b0aeaa..41fe67c4 100644 --- a/src/octoprint/plugins/svgtogcode/static/js/working_area.js +++ b/src/octoprint/plugins/svgtogcode/static/js/working_area.js @@ -1,5 +1,20 @@ $(function(){ + // Opera 8.0+ + var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0; + // Firefox 1.0+ + var isFirefox = typeof InstallTrigger !== 'undefined'; + // At least Safari 3+: "[object HTMLElementConstructor]" + var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0; + // Internet Explorer 6-11 + var isIE = /*@cc_on!@*/false || !!document.documentMode; + // Edge 20+ + var isEdge = !isIE && !!window.StyleMedia; + // Chrome 1+ + var isChrome = !!window.chrome && !!window.chrome.webstore; + // Blink engine detection + var isBlink = (isChrome || isOpera) && !!window.CSS; + function WorkingAreaViewModel(params) { var self = this; @@ -105,21 +120,30 @@ $(function(){ self.move_laser = function(data, evt){ self.abortFreeTransforms(); if(self.state.isOperational() && !self.state.isPrinting()){ - var x = self.px2mm(evt.offsetX); - var y = self.px2mm(evt.target.ownerSVGElement.getBoundingClientRect().height - evt.offsetY); // hopefully this works across browsers - x = Math.min(x, self.workingAreaWidthMM()); - y = Math.min(y, self.workingAreaHeightMM()); + var coord = self.getXYCoord(evt); $.ajax({ url: API_BASEURL + "printer/printhead", type: "POST", dataType: "json", contentType: "application/json; charset=UTF8", - data: JSON.stringify({"command": "position", x:x, y:y}) + data: JSON.stringify({"command": "position", x:coord.x, y:coord.y}) }); } }; - + self.getXYCoord = function(evt){ + if(isFirefox) { + var scale = evt.target.parentElement.transform.baseVal[0].matrix.a; + var x = self.px2mm(evt.offsetX) * scale; + var y = self.px2mm(parseFloat(evt.target.attributes.height.value) - evt.offsetY) * scale; + } else { + var x = self.px2mm(evt.offsetX); + var y = self.px2mm(evt.target.ownerSVGElement.getBoundingClientRect().height - evt.offsetY); // hopefully this works across browsers + } + x = Math.min(x, self.workingAreaWidthMM()); + y = Math.min(y, self.workingAreaHeightMM()); + return {x:x, y:y}; + } self.crosshairX = function(){ var pos = self.state.currentPos(); @@ -127,7 +151,7 @@ $(function(){ }; self.crosshairY = function(){ - var h = document.getElementById('area_preview').clientHeight; + var h = Snap($('#area_preview')[0]).getBBox().height; var pos = self.state.currentPos(); return pos !== undefined ? (h - self.mm2px(pos.y) - 15) : -100; // subtract height/2; };