Upgrade to AppCards

README.md

@@ -72,3 +72,8 @@ with newer changes in `src`.
       - Selecting the card will also navigate to the code.
   - All cards on the board use Miro's native linking feature for permalinks.
   - If you have a card selected in miro, you can `AppExplorer: Attach Card to Code` to reattach it to a symbol you're looking at.
+- 0.0.7 - AppCards
+  - Up through version 0.0.6 I've been using Miro Cards that can be edited on the board. This makes it too easy to accidentally overwrite titles.
+  - When selecting a card from an older version, it will be migrated to a new AppCard and then removed.
+    - I couldn't get it to reliably place the new card over the old one, so it just puts it in the center of the viewport.
+  - All new cards are AppCards

public/miro.js

@@ -30,7 +30,7 @@ async function updateCard(card, data) {
   /** @type {MetaData} */
   const metaData = {
     path: data.path,
-    symbol: data.symbol,
+    symbol: data.symbol ?? null,
     codeLink: data.codeLink,
   };
   await card.setMetadata("app-explorer", metaData);
@@ -128,7 +128,7 @@ async function nextCardLocation() {
     /**
      * @returns {item is Card}
      */
-    (item) => item.type === "card"
+    (item) => item.type === "card" || item.type === "app_card"
   );
   const width = 300;
   const height = 200;
@@ -159,10 +159,13 @@ async function nextCardLocation() {
  */
 const newCard = async (data) => {
   const selection = (await miro.board.getSelection()).filter(
-    (item) => item.type === "card"
+    (item) => item.type === "card" || item.type === "app_card"
   );
 
-  const card = await miro.board.createCard(await nextCardLocation());
+  const card = await miro.board.createAppCard({
+    ...(await nextCardLocation()),
+    status: "connected",
+  });
   zoomIntoCards([selection, card].flat());
   await updateCard(card, data);
 
@@ -210,7 +213,10 @@ export function attachToSocket(socket) {
   socket.on("attachCard", async (cardData) => {
     const selection = await miro.board.getSelection();
     const card = selection[0];
-    if (selection.length === 1 && card.type === "card") {
+    if (
+      selection.length === 1 &&
+      (card.type === "card" || card.type === "app_card")
+    ) {
       await updateCard(card, cardData);
       await miro.board.deselect();
       await miro.board.select({ id: card.id });
@@ -225,6 +231,56 @@ export function attachToSocket(socket) {
     await miro.board.select({ id });
     await zoomIntoCards([card]);
   });
+  socket.on("cardStatus", async ({ miroLink, status }) => {
+    const url = new URL(miroLink);
+    const id = url.searchParams.get("moveToWidget");
+    let card = await miro.board.getById(id);
+    // 0.0.7 - Migrate cards to app cards
+    if (card.type === "card") {
+      try {
+        await miro.board.deselect();
+        const data = await extractCardData(card);
+        const appCard = await newCard(data);
+
+        // I can't seem to get the card to move to the correct location.
+        // const { x, y } = boundingBox([card]);
+        // (appCard.x = x), (appCard.y = y);
+        // await appCard.sync();
+        // await zoomIntoCards([appCard]);
+
+        const connectors = await card.getConnectors();
+        await connectors.reduce(async (promise, connector) => {
+          if (connector.start?.item === card.id) {
+            connector.start.item = appCard.id;
+          }
+          if (connector.end?.item === card.id) {
+            connector.end.item = appCard.id;
+          }
+          await connector.sync();
+          await promise;
+        }, Promise.resolve(null));
+
+        await miro.board.deselect();
+        await miro.board.select({ id: appCard.id });
+        await card.setMetadata("app-explorer", null);
+        card.title = `(migrated) ${card.title}`;
+        await card.sync();
+
+        // This delete doesn't work, IDK why
+        await miro.board.remove(card);
+        card = appCard;
+        await zoomIntoCards([card]);
+      } catch (e) {
+        console.error("Error disconnecting card", e);
+        throw e;
+      }
+    }
+
+    if (card.type === "app_card") {
+      card.status = status;
+      await card.sync();
+    }
+  });
   socket.on("hoverCard", async (cardUrl) => {
     const url = new URL(cardUrl);
     const id = url.searchParams.get("moveToWidget");
@@ -247,7 +303,9 @@ export function attachToSocket(socket) {
 
   miro.board.ui.on("selection:update", async function selectionUpdate(event) {
     const selectedItems = event.items;
-    const cards = selectedItems.filter((item) => item.type === "card");
+    const cards = selectedItems.filter(
+      (item) => item.type === "card" || item.type === "app_card"
+    );
     let data = await Promise.all(cards.map(extractCardData));
     data = data.filter((d) => d != null);
 

src/EventTypes.ts

@@ -22,6 +22,10 @@ export type RequestEvents = {
   queryBoard: () => void;
   hoverCard: (miroLink: string) => void;
   selectCard: (miroLink: string) => void;
+  cardStatus: (data: {
+    miroLink: string;
+    status: "connected" | "disconnected";
+  }) => void;
   jump: (data: {
     lastUri: string;
     lastPosition: vscode.Position;

src/make-browse-handler.ts

@@ -46,7 +46,7 @@ export const makeBrowseHandler = ({ allCards, emit }: HandlerContext) =>
     if (selected) {
       const card = allCards.get(selected.miroLink);
       if (card) {
-        emit("selectCard", card.miroLink!)
+        emit("selectCard", card.miroLink!);
         // await goToCardCode(card);
       }
     }
@@ -65,13 +65,15 @@ export async function goToCardCode(card: CardData) {
       // It seems like when opening a new file, the symbols are not
       // immediately available.
       if (symbols.length === 0) {
-        await new Promise(resolve => setTimeout(resolve, 100));
+        await new Promise((resolve) => setTimeout(resolve, 100));
         symbols = await readSymbols(editor);
       }
       const symbol = symbols.find((symbol) => symbol.label === card.symbol);
       if (symbol && symbol.range) {
         selectRangeInEditor(symbol.range, editor);
+        return true;
       }
     }
   }
+  return false;
 }

src/server.ts

@@ -30,12 +30,19 @@ export function makeExpressServer(
       `AppExplorer Connected at socket - ${socket.id}`
     );
 
-    socket.on("selectedCards", (event) => {
+    socket.on("selectedCards", async (event) => {
       selectedCards.length = 0
       selectedCards.push(...event.data.map((card) => card.miroLink));
       if (selectedCards.length === 1) {
         const card = event.data[0];
-        goToCardCode(card)
+
+        const status = await goToCardCode(card) ? 'connected' : 'disconnected'
+        if (card.miroLink) {
+          socket.emit('cardStatus', {
+            miroLink: card.miroLink,
+            status
+          })
+        }
       }
     })