Fixes for Relative Coordinates, and SVG Rect Node Improvements (#64)

* chore: add github issue class for testing * fix: first move should always be absolute * fix: round rect not considering floating point values * fix: adding missing unit test * chore: add more information to integrity check script * fix: adjust sample file to move to command changes * chore: bump up cli version
rafaeltonholo · Sep 7, 2024 · 4cc571f · 4cc571f
1 parent e5f0eba
commit 4cc571f
Show file tree

Hide file tree

Showing 8 changed files with 79 additions and 31 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -14,7 +14,7 @@ ij_smart_tabs = false
 ij_visual_guides =
 ij_wrap_on_typing = false
 
-[*.js]
+[*.sh]
 indent_size = 2
 
 [*.properties]

diff --git a/.github/actions/cli-integrity-check/script.sh b/.github/actions/cli-integrity-check/script.sh
@@ -42,7 +42,16 @@ for index in "${!files[@]}"; do
   input="$root_directory/samples/${type}/$filename.${ext}"
   output="$root_directory/integrity-check/${type}/$output_name.${suffix}.kt"
 
-  echo "Parsing $filename to Jetpack Compose Icon"
+  if [ $optimize == "true" ]; then
+    if [ $type == "svg" ]; then
+      echo "svgo version $(svgo --version)"
+    else
+      echo "avocado version $(avocado --version)"
+    fi
+  fi
+
+  s2c_version=$(command "$root_directory/s2c" --version)
+  echo "Parsing $filename to Jetpack Compose Icon using $s2c_version"
   if ! command "$root_directory/s2c" -o "$output" \
         -p "$package" \
         --theme "$theme" \

diff --git a/app.properties b/app.properties
@@ -1 +1 @@
-VERSION=1.3.2
+VERSION=1.3.3
diff --git a/samples/Illustration.svg.optimized.kt b/samples/Illustration.svg.optimized.kt
@@ -830,8 +830,8 @@ val IllustrationSvgOptimized: ImageVector
             path(
                 fill = SolidColor(Color(0xFF7E5C63)),
             ) {
-                // m 75.52 72.16
-                moveToRelative(dx = 75.52f, dy = 72.16f)
+                // M 75.52 72.16
+                moveTo(x = 75.52f, y = 72.16f)
                 // l -12.04 6.33
                 lineToRelative(dx = -12.04f, dy = 6.33f)
                 // l -3 -13.21
@@ -1031,8 +1031,8 @@ val IllustrationSvgOptimized: ImageVector
             path(
                 fill = SolidColor(Color(0xFF111528)),
             ) {
-                // m 38.8 69.42
-                moveToRelative(dx = 38.8f, dy = 69.42f)
+                // M 38.8 69.42
+                moveTo(x = 38.8f, y = 69.42f)
                 // l -0.07 -0.28
                 lineToRelative(dx = -0.07f, dy = -0.28f)
                 // A 13 13 0 0 1 38.3 66
@@ -1287,8 +1287,8 @@ val IllustrationSvgOptimized: ImageVector
             path(
                 fill = SolidColor(Color(0xFF111528)),
             ) {
-                // m 50.25 76.66
-                moveToRelative(dx = 50.25f, dy = 76.66f)
+                // M 50.25 76.66
+                moveTo(x = 50.25f, y = 76.66f)
                 // l -0.15 -1.94
                 lineToRelative(dx = -0.15f, dy = -1.94f)
                 // l -0.16 0.01
@@ -1584,8 +1584,8 @@ val IllustrationSvgOptimized: ImageVector
             path(
                 fill = SolidColor(Color(0xFF111528)),
             ) {
-                // m 53.96 91.33
-                moveToRelative(dx = 53.96f, dy = 91.33f)
+                // M 53.96 91.33
+                moveTo(x = 53.96f, y = 91.33f)
                 // l 2.2 -6.71
                 lineToRelative(dx = 2.2f, dy = -6.71f)
                 // L 56 84.57
@@ -1896,8 +1896,8 @@ val IllustrationSvgOptimized: ImageVector
             path(
                 fill = SolidColor(Color(0xFF111528)),
             ) {
-                // m 54.3 89.5
-                moveToRelative(dx = 54.3f, dy = 89.5f)
+                // M 54.3 89.5
+                moveTo(x = 54.3f, y = 89.5f)
                 // l 2.29 2.43
                 lineToRelative(dx = 2.29f, dy = 2.43f)
                 // a 0.16 0.16 0 1 0 0.23 -0.21
@@ -2465,8 +2465,8 @@ val IllustrationSvgOptimized: ImageVector
             path(
                 fill = SolidColor(Color(0xFFFBC4DB)),
             ) {
-                // m 54.35 28.1
-                moveToRelative(dx = 54.35f, dy = 28.1f)
+                // M 54.35 28.1
+                moveTo(x = 54.35f, y = 28.1f)
                 // l 0.03 -0.02z
                 lineToRelative(dx = 0.03f, dy = -0.02f)
                 close()
@@ -2847,8 +2847,8 @@ val IllustrationSvgOptimized: ImageVector
             path(
                 fill = SolidColor(Color(0xFFA583A0)),
             ) {
-                // m 58.02 43.54
-                moveToRelative(dx = 58.02f, dy = 43.54f)
+                // M 58.02 43.54
+                moveTo(x = 58.02f, y = 43.54f)
                 // l -0.16 -0.09
                 lineToRelative(dx = -0.16f, dy = -0.09f)
                 // a 0.2 0.2 0 0 1 0.16 0.09
@@ -4652,8 +4652,8 @@ val IllustrationSvgOptimized: ImageVector
             path(
                 fill = SolidColor(Color(0xFFFBBF4C)),
             ) {
-                // m 97.7 40.62
-                moveToRelative(dx = 97.7f, dy = 40.62f)
+                // M 97.7 40.62
+                moveTo(x = 97.7f, y = 40.62f)
                 // l -0.46 -7.64
                 lineToRelative(dx = -0.46f, dy = -7.64f)
                 // l -2.1 7.28

diff --git a/svg-to-compose/src/commonMain/kotlin/dev/tonholo/s2c/domain/ImageVectorNode.kt b/svg-to-compose/src/commonMain/kotlin/dev/tonholo/s2c/domain/ImageVectorNode.kt
@@ -383,7 +383,7 @@ fun String.asNodeWrapper(minified: Boolean): ImageVectorNode.NodeWrapper {
             verbose("current commands list=$commands")
             verbose("current=$current, currentCommand=$currentCommand")
 
-            val isRelative = currentCommand.isLowerCase()
+            val isRelative = isRelativeCommand(nodes, currentCommand)
             current = current.lowercase()
             val node = createNode(current, commands, isRelative, currentCommand, minified)
             lastCommand = currentCommand
@@ -402,6 +402,18 @@ fun String.asNodeWrapper(minified: Boolean): ImageVectorNode.NodeWrapper {
     )
 }
 
+/**
+ * Verifies if the current command is a relative command.
+ *
+ * @return `true` in case the command is lowercased and it is not the very
+ *  first move to command, which should be absolute
+ */
+private fun isRelativeCommand(node: List<PathNodes>, command: Char): Boolean {
+    return command.isLowerCase() && (
+        node.isNotEmpty() || !command.equals(PathCommand.MoveTo.value, ignoreCase = true)
+        )
+}
+
 private fun createNode(
     current: String,
     commands: MutableList<String>,

diff --git a/svg-to-compose/src/commonMain/kotlin/dev/tonholo/s2c/domain/svg/SvgRectNode.kt b/svg-to-compose/src/commonMain/kotlin/dev/tonholo/s2c/domain/svg/SvgRectNode.kt
@@ -35,8 +35,8 @@ class SvgRectNode(
         val baseDimension = root.viewportHeight
         y?.toIntOrNull(baseDimension)
     }
-    val rx: Int? by attribute()
-    val ry: Int? by attribute()
+    val rx: Double? by attribute()
+    val ry: Double? by attribute()
 
     companion object {
         const val TAG_NAME = "rect"
@@ -66,8 +66,8 @@ fun SvgRectNode.asNode(
 }
 
 private fun SvgRectNode.createPath(isMinified: Boolean): ImageVectorNode.NodeWrapper {
-    val xCornerSize = rx ?: ry ?: 0
-    val yCornerSize = ry ?: rx ?: 0
+    val xCornerSize = rx ?: ry ?: 0.0
+    val yCornerSize = ry ?: rx ?: 0.0
     val x = x ?: 0
     val y = y ?: 0
     val strokeDashArray = strokeDashArray
@@ -78,11 +78,11 @@ private fun SvgRectNode.createPath(isMinified: Boolean): ImageVectorNode.NodeWra
             strokeDashArray != null && rx == null && ry == null ->
                 createDashedRect(strokeDashArray, x, y, isMinified)
 
-            xCornerSize == 0 && yCornerSize == 0 ->
+            xCornerSize == 0.0 && yCornerSize == 0.0 ->
                 createRegularRect(x, y, isMinified)
 
             else ->
-                createRoundedCornerRect(x, y, yCornerSize, isMinified, xCornerSize)
+                createRoundedCornerRect(x, y, xCornerSize, yCornerSize, isMinified)
         },
     )
 }
@@ -137,9 +137,9 @@ private fun SvgRectNode.createRegularRect(
 private fun SvgRectNode.createRoundedCornerRect(
     x: Int,
     y: Int,
-    yCornerSize: Int,
+    xCornerSize: Double,
+    yCornerSize: Double,
     isMinified: Boolean,
-    xCornerSize: Int,
 ) = listOf(
     pathNode(command = PathCommand.MoveTo) {
         args(x, y + yCornerSize)

diff --git a/svg-to-compose/src/commonTest/kotlin/dev/tonholo/s2c/domain/svg/SvgPathMoveToTests.kt b/svg-to-compose/src/commonTest/kotlin/dev/tonholo/s2c/domain/svg/SvgPathMoveToTests.kt
@@ -17,7 +17,7 @@ class SvgPathMoveToTests : BaseSvgTest() {
     }
 
     @Test
-    fun `ensure a 'm' command is parsed to MoveTo relative`() {
+    fun `ensure the first MoveTo command is always absolute`() {
         // Arrange
         val path = SvgPathNode(
             parent = root,
@@ -29,6 +29,24 @@ class SvgPathMoveToTests : BaseSvgTest() {
         // Assert
         assertEquals(expected = 1, actual = nodes.size)
         with(nodes.first()) {
+            assertIs<PathNodes.MoveTo>(this)
+            assertTrue(isRelative.not())
+        }
+    }
+
+    @Test
+    fun `ensure a 'm' command is parsed to MoveTo relative`() {
+        // Arrange
+        val path = SvgPathNode(
+            parent = root,
+            attributes = mutableMapOf("d" to "M85.122 64.795 m-5.122 4.7"),
+        )
+        // Act
+        val node = path.asNode(minified = false) as ImageVectorNode.Path
+        val nodes = node.wrapper.nodes
+        // Assert
+        assertEquals(expected = 2, actual = nodes.size)
+        with(nodes.last()) {
             assertIs<PathNodes.MoveTo>(this)
             assertTrue(isRelative)
         }

diff --git a/svg-to-compose/src/jvmMain/kotlin/Main.kt b/svg-to-compose/src/jvmMain/kotlin/Main.kt
@@ -17,8 +17,8 @@ import kotlin.system.exitProcess
 fun main() {
     AppConfig.debug = true
     AppConfig.silent = false
-    val suffix = "v4"
-    val (pkg, path, output) = SampleFile.Directory(
+    val suffix = "63"
+    val (pkg, path, output) = SampleFile.Svg.GithubIssue(
         SampleAppPackage("dev.tonholo.sampleApp.ui.icon"),
         suffix,
     )
@@ -113,6 +113,15 @@ private sealed class SampleFile(
             output = "${ROOT_SAMPLE_APP_PATH}/${sampleAppPackage.svg().toDirectory()}",
         )
 
+        class GithubIssue(
+            sampleAppPackage: SampleAppPackage,
+            suffix: String,
+        ) : SampleFile(
+            sampleAppPackage = sampleAppPackage.svg(),
+            input = "$BASE_PATH/github_issue_$suffix.svg",
+            output = "$ROOT_SAMPLE_APP_PATH/${sampleAppPackage.svg().toDirectory()}/GithubIssue.$suffix.kt",
+        )
+
         class Brasil(
             sampleAppPackage: SampleAppPackage,
             suffix: String,