Select File, Add Card, Pull In YAML Details

[mdroidian]

Hey! So I did a thing. I'll preface this by saying I really don't know much JavaScript or Typescript.

But I seemed to have cobbled together a working prototype using QuickAdd and Excalidraw Automate that:

• selects a file
• grabs cardColor, cardHeight, and cardWidth from the YAML frontmatter
• creates a card with filename and link to file
• groups them

Mostly I just copy and pasted from @zsviczian's Clothesline Method with Quick Add. ^^

Not sure where to put this, figured here was a good a place as any.

Still lots of room for improvement. Any suggestions are welcome!

module.exports = async (params) => {

    // Defaults (Color, width, height)
    var cardColor = "WhiteSmoke";
    var cardWidth = 76;
    var cardHeight = 65;

    // Icon In the bottom right of the created card
    // If you use a Link Prefix, leave as a blank space
    // If Link Prefix is Off / Blank, use something like "»"
    const linkToDetails = " ";
    
    // Load file picker
    const pickedFile = await params.quickAddApi.suggester(
      (file) => file.basename,
      params.app.vault.getMarkdownFiles()
    );
    
    // Get Card Title
    const cardTitle = pickedFile.basename;

    // Get fileCache
    const fileCache = app.metadataCache.getFileCache(pickedFile);

    // Set Color
    // YAML = cardColor: WhiteSmoke | cardColor: #7950f2
    if (fileCache.frontmatter?.cardColor) {
        // Should add Validation
        // If bad value, card will be black
        cardColor = fileCache.frontmatter.cardColor;
    }

    // Set Width
    // YAML = cardWidth: 123
    if (fileCache.frontmatter?.cardWidth) {
        // Should add Validation
        // If bad value, no card added, multiple errors thrown
        cardWidth = fileCache.frontmatter.cardWidth;
    }

    // Set Height
    // YAML = cardHeight: 123
    if (fileCache.frontmatter?.cardHeight) {
        // Should add Validation
        // If bad value, no card added, multiple errors thrown
        cardHeight = fileCache.frontmatter.cardHeight;
    }

    //Initialize ExcalidrawAutomate
    const ea = ExcalidrawAutomate;
    ea.reset();
    ea.style.fontSize = 9;
    ea.style.textAlign = "center";
    ea.setFontFamily(1);
    ea.setFillStyle(2); //solid fill
    ea.style.strokeColor = "black";
    ea.setView("active");

    //Card
    ea.style.backgroundColor = cardColor;
    const idCard = ea.addRect(0,0,cardWidth,cardHeight);

    //Message
    const cardTitleWrapped = ea.wrapText(cardTitle,15);
    const idText = ea.addText(0,10,cardTitleWrapped);
    const textElement = ea.getElement(idText);
    textElement.x =  (cardWidth - textElement.width)/2; //center text element on card

    //Link to details
    const idDetails = ea.addText(cardWidth-15,cardHeight-15,`[[${cardTitle}|${linkToDetails}]]`);
    const textDetails = ea.getElement(idDetails);
    textDetails.width = 10; //In preview mode the text will be much shorter than the markdown supplied

    //Add to the view
    ea.addToGroup([idCard,idText,idDetails]);
    ea.addElementsToView(true);
  }