methodofaction / Method-Draw

Method Draw, the SVG Editor for Method of Action
http://editor.method.ac
MIT License
2.81k stars 712 forks source link

Cannot drag the path control nodes when the path segment is direct line. #53

Open cuixiping opened 8 years ago

cuixiping commented 8 years ago

OS: Windows 10 Browser: Chrome 49

example svg:

<svg width="580" height="400" xmlns="http://www.w3.org/2000/svg">
  <path id="svg_2" d="m262.5,178l0,-58l45.5,-20l94.5,-18l39,72l-181,24l2,0z"
      stroke-width="1.5" stroke="#A0D58A" fill="#FFAAB8"/>
</svg>
gonzalle commented 7 years ago

Same on Mac. Chrome 54, and Safari 9.1.3... SVG-EDIT does the same thing on their demo, but works well if git cloned... Method-Draw has this bug both on the demo and on cloned version. Too bad

Cacxa commented 7 years ago

Same on Mac. Chrome 54, and Safari 9.1.3... SVG-EDIT does the same thing on their demo, but works well if git cloned... Method-Draw has this bug both on the demo and on cloned version. Too bad

Just compare two files: svgedit\editor\path.js from https://github.com/SVG-Edit/svgedit - line 478

svgedit.path.Segment.prototype.move = function(dx, dy) {
    var cur_pts, item = this.item;

    if (this.ctrlpts) {
        cur_pts = [item.x += dx, item.y += dy,
            item.x1, item.y1, item.x2 += dx, item.y2 += dy];
    } else {
        cur_pts = [item.x += dx, item.y += dy];
    }
...

Method-Draw\editor\src\path.js - line 434

svgedit.path.Segment.prototype.move = function(dx, dy) {
  var item = this.item;
  // fix for path tool dom breakage, amending item does bad things now, so we take a copy and use that. Can probably improve to just take a shallow copy of object
  var cloneItem = $.extend({}, item);
  var cur_pts = (this.ctrlpts) 
    ? [cloneItem.x += dx,  cloneItem.y += dy, 
       cloneItem.x1,       cloneItem.y1, 
       cloneItem.x2 += dx, cloneItem.y2 += dy]
    : [cloneItem.x += dx, cloneItem.y += dy];
...

You can see the difference.

Replacing the code, we get the correct result. But of course this is a wrong way, I suppose.