Prevent merging path when marker-end style is specified

Ref https://github.com/svg/svgo/issues/1217 https://github.com/svg/svgo/issues/958 https://github.com/svg/svgo/issues/872

plugins/mergePaths.js

@@ -1,5 +1,8 @@
 'use strict';
 
+const { computeStyle } = require('../lib/style.js');
+const { path2js, js2path, intersects } = require('./_path.js');
+
 exports.type = 'perItem';
 
 exports.active = true;
@@ -7,17 +10,13 @@ exports.active = true;
 exports.description = 'merges multiple paths in one if possible';
 
 exports.params = {
-    collapseRepeated: true,
+  collapseRepeated: true,
-    force: false,
+  force: false,
-    leadingZero: true,
+  leadingZero: true,
-    negativeExtraSpace: true,
+  negativeExtraSpace: true,
-    noSpaceAfterFlags: false, // a20 60 45 0 1 30 20 → a20 60 45 0130 20
+  noSpaceAfterFlags: false, // a20 60 45 0 1 30 20 → a20 60 45 0130 20
 };
 
-var path2js = require('./_path.js').path2js,
-    js2path = require('./_path.js').js2path,
-    intersects = require('./_path.js').intersects;
-
 /**
  * Merge multiple Paths into one.
  *
@@ -26,48 +25,56 @@ var path2js = require('./_path.js').path2js,
  *
  * @author Kir Belevich, Lev Solntsev
  */
-exports.fn = function(item, params) {
+exports.fn = function (item, params) {
+  if (!item.isElem() || item.isEmpty()) return;
 
-    if (!item.isElem() || item.isEmpty()) return;
+  var prevContentItem = null,
+    prevContentItemKeys = null;
 
-    var prevContentItem = null,
+  item.content = item.content.filter(function (contentItem) {
-        prevContentItemKeys = null;
+    if (
-
+      prevContentItem &&
-    item.content = item.content.filter(function(contentItem) {
+      prevContentItem.isElem('path') &&
-
+      prevContentItem.isEmpty() &&
-        if (prevContentItem &&
+      prevContentItem.hasAttr('d') &&
-            prevContentItem.isElem('path') &&
+      contentItem.isElem('path') &&
-            prevContentItem.isEmpty() &&
+      contentItem.isEmpty() &&
-            prevContentItem.hasAttr('d') &&
+      contentItem.hasAttr('d')
-            contentItem.isElem('path') &&
+    ) {
-            contentItem.isEmpty() &&
+      const computedStyle = computeStyle(contentItem);
-            contentItem.hasAttr('d')
+      // keep path to not break markers
-        ) {
+      if (
-
+        computedStyle['marker-start'] ||
-            if (!prevContentItemKeys) {
+        computedStyle['marker-mid'] ||
-                prevContentItemKeys = Object.keys(prevContentItem.attrs);
+        computedStyle['marker-end']
-            }
+      ) {
-
-            var contentItemAttrs = Object.keys(contentItem.attrs),
-                equalData = prevContentItemKeys.length == contentItemAttrs.length &&
-                    contentItemAttrs.every(function(key) {
-                        return key == 'd' ||
-                            prevContentItem.hasAttr(key) &&
-                            prevContentItem.attr(key).value == contentItem.attr(key).value;
-                    }),
-                prevPathJS = path2js(prevContentItem),
-                curPathJS = path2js(contentItem);
-
-            if (equalData && (params.force || !intersects(prevPathJS, curPathJS))) {
-                js2path(prevContentItem, prevPathJS.concat(curPathJS), params);
-                return false;
-            }
-        }
-
-        prevContentItem = contentItem;
-        prevContentItemKeys = null;
         return true;
+      }
+      if (!prevContentItemKeys) {
+        prevContentItemKeys = Object.keys(prevContentItem.attrs);
+      }
 
-    });
+      var contentItemAttrs = Object.keys(contentItem.attrs),
+        equalData =
+          prevContentItemKeys.length == contentItemAttrs.length &&
+          contentItemAttrs.every(function (key) {
+            return (
+              key == 'd' ||
+              (prevContentItem.hasAttr(key) &&
+                prevContentItem.attr(key).value == contentItem.attr(key).value)
+            );
+          }),
+        prevPathJS = path2js(prevContentItem),
+        curPathJS = path2js(contentItem);
 
+      if (equalData && (params.force || !intersects(prevPathJS, curPathJS))) {
+        js2path(prevContentItem, prevPathJS.concat(curPathJS), params);
+        return false;
+      }
+    }
+
+    prevContentItem = contentItem;
+    prevContentItemKeys = null;
+    return true;
+  });
 };

test/plugins/mergePaths.07.svg

@@ -0,0 +1,35 @@
+Merged paths loose their ends and markers are rendered incorrectly
+
+===
+
+<svg width="100" height="100">
+  <defs>
+    <style>
+      .a {marker-end: url(#arrowhead_end);}
+    </style>
+    <marker id="arrowhead_end" markerWidth="10" markerHeight="10" refX="6" refY="3">
+      <path d="M 0,0 l 6,3 l -6,3" stroke="black" />
+    </marker>
+  </defs>
+  <path d="M 10,10 h50" stroke="black" marker-end="url(#arrowhead_end)" />
+  <path d="M 10,50 h50" stroke="black" marker-end="url(#arrowhead_end)" />
+  <path d="M 10,60 h60" stroke="black" class="a" />
+  <path d="M 10,70 h60" stroke="black" class="a"/>
+</svg>
+
+@@@
+
+<svg width="100" height="100">
+    <defs>
+        <style>
+            .a {marker-end: url(#arrowhead_end);}
+        </style>
+        <marker id="arrowhead_end" markerWidth="10" markerHeight="10" refX="6" refY="3">
+            <path d="M 0,0 l 6,3 l -6,3" stroke="black"/>
+        </marker>
+    </defs>
+    <path d="M 10,10 h50" stroke="black" marker-end="url(#arrowhead_end)"/>
+    <path d="M 10,50 h50" stroke="black" marker-end="url(#arrowhead_end)"/>
+    <path d="M 10,60 h60" stroke="black" class="a"/>
+    <path d="M 10,70 h60" stroke="black" class="a"/>
+</svg>