Merge pull request #5 from Pash237/master

Fix #1, support for GPX waypoint names in custom components
JoseLuisGJ · Oct 12, 2022 · a41a29f · a41a29f
2 parents 56fc3df + 3535703
commit a41a29f
Show file tree

Hide file tree

Showing 6 changed files with 96 additions and 26 deletions.
diff --git a/dist/code.js b/dist/code.js
diff --git a/dist/ui.html b/dist/ui.html
diff --git a/dist/ui.js b/dist/ui.js
diff --git a/src/app/components/App.tsx b/src/app/components/App.tsx
@@ -154,6 +154,7 @@ const App = ({}) => {
               setMarkerImg={setMarkerImg}
               stateMarkers={stateMarkers}
               setStateMarkers={setStateMarkers}
+              viewport={viewport}
               handleViewportChangeFileLoaded={handleViewportChangeFileLoaded}
             />
           </>

diff --git a/src/app/components/MapMarkersForm.tsx b/src/app/components/MapMarkersForm.tsx
@@ -2,12 +2,14 @@ import * as React from "react";
 import { useEffect } from "react";
 import Dropzone from "react-dropzone";
 import gpxParser from "gpxParser";
+import { WebMercatorViewport } from "react-map-gl";
 
 interface IMap {
   setMarkerImg: any;
   figmaComponents: any;
   stateMarkers: any;
   setStateMarkers: any;
+  viewport: any;
   handleViewportChangeFileLoaded: any;
 }
 
@@ -16,6 +18,7 @@ const MapMarkerForm: React.FC<IMap> = ({
   stateMarkers,
   setStateMarkers,
   figmaComponents,
+  viewport,
   handleViewportChangeFileLoaded
 }) => {
   useEffect(() => {
@@ -36,12 +39,29 @@ const MapMarkerForm: React.FC<IMap> = ({
       let contents = event.target.result;
       let gpx = new gpxParser();
       gpx.parse("" + contents);
+      let waypoints = gpx.waypoints;
 
-      let newMarkers = gpx.waypoints.map(waypoint => ({
-        longitude: waypoint.lon,
-        latitude: waypoint.lat,
-        icon: null
-      }));
+      if (waypoints.length == 0) {
+        return;
+      }
+
+      let nextViewport = {
+        ...viewport,
+        latitude: Number(waypoints[0].lat),
+        longitude: Number(waypoints[0].lon)
+      };
+      const v = new WebMercatorViewport(nextViewport);
+      let newMarkers = waypoints.map(waypoint => {
+        const [x, y] = v.project([waypoint.lon, waypoint.lat]);
+        return {
+          longitude: waypoint.lon,
+          latitude: waypoint.lat,
+          x: x,
+          y: y,
+          name: waypoint.name,
+          icon: null
+        };
+      });
 
       setStateMarkers(stateMarkers.concat(newMarkers));
       parent.postMessage(
@@ -53,8 +73,8 @@ const MapMarkerForm: React.FC<IMap> = ({
         "*"
       );
       handleViewportChangeFileLoaded(
-        newMarkers[0].latitude,
-        newMarkers[0].longitude
+        nextViewport.latitude,
+        nextViewport.longitude
       );
     };
 

diff --git a/src/plugin/controller.ts b/src/plugin/controller.ts
@@ -69,6 +69,17 @@ figma.ui.onmessage = msg => {
         instanceMarker.y = marker.y - mapHeightOffset;
         instanceMarker.x -= instanceMarker.width / 2;
         instanceMarker.y -= instanceMarker.height / 2;
+
+        if (marker.name) {
+          for (var customProperty of instanceMarker.componentProperties) {
+            if (customProperty["type"] == "TEXT") {
+              instanceMarker.setProperties({
+                customProperty: marker.name
+              });
+              break;
+            }
+          }
+        }
         figma.currentPage.appendChild(instanceMarker);
         nodes.push(instanceMarker);
       });