feat(webapp): migrate legacy native iOS app diagrams into the Capacitor app (#725)

Author: FelixTJDietrich

.gitignore

@@ -47,9 +47,15 @@ eslintcache
 
 library/stats.html
 
-# Capacitor generated mobile files
+# Capacitor native projects.
+# The iOS project at standalone/webapp/ios IS committed (Capacitor best
+# practice — it carries the bundle id, signing config and the legacy-migration
+# native plugin). Its own standalone/webapp/ios/.gitignore excludes the
+# regenerated artifacts (Pods/, App/App/public, DerivedData, generated config),
+# so only a stray root-level `cap add` scratch dir and the (uncommitted)
+# android project are ignored here.
 android/
-ios/
+/ios/
 
 # Fastlane
 **/fastlane/report.xml

library/lib/utils/versionConverter.ts

@@ -177,6 +177,14 @@ export function convertV3HandleToV4(v3Handle: string): string {
     RightBottom: "bottom-right",
     LeftTop: "top-left",
     LeftBottom: "bottom-left",
+
+    // Legacy iOS dialect for the top/bottom-edge quarter handles (web v3 uses
+    // RightTop/LeftBottom for the same ports). Without these they hit the
+    // lowercase fallback below, producing invalid handle ids that mis-route.
+    Topright: "top-right",
+    Topleft: "top-left",
+    Bottomright: "bottom-right",
+    Bottomleft: "bottom-left",
   }
 
   return handleMap[v3Handle] || v3Handle.toLowerCase()
@@ -367,6 +375,17 @@ function calculateRelativePosition(
   }
 }
 
+/**
+ * Order child elements top-to-bottom by bounds.y. V3 stored class/object
+ * attributes and methods as separate child elements and rendered them by
+ * vertical position (UMLElement.verticallySortedChildren); object key order is
+ * not a reliable proxy, so sort before folding them into a parent node.
+ * Mutates in place — callers pass a fresh `Object.values(...)` array.
+ */
+function sortedByBoundsY(elements: V3UMLElement[]): V3UMLElement[] {
+  return elements.sort((a, b) => (a.bounds?.y ?? 0) - (b.bounds?.y ?? 0))
+}
+
 /**
  * Convert V3 node data to V4 node data format
  */
@@ -390,7 +409,7 @@ function convertV3NodeDataToV4(
     case "Enumeration": {
       const attributes: Array<{ id: string; name: string }> = []
       const methods: Array<{ id: string; name: string }> = []
-      Object.values(allElements).forEach((childElement) => {
+      sortedByBoundsY(Object.values(allElements)).forEach((childElement) => {
         if (childElement.owner === element.id) {
           if (childElement.type === "ClassAttribute") {
             attributes.push({
@@ -441,7 +460,7 @@ function convertV3NodeDataToV4(
       const attributes: Array<{ id: string; name: string }> = []
       const methods: Array<{ id: string; name: string }> = []
 
-      Object.values(allElements).forEach((childElement) => {
+      sortedByBoundsY(Object.values(allElements)).forEach((childElement) => {
         if (childElement.owner === element.id) {
           if (childElement.type === "ObjectAttribute") {
             attributes.push({
@@ -480,7 +499,7 @@ function convertV3NodeDataToV4(
     case "CommunicationObject": {
       const attributes: Array<{ id: string; name: string }> = []
       const methods: Array<{ id: string; name: string }> = []
-      Object.values(allElements).forEach((childElement) => {
+      sortedByBoundsY(Object.values(allElements)).forEach((childElement) => {
         if (childElement.owner === element.id) {
           if (childElement.type === "ObjectAttribute") {
             attributes.push({