From 583a86a48305b800851e59c7f61cbe411ecf4e12 Mon Sep 17 00:00:00 2001 From: Teja Date: Sun, 31 May 2015 16:14:11 +0200 Subject: [PATCH] ux improvements --- src/octoprint/plugins/svgtogcode/__init__.py | 2 +- .../svgtogcode/static/js/drag_scale_rotate.js | 110 ++++++++++++++++++ .../svgtogcode/static/js/working_area.js | 2 +- 3 files changed, 112 insertions(+), 2 deletions(-) create mode 100644 src/octoprint/plugins/svgtogcode/static/js/drag_scale_rotate.js diff --git a/src/octoprint/plugins/svgtogcode/__init__.py b/src/octoprint/plugins/svgtogcode/__init__.py index 4c4c61c0..3e76148a 100644 --- a/src/octoprint/plugins/svgtogcode/__init__.py +++ b/src/octoprint/plugins/svgtogcode/__init__.py @@ -143,7 +143,7 @@ class SvgToGcodePlugin(octoprint.plugin.SlicerPlugin, def get_assets(self): return { - "js": [ "js/convert.js", "js/working_area.js", "js/gcode_parser.js", "js/lib/snap.svg-min.js", "js/matrix_oven.js"], + "js": [ "js/convert.js", "js/working_area.js", "js/gcode_parser.js", "js/lib/snap.svg-min.js", "js/matrix_oven.js", "js/drag_scale_rotate.js"], "less": ["less/svgtogcode.less"], "css": ["css/svgtogcode.css", "css/mrbeam.css"] } diff --git a/src/octoprint/plugins/svgtogcode/static/js/drag_scale_rotate.js b/src/octoprint/plugins/svgtogcode/static/js/drag_scale_rotate.js new file mode 100644 index 00000000..aa741dc6 --- /dev/null +++ b/src/octoprint/plugins/svgtogcode/static/js/drag_scale_rotate.js @@ -0,0 +1,110 @@ +// Matrix Oven - a snapsvg.io plugin to apply & remove transformations from svg files. +// Copyright (C) 2015 Teja Philipp +// +// based on work by https://gist.github.com/timo22345/9413158 +// and https://github.com/duopixel/Method-Draw/blob/master/editor/src/svgcanvas.js +// +// This program is free software: you can redistribute it and/or modify +// it under the terms of the GNU Affero General Public License as +// published by the Free Software Foundation, either version 3 of the +// License, or (at your option) any later version. +// +// This program is distributed in the hope that it will be useful, +// but WITHOUT ANY WARRANTY; without even the implied warranty of +// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +// GNU Affero General Public License for more details. +// +// You should have received a copy of the GNU Affero General Public License +// along with this program. If not, see . + + + +Snap.plugin(function (Snap, Element, Paper, global) { + + /** + * bakes transformations of the element and all sub-elements into coordinates + * + * @returns {undefined} + */ + Element.prototype.transformable = function () { + var elem = this; + if (!elem || !elem.paper) // don't handle unplaced elements. this causes double handling. + return; + + elem.add_fill(); + // add invisible fill for better dragging. + + + return elem; + + + }; + + Element.prototype.limitDrag = function() { + var limitBBox = this.paper.select('#scaleGroup').getBBox(); + this.data('minx', limitBBox.x ); this.data('miny', limitBBox.y ); + this.data('maxx', limitBBox.x2 ); this.data('maxy', limitBBox.y2 ); + this.data('x', limitBBox.x ); this.data('y', limitBBox.y ); + this.data('ibb', this.getBBox() ); + this.data('ot', this.transform().local ); + this.drag( _limitMoveDrag, _limitStartDrag ); + return this; + }; + + // this code is old and clunky now, and transform possibly in wrong order, so only use for simple cases + function _limitMoveDrag( dx, dy ) { + var tdx, tdy; + var sInvMatrix = this.transform().globalMatrix.invert(); + sInvMatrix.e = sInvMatrix.f = 0; + tdx = sInvMatrix.x( dx,dy ); tdy = sInvMatrix.y( dx,dy ); + + this.data('x', +this.data('ox') + tdx); + this.data('y', +this.data('oy') + tdy); + if( this.data('x') > this.data('maxx') - this.data('ibb').width ) + { this.data('x', this.data('maxx') - this.data('ibb').width ) }; + if( this.data('y') > this.data('maxy') - this.data('ibb').height ) + { this.data('y', this.data('maxy') - this.data('ibb').height ) }; + if( this.data('x') < this.data('minx') ) { this.data('x', this.data('minx') ) }; + if( this.data('y') < this.data('miny') ) { this.data('y', this.data('miny') ) }; + this.transform( this.data('ot') + "t" + [ this.data('x'), this.data('y') ] ); + }; + + function _limitStartDrag( x, y, ev ) { + this.data('ox', this.data('x')); this.data('oy', this.data('y')); + }; + + + + + + /** + * Adds transparent fill if not present. + * This is useful for dragging the element around. + * + * @returns {path} + */ + Element.prototype.add_fill = function(){ + var elem = this; + var children = elem.selectAll('*'); + if (children.length > 0) { + for (var i = 0; i < children.length; i++) { + var child = children[i]; + child.add_fill(); + } + } else { + var fill = elem.attr('fill'); + var type = elem.type; + if(type === 'path' && (fill === 'none' || fill === '')){ + + elem.attr({fill: '#ffffff', "fill-opacity": 0}); + } + } + return elem; + }; + + + + + +}); + diff --git a/src/octoprint/plugins/svgtogcode/static/js/working_area.js b/src/octoprint/plugins/svgtogcode/static/js/working_area.js index 6a5af272..2981d000 100644 --- a/src/octoprint/plugins/svgtogcode/static/js/working_area.js +++ b/src/octoprint/plugins/svgtogcode/static/js/working_area.js @@ -246,9 +246,9 @@ $(function(){ 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.drag();// TODO debug drag. should not be affected by scale matrix - file.id = previewId; file.previewId = previewId; file.url = url;