Merge pull request #429 from tone-row/dev

v1.24.0

app/package.json

@@ -1,6 +1,6 @@
 {
  "name": "app",
- "version": "1.23.1",
+ "version": "1.24.0",
  "main": "module/module.js",
  "license": "MIT",
  "scripts": {

app/src/components/GraphContextMenu.module.css

@@ -67,3 +67,12 @@
  transition: none;
  transform: scale(0.9);
 }
+
+.BorderItem {
+ width: 100%;
+ height: 20px;
+ margin-bottom: 16px;
+ border-width: 0;
+ border-bottom-width: 4px;
+ border-bottom-color: black;
+}

app/src/components/GraphContextMenu.tsx

@@ -1,15 +1,22 @@
 import "react-contexify/dist/ReactContexify.css";
 
-import { Trans } from "@lingui/macro";
+import { t, Trans } from "@lingui/macro";
 import { operate } from "graph-selector";
-import { Diamond, Graph, Palette, X } from "phosphor-react";
+import {
+ CircleDashed,
+ Diamond,
+ Graph,
+ Palette,
+ TextT,
+ X,
+} from "phosphor-react";
 import { CSSProperties, memo, ReactNode, useReducer } from "react";
 import { Item, Menu, Separator, Submenu } from "react-contexify";
 import { FiDownload } from "react-icons/fi";
 import { HiOutlineClipboardCopy } from "react-icons/hi";
 
 import { useThemeStore } from "../lib/graphThemes";
-import { shapes } from "../lib/graphUtilityClasses";
+import { borderStyles, shapes } from "../lib/graphUtilityClasses";
 import { useIsFirefox } from "../lib/hooks";
 import { useParser } from "../lib/parsers";
 import { useDoc } from "../lib/prepareChart";
@@ -132,6 +139,34 @@ const WithIcon = memo(function WithIcon({
  );
 });
 
+const sizes: {
+ label: ReactNode;
+ className?: string;
+ size: number;
+}[] = [
+ {
+ label: t`Small`,
+ className: "text-sm",
+ size: -1,
+ },
+ {
+ label: t`Medium`,
+ size: 0,
+ },
+ {
+ label: t`Large`,
+ className: "text-lg",
+ size: 1,
+ },
+ {
+ label: t`Extra Large`,
+ className: "text-xl",
+ size: 2,
+ },
+];
+
+const borders = borderStyles.map((style) => style.selector.slice(5));
+
 function NodeSubmenu() {
  const colors = useThemeStore((theme) => theme.colors);
  const colorNames = Object.keys(colors);
@@ -253,6 +288,83 @@ function NodeSubmenu() {
  </Box>
  </Item>
  </Submenu>
+ <Submenu
+ label={
+ <WithIcon icon={<TextT size={smallIconSize} />}>
+ <Trans>Size</Trans>
+ </WithIcon>
+ }
+ >
+ {sizes.map(({ label, className, size }, index) => (
+ <Item
+ key={index}
+ onClick={() => {
+ let newText = operate(useDoc.getState().text, {
+ lineNumber: active.lineNumber,
+ operation: [
+ "removeClassesFromNode",
+ {
+ classNames: sizes
+ .map((s) => s.className)
+ .filter((c): c is string => {
+ return !!c;
+ }),
+ },
+ ],
+ });
+ if (className)
+ newText = operate(newText, {
+ lineNumber: active.lineNumber,
+ operation: [
+ "addClassesToNode",
+ { classNames: [className] },
+ ],
+ });
+ useDoc.setState({ text: newText });
+ }}
+ >
+ <Type size={size}>{label}</Type>
+ </Item>
+ ))}
+ </Submenu>
+ <Submenu
+ label={
+ <WithIcon icon={<CircleDashed size={smallIconSize} />}>
+ <Trans>Border</Trans>
+ </WithIcon>
+ }
+ >
+ {borders.map((className) => (
+ <Item
+ key={className}
+ onClick={() => {
+ let newText = operate(useDoc.getState().text, {
+ lineNumber: active.lineNumber,
+ operation: ["removeClassesFromNode", { classNames: borders }],
+ });
+ // If the border is solid, we want to remove all borders
+ if (className !== "border-solid")
+ newText = operate(newText, {
+ lineNumber: active.lineNumber,
+ operation: [
+ "addClassesToNode",
+ { classNames: [className] },
+ ],
+ });
+ useDoc.setState({ text: newText });
+ }}
+ >
+ <span
+ className={styles.BorderItem}
+ style={{
+ borderStyle: className.slice(7),
+ borderColor:
+ className === "border-none" ? "transparent" : undefined,
+ }}
+ />
+ </Item>
+ ))}
+ </Submenu>
  </Submenu>
  <Separator />
  </>

app/src/components/GraphFloatingMenu.module.css

@@ -8,6 +8,7 @@
  color: var(--color-foreground);
  border-radius: calc(var(--smallest-border-radius-px) * 1);
  font-size: 0;
+ display: flex;
 }
 
 .CustomIconButton {
@@ -23,11 +24,6 @@
  background-color: var(--color-uiAccent);
 }
 
-.CustomIconButton svg {
- width: 28px;
- height: 28px;
-}
-
 .CustomIconButton:focus {
  box-shadow: none;
 }

app/src/components/GraphFloatingMenu.tsx

@@ -1,9 +1,11 @@
 import { t } from "@lingui/macro";
 import { MagnifyingGlassMinus, MagnifyingGlassPlus } from "phosphor-react";
 import { useCallback } from "react";
+import { FaBomb } from "react-icons/fa";
 import { MdFitScreen } from "react-icons/md";
 
 import { DEFAULT_GRAPH_PADDING } from "../lib/graphOptions";
+import { useUnmountStore } from "../lib/useUnmountStore";
 import styles from "./GraphFloatingMenu.module.css";
 import { Tooltip } from "./Shared";
 
@@ -31,20 +33,29 @@ export function GraphFloatingMenu() {
  return (
  <div className={styles.graphFloatingMenu}>
  <CustomIconButton
- icon={<MagnifyingGlassMinus />}
+ icon={<MagnifyingGlassMinus size={28} />}
  label={t`Zoom Out`}
  onClick={zoomOut}
  />
  <CustomIconButton
- icon={<MagnifyingGlassPlus />}
+ icon={<MagnifyingGlassPlus size={28} />}
  label={t`Zoom In`}
  onClick={zoomIn}
  />
  <CustomIconButton
- icon={<MdFitScreen />}
+ icon={<MdFitScreen size={28} />}
  onClick={fitGraph}
  label={t`Fit Graph`}
  />
+ <CustomIconButton
+ icon={<FaBomb size={22} />}
+ label={t`Reset`}
+ onClick={() => {
+ useUnmountStore.setState({
+ unmount: true,
+ });
+ }}
+ />
  </div>
  );
 }

app/src/components/Main.tsx

@@ -1,6 +1,14 @@
-import { memo, ReactNode, Suspense, useCallback, useState } from "react";
+import {
+ memo,
+ ReactNode,
+ Suspense,
+ useCallback,
+ useEffect,
+ useState,
+} from "react";
 
 import { useFullscreen } from "../lib/hooks";
+import { useUnmountStore } from "../lib/useUnmountStore";
 import { CloneButton } from "./CloneButton";
 import Graph from "./Graph";
 import GraphWrapper from "./GraphWrapper";
@@ -17,6 +25,17 @@ const Main = memo(({ children }: MainProps) => {
  const [shouldResize, triggerResize] = useState(0);
  const trigger = useCallback(() => triggerResize((n) => n + 1), []);
  const isFullscreen = useFullscreen();
+ const unmount = useUnmountStore((state) => state.unmount);
+ useEffect(() => {
+ if (unmount) {
+ // Defer
+ setTimeout(() => {
+ useUnmountStore.setState({
+ unmount: false,
+ });
+ }, 100);
+ }
+ }, [unmount]);
  return (
  <>
  {isFullscreen ? null : (
@@ -25,7 +44,7 @@ const Main = memo(({ children }: MainProps) => {
  </TabPane>
  )}
  <GraphWrapper>
- <Graph shouldResize={shouldResize} />
+ {unmount ? <Loading /> : <Graph shouldResize={shouldResize} />}
  {isFullscreen ? (
  <div className={styles.CopyButtonWrapper}>
  <CloneButton />

app/src/components/SyntaxReference.module.css

@@ -55,6 +55,14 @@
  line-height: 1.4;
 }
 
+.description p code {
+ font-size: 0.9em;
+ font-weight: 700;
+ background: var(--color-nodeHover);
+ padding: 0.2em 0.4em;
+ border-radius: 3px;
+}
+
 .description h1 {
  font-size: 1.333em;
  font-weight: 700;
@@ -99,12 +107,13 @@ h2 {
  border-radius: var(--rad);
  padding: 1rem;
  display: grid;
- place-content: center;
+ place-content: center start;
  text-align: left;
+ overflow: auto;
 }
 
 .codeExampleCode > div {
- white-space: pre-wrap;
+ white-space: pre;
 }
 
 .codeExampleCode [data-highlight] {

app/src/components/SyntaxReference.tsx

@@ -334,6 +334,22 @@ export function SyntaxReference() {
  code={`👋 <span data-highlight>[w=50]</span>\n👋 <span data-highlight>[h=50]</span>\n👋 <span data-highlight>[w=50][h=50]</span>`}
  src="14"
  />
+ <h2>
+ <Trans>Images</Trans>
+ </h2>
+ <p>
+ <Trans>
+ Use the attribute <code>src</code> to set the image of a node.
+ The image will be scaled to fit the node, so you may need to
+ adjust the width and height of the node to get the desired
+ result. Only public images (not blocked by CORS) are
+ supported.
+ </Trans>
+ </p>
+ <CodeExample
+ code={`Flowchart Fun <span data-highlight>[src="https://flowchart.fun/apple-touch-icon.png"]</span>[w=90][h=90]`}
+ src="15"
+ />
  </section>
  </Box>
  <Box

app/src/lib/graphUtilityClasses.ts

@@ -54,29 +54,35 @@ const lineStyles: Stylesheet[] = [
  },
 ];
 
-const borderStyles: Stylesheet[] = [
+export const borderStyles: Stylesheet[] = [
  {
- selector: "node.dashed",
+ selector: "node.border-solid",
+ style: {
+ "border-style": "solid",
+ },
+ },
+ {
+ selector: "node.border-dashed",
  style: {
  "border-style": "dashed",
  },
  },
  {
- selector: "node.dotted",
+ selector: "node.border-dotted",
  style: {
  "border-style": "dotted",
  },
  },
  {
- selector: "node.solid",
+ selector: "node.border-double",
  style: {
- "border-style": "solid",
+ "border-style": "double",
  },
  },
  {
- selector: "node.double",
+ selector: "node.border-none",
  style: {
- "border-style": "double",
+ "border-width": 0,
  },
  },
 ];
@@ -159,4 +165,14 @@ export const importantBaseStyles: Stylesheet[] = [
  height: "data(h)",
  },
  },
+ {
+ selector: "node[src]",
+ style: {
+ "background-image": "data(src)",
+ "background-fit": "cover",
+ "border-width": 0,
+ "text-valign": "bottom",
+ "text-margin-y": 5,
+ },
+ },
 ];

app/src/lib/useUnmountStore.ts

@@ -0,0 +1,11 @@
+import create from "zustand";
+
+/**
+ * This store is used to trigger unmounting of the graph
+ * when the user clicks the reset button
+ */
+export const useUnmountStore = create<{
+ unmount: boolean;
+}>(() => ({
+ unmount: false,
+}));