Add new templates

app/scripts/screenshot-templates.mjs

@@ -3,6 +3,7 @@ import fs from "fs";
 import { chromium } from "playwright";
 import { exec } from "child_process";
 import util from "util";
+import { writeFile } from "fs/promises";
 
 const execAsync = util.promisify(exec);
 
@@ -14,6 +15,9 @@ const __dirname = path.dirname(__filename);
 const screenshotsDir = path.join(__dirname, "../public/template-screenshots");
 
 async function main() {
+ // eslint-disable-next-line no-undef
+ const filter = process.argv[2]; // Get the filter from the command line arguments
+
  if (!fs.existsSync(screenshotsDir)) {
  fs.mkdirSync(screenshotsDir, { recursive: true });
  console.log("Created folder: ", screenshotsDir);
@@ -23,9 +27,23 @@ async function main() {
  const templates = fs
  .readdirSync(path.join(__dirname, "../src/lib/templates"))
  // remove templates.ts
- .filter((template) => template !== "templates.ts")
+ .filter((template) => template !== "index.ts")
  .map((template) => template.replace("-template.ts", ""));
 
+ // Apply the filter if provided
+ const filteredTemplates = filter
+ ? templates.filter((template) => template.includes(filter))
+ : templates;
+
+ await screenshotTemplates(filteredTemplates);
+ await createThumbnails(filteredTemplates);
+ await createTemplatesIndex(templates); // Always create index with all templates
+}
+
+/**
+ * @param {string[]} templates
+ */
+async function screenshotTemplates(templates) {
  // Use Playwright to take a screenshot
  const browser = await chromium.launch();
 
@@ -34,9 +52,6 @@ async function main() {
  }
 
  await browser.close();
-
- // Create smaller versions of the screenshots
- await createThumbnails();
 }
 
 /**
@@ -75,6 +90,11 @@ async function takeScreenshot(browser, template) {
  // go to the full page link
  await page.goto(screenshotLink);
 
+ // Wait for element to be visible
+ await page.waitForSelector('[data-flowchart-fun-canvas="true"]', {
+ state: "visible",
+ });
+
  // Capture only the element with data-flowchart-fun-canvas="true"
  const element = await page.$('[data-flowchart-fun-canvas="true"]');
  await element.screenshot({
@@ -88,12 +108,15 @@ async function takeScreenshot(browser, template) {
  return screenshotLink;
 }
 
-async function createThumbnails() {
+async function createThumbnails(templates) {
  console.log("Creating thumbnails...");
  const files = fs.readdirSync(screenshotsDir);
 
  for (const file of files) {
- if (file.endsWith(".png")) {
+ if (
+ file.endsWith(".png") &&
+ templates.some((template) => file.startsWith(template))
+ ) {
  const inputPath = path.join(screenshotsDir, file);
  const outputPath = path.join(screenshotsDir, `thumb_${file}`);
 
@@ -114,4 +137,21 @@ async function createThumbnails() {
  }
 }
 
+async function createTemplatesIndex(templates) {
+ console.log("Creating templates index...");
+ const indexPath = path.join(__dirname, "../src/lib/templates/index.ts");
+ const indexContent = `export const templates = ${JSON.stringify(
+ templates,
+ null,
+ 2
+ )};`;
+
+ try {
+ await writeFile(indexPath, indexContent, "utf8");
+ console.log("✅ Created templates index file");
+ } catch (error) {
+ console.error("Error creating templates index file:", error);
+ }
+}
+
 main().catch(console.error);

app/src/components/Graph.tsx

@@ -37,6 +37,7 @@ import { GRAPH_CONTEXT_MENU_ID, GraphContextMenu } from "./GraphContextMenu";
 import classNames from "classnames";
 import { getThemeEditor, toTheme, useBackground } from "../lib/toTheme";
 import equal from "fast-deep-equal";
+import { runMappers } from "../lib/runMappers";
 declare global {
  interface Window {
  __cy?: cytoscape.Core;
@@ -389,6 +390,7 @@ function getGraphUpdater({
 
  // Update
  cy.current.json({ elements, style });
+ runMappers(cy.current);
 
  // Determine whether to fit
  const autoFit = useGraphStore.getState().autoFit;

app/src/components/LoadTemplateDialog.tsx

@@ -4,7 +4,7 @@ import { EditorActionTextButton } from "../ui/EditorActionTextButton";
 import { Check, WarningCircle, ArrowLeft } from "phosphor-react";
 import { PiShapesDuotone } from "react-icons/pi";
 import { Trans } from "@lingui/macro";
-import { templates } from "../lib/templates/templates";
+import { templates } from "../lib/templates";
 import * as Checkbox from "@radix-ui/react-checkbox";
 import { useCallback, useState } from "react";
 import { Button2 } from "../ui/Shared";
@@ -24,10 +24,7 @@ function getContentInitialValue() {
 
 export function LoadTemplateDialog() {
  const [open, setOpen] = useState(false);
- const [template, setTemplate] = useState<
- null | typeof templates[number]["key"]
- >(null);
- const templateData = templates.find((t) => t.key === template);
+ const [template, setTemplate] = useState<null | string>(null);
  const [layout, setLayout] = useState(true);
  // Whether to load the content or not
  const [replaceContent, setReplaceContent] = useState(getContentInitialValue);
@@ -85,8 +82,11 @@ export function LoadTemplateDialog() {
  </Dialog.Title>
  <RequestTemplate />
  </div>
- <Dialog.Description asChild>
- {templateData ? (
+ <Dialog.Description
+ asChild
+ className="content-start grid overflow-hidden"
+ >
+ {template ? (
  <div className="grid gap-2 h-full grid-rows-[auto_minmax(0,1fr)]">
  <button
  onClick={() => {
@@ -100,8 +100,8 @@ export function LoadTemplateDialog() {
  <div className="grid sm:grid-cols-[2fr,1fr] gap-6">
  <div className="h-full w-full overflow-hidden rounded-lg shadow-md">
  <img
- src={`/template-screenshots/${templateData.key}.png`}
- alt={templateData.key}
+ src={`/template-screenshots/${template}.png`}
+ alt={template}
  className="rounded w-full h-full object-contain object-center"
  />
  </div>
@@ -141,32 +141,34 @@ export function LoadTemplateDialog() {
  onClick={load}
  className="mt-2"
  data-session-activity="Load Template: Load"
- data-template={templateData.key}
+ data-template={template}
  >
  <Trans>Load</Trans>
  </Button2>
  </div>
  </div>
  </div>
  ) : (
- <div
- className="grid gap-3 grid-cols-2 md:grid-cols-3"
- aria-label="Templates"
- >
- {templates.map((template) => (
- <button
- key={template.key}
- onClick={() => setTemplate(template.key)}
- className="rounded overflow-hidden md:h-[280px] shadow-sm opacity-70 hover:opacity-100"
- >
- <img
- key={template.key}
- src={`/template-screenshots/thumb_${template.key}.png`}
- className="rounded-lg object-contain object-center aspect-square"
- alt={template.key}
- />
- </button>
- ))}
+ <div className="h-full overflow-y-auto">
+ <div
+ className="grid gap-1 grid-cols-2 md:grid-cols-3"
+ aria-label="Templates"
+ >
+ {templates.map((template) => (
+ <button
+ key={template}
+ onClick={() => setTemplate(template)}
+ className="overflow-hidden shadow-sm opacity-70 hover:opacity-100 aspect-square"
+ >
+ <img
+ key={template}
+ src={`/template-screenshots/thumb_${template}.png`}
+ className="rounded object-contain object-center w-full h-full"
+ alt={template}
+ />
+ </button>
+ ))}
+ </div>
  </div>
  )}
  </Dialog.Description>

app/src/lib/loadTemplate.ts

@@ -1,7 +1,7 @@
 import { useEffect } from "react";
 import type { FFTheme } from "./FFTheme";
 import { prepareChart } from "./prepareChart/prepareChart";
-import { templates } from "./templates/templates";
+import { templates } from "./templates";
 import { useDoc } from "./useDoc";
 import { mountGraph, unmountGraph } from "./useUnmountStore";
 
@@ -19,8 +19,7 @@ export async function loadTemplate(
 ) {
  if (!template) return;
 
- const templateData = templates.find((t) => t.key === template);
- if (!templateData) return;
+ if (!templates.includes(template)) return;
 
  const importTemplate = await import(
  `../lib/templates/${template}-template.ts`

app/src/lib/runMappers.ts

@@ -0,0 +1,17 @@
+import type { Core } from "cytoscape";
+
+/**
+ * We use mappers to transform certain data-attributes
+ * into certain styles. They're shared between all the
+ * templates.
+ */
+export function runMappers(cy: Core) {
+ cy.style()
+ .selector("node[icon]")
+ .style({
+ "background-image": (ele: any) => {
+ const icon = ele.data("icon");
+ return `https://raw.githubusercontent.com/google/material-design-icons/master/src/${icon}/materialicons/24px.svg`;
+ },
+ });
+}