fix(svg-deserializer): svg path should return one geom2

Author: platypii

packages/io/svg-deserializer/src/shapesMapGeometry.js

@@ -133,15 +133,22 @@ export const shapesMapGeometry = (obj, objectify, params) => {
       const listofpaths = expandPath(obj, svgUnitsPmm, svgUnitsX, svgUnitsY, svgUnitsV, svgGroups, segments, pathSelfClosed)
       // order is important
       const listofentries = Object.entries(listofpaths).sort((a, b) => a[0].localeCompare(b[0]))
-      const shapes = listofentries.map((entry) => {
-        const path = entry[1]
-        if (target === 'geom2' && path.isClosed) {
-          const points = path2.toPoints(path)
-          return geom2.create([points])
-        }
-        return path
-      })
-      return shapes
+      if (target === 'geom2') {
+        // concatenate all sides to a single geom2
+        const outlines = []
+        listofentries.forEach((entry) => {
+          const path = entry[1]
+          // discard unclosed paths
+          if (path.isClosed) {
+            const points = path2.toPoints(path)
+            outlines.push(points)
+          }
+        })
+        if (outlines.length === 0) return []
+        return geom2.create(outlines)
+      } else {
+        return listofentries.map((entry) => entry[1])
+      }
     }
   }
 
@@ -153,6 +160,18 @@ const appendPoints = (points, geometry) => {
   return path2.fromPoints({ }, points)
 }
 
+/*
+ * Expands the given SVG path object into a set of path segments.
+ * @param {object} obj - SVG path object to expand
+ * @param {number} svgUnitsPmm - SVG units per millimeter
+ * @param {number} svgUnitsX - X-axis SVG units
+ * @param {number} svgUnitsY - Y-axis SVG units
+ * @param {number} svgUnitsV - SVG units value
+ * @param {object} svgGroups - SVG groups object
+ * @param {number} segments - number of segments per 360 rotation
+ * @param {boolean} pathSelfClosed - Whether the path is self-closed
+ * @returns {object} a object containing the named paths
+ */
 const expandPath = (obj, svgUnitsPmm, svgUnitsX, svgUnitsY, svgUnitsV, svgGroups, segments, pathSelfClosed) => {
   const paths = {}
   const on = 'path'

packages/io/svg-deserializer/tests/instantiate.test.js

@@ -326,9 +326,7 @@ test('deserialize : instantiate svg (path: with bezier) to objects', (t) => {
 </svg>`
 
   observed = deserialize({ output: 'geometry', target: 'geom2', addMetaData: false }, sourceSvg)
-  t.is(observed.length, 2)
-  shape = observed[0]
-  t.is(shape.points.length, 14) // open path
+  t.is(observed.length, 0) // open path
 
   observed = deserialize({ output: 'geometry', target: 'path', addMetaData: false }, sourceSvg)
   t.is(observed.length, 2)
@@ -344,9 +342,7 @@ test('deserialize : instantiate svg (path: with bezier) to objects', (t) => {
 </svg>`
 
   observed = deserialize({ output: 'geometry', target: 'geom2', addMetaData: false }, sourceSvg)
-  t.is(observed.length, 1)
-  shape = observed[0]
-  t.is(shape.points.length, 29) // open path
+  t.is(observed.length, 0) // open path
 
   observed = deserialize({ output: 'geometry', target: 'path', addMetaData: false }, sourceSvg)
   t.is(observed.length, 1)
@@ -420,13 +416,11 @@ test('deserialize : instantiate svg produced by inkscape to objects', (t) => {
 `
 
   let observed = deserialize({ filename: 'inkscape', output: 'geometry', target: 'geom2', addMetaData: false }, sourceSvg)
-  t.is(observed.length, 2)
+  t.is(observed.length, 1)
   let shape = observed[0]
-  t.is(shape.outlines.length, 1)
+  t.is(shape.outlines.length, 2)
   t.is(shape.outlines[0].length, 19)
-  shape = observed[1]
-  t.is(shape.outlines.length, 1)
-  t.is(shape.outlines[0].length, 20)
+  t.is(shape.outlines[1].length, 20)
 
   observed = deserialize({ output: 'geometry', target: 'path', addMetaData: false }, sourceSvg)
   t.is(observed.length, 2)
@@ -446,13 +440,11 @@ test('deserialize : instantiate shape with a hole to objects', (t) => {
 `
 
   let observed = deserialize({ output: 'geometry', target: 'geom2', addMetaData: false }, sourceSvg)
-  t.is(observed.length, 2)
+  t.is(observed.length, 1)
   let shape = observed[0]
-  t.is(shape.outlines.length, 1)
-  t.is(shape.outlines[0].length, 38)
-  shape = observed[1]
-  t.is(shape.outlines.length, 1)
+  t.is(shape.outlines.length, 2)
   t.is(shape.outlines[0].length, 38)
+  t.is(shape.outlines[1].length, 38)
 
   observed = deserialize({ output: 'geometry', target: 'path', addMetaData: false }, sourceSvg)
   t.is(observed.length, 2)
@@ -472,9 +464,9 @@ test('deserialize : instantiate shape with a nested hole to objects', (t) => {
 `
 
   let observed = deserialize({ output: 'geometry', target: 'geom2', addMetaData: false }, sourceSvg)
-  t.is(observed.length, 4)
+  t.is(observed.length, 1)
   let shape = observed[0]
-  t.is(shape.outlines.length, 1)
+  t.is(shape.outlines.length, 4)
   t.is(shape.outlines[0].length, 38)
 
   observed = deserialize({ output: 'geometry', target: 'path', addMetaData: false }, sourceSvg)

packages/modeling/src/geometries/path2/appendBezier.js

@@ -14,7 +14,7 @@ import { toPoints } from './toPoints.js'
  * In other words, the trailing gradient of the geometry matches the new gradient of the curve.
  * @param {object} options - options for construction
  * @param {Array} options.controlPoints - list of control points (2D) for the Bézier curve
- * @param {number} [options.segment=16] - number of segments per 360 rotation
+ * @param {number} [options.segments=16] - number of segments per 360 rotation
  * @param {Path2} geometry - the path of which to append points
  * @returns {Path2} a new path with the appended points
  * @alias module:modeling/geometries/path2.appendBezier