Next

.changeset/foo-bar.md

@@ -0,0 +1,5 @@
+---
+"@tokens-studio/graph-editor": major
+---
+
+Editor now accepts a `nodeLoader` which handles loading nodes instead of a static lookup

.changeset/giant-steaks-jump.md

@@ -0,0 +1,6 @@
+---
+"@tokens-studio/graph-editor": major
+---
+
+Removed `initialGraph` from the editor. This can now be passed through with the Frame.graph option instead  
+

.changeset/light-avocados-hammer.md

@@ -0,0 +1,5 @@
+---
+"@tokens-studio/graph-engine": major
+---
+
+The engine now allows for async node loading during deserialization using a nodeLoader instead of a static lookup

.changeset/wild-cars-kiss.md

@@ -0,0 +1,16 @@
+---
+"@tokens-studio/graph-editor": major
+---
+
+Removes the External Loader from the editor as this will likely be scoped per Frame
+
+You should instead attach your external loader directly to the graph you created when creating a frame
+
+```ts
+const graph = new Graph();
+
+graph.externaloLoader = myExternalLoader;
+
+const Frame = new Frame({ graph , ...etc})
+
+```

packages/graph-editor/package.json

@@ -34,6 +34,7 @@
     "format": "npm run format:eslint && npm run format:prettier",
     "format:eslint": "eslint . --fix",
     "format:prettier": "prettier \"**/*.{tsx,ts,js,md,json}\" --write",
+    "test": "vitest run",
     "test:e2e": "cypress run",
     "test:e2e:manual": "cypress open",
     "lint": "npm run lint:prettier && npm run lint:eslint",
@@ -121,6 +122,7 @@
     "cypress": "^13.9.0",
     "cypress-react-selector": "^3.0.0",
     "glob": "^11.0.0",
+    "happy-dom": "^16.3.0",
     "postcss": "^8.4.47",
     "postcss-cli": "^11.0.0",
     "postcss-css-variables": "^0.19.0",

packages/graph-editor/readme.md

@@ -83,3 +83,7 @@ In the example above, we use the useRef hook to create a reference to the Editor
 ## Development
 
 We need to force the cypress react selector to use a version of `resq` that supports 18.2.0. This is done through resolutions and by manually adding it as a dev dependency
+
+## Notes
+
+This project uses [CSS modules](https://github.com/css-modules/css-modules) to handle encapsulating css. We distribute this in the dist with imports to `*.module.css` files still remaining without transformation to the css files. We assume that the implementing system will handle this transformation and export of the mangled css classnames if needed.

packages/graph-editor/src/components/commandPalette/index.tsx

@@ -13,18 +13,19 @@ import { observer } from 'mobx-react-lite';
 import { showNodesCmdPaletteSelector } from '@/redux/selectors/ui.js';
 import { useDispatch, useSelector } from 'react-redux';
 import { useSelectAddedNodes } from '@/hooks/useSelectAddedNodes.js';
-import React from 'react';
+import React, { useCallback } from 'react';
 import Search from '@tokens-studio/icons/Search.js';
 import styles from './index.module.css';
 
 export interface ICommandMenu {
   items: DropPanelStore;
-  handleSelectNewNodeType: (node: NodeRequest) =>
+  handleSelectNewNodeType: (node: NodeRequest) => Promise<
     | {
         graphNode: Node;
         flowNode: ReactFlowNode;
       }
-    | undefined;
+    | undefined
+  >;
 }
 
 const CommandItem = observer(
@@ -80,7 +81,10 @@ const CommandMenuGroup = observer(
   },
 );
 
-const CommandMenu = ({ items, handleSelectNewNodeType }: ICommandMenu) => {
+export const CommandMenu = ({
+  items,
+  handleSelectNewNodeType,
+}: ICommandMenu) => {
   const showNodesCmdPalette = useSelector(showNodesCmdPaletteSelector);
   const dispatch = useDispatch();
   const cursorPositionRef = React.useRef<{ x: number; y: number }>({
@@ -91,8 +95,8 @@ const CommandMenu = ({ items, handleSelectNewNodeType }: ICommandMenu) => {
   const reactflow = useReactFlow();
   const selectAddedNodes = useSelectAddedNodes();
 
-  const handleSelectItem = (item) => {
-    const newNode = handleSelectNewNodeType({
+  const handleSelectItem = async (item) => {
+    const newNode = await handleSelectNewNodeType({
       position: reactflow.screenToFlowPosition(cursorPositionRef.current),
       ...item,
     });
@@ -132,13 +136,16 @@ const CommandMenu = ({ items, handleSelectNewNodeType }: ICommandMenu) => {
   }, [dispatch.ui, showNodesCmdPalette]);
 
   // Close the menu when Escape key is pressed inside the input
-  const handleKeyDown = (e) => {
-    if (e.key === 'Escape') {
-      e.preventDefault();
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (e.key === 'Escape') {
+        e.preventDefault();
 
-      dispatch.ui.setShowNodesCmdPalette(false);
-    }
-  };
+        dispatch.ui.setShowNodesCmdPalette(false);
+      }
+    },
+    [dispatch.ui],
+  );
 
   return (
     <Command.Dialog
@@ -216,5 +223,3 @@ function NodePreview({ title, description, docs }) {
     </Stack>
   );
 }
-
-export { CommandMenu };

packages/graph-editor/src/components/contextMenus/paneContextMenu.tsx

@@ -1,13 +1,12 @@
 import { ContextMenuItem } from './ContextMenuStyles.js';
 import { Menu, Separator } from 'react-contexify';
 import { clear } from '../../editor/actions/clear.js';
-import { showGrid, snapGrid } from '@/redux/selectors/settings.js';
 import { useAction } from '@/editor/actions/provider.js';
 import { useAutoLayout } from '../../editor/hooks/useAutolayout.js';
 import { useDispatch } from '@/hooks/index.js';
+import { useFrame } from '@/system/frame/hook.js';
 import { useLocalGraph } from '@/context/graph.js';
 import { useReactFlow } from 'reactflow';
-import { useSelector } from 'react-redux';
 import React, { useCallback } from 'react';
 
 export interface IPaneContextMenu<T = unknown> {
@@ -17,8 +16,8 @@ export interface IPaneContextMenu<T = unknown> {
 
 export const PaneContextMenu = <T = unknown,>({ id }: IPaneContextMenu<T>) => {
   const reactFlowInstance = useReactFlow();
-  const showGridValue = useSelector(showGrid);
-  const snapGridValue = useSelector(snapGrid);
+
+  const frame = useFrame();
   const dispatch = useDispatch();
   const graph = useLocalGraph();
   const createNode = useAction('createNode');
@@ -51,12 +50,12 @@ export const PaneContextMenu = <T = unknown,>({ id }: IPaneContextMenu<T>) => {
   }, [reactFlowInstance]);
 
   const setShowGrid = useCallback(() => {
-    dispatch.settings.setShowGrid(!showGridValue);
-  }, [dispatch.settings, showGridValue]);
+    frame.settings.setShowGrid(!frame.settings.showGrid);
+  }, [frame.settings]);
 
   const setSnapGrid = useCallback(() => {
-    dispatch.settings.setSnapGrid(!snapGridValue);
-  }, [dispatch.settings, snapGridValue]);
+    frame.settings.setSnapGrid(!frame.settings.snapGrid);
+  }, [frame.settings]);
 
   const clearCallback = useCallback(() => {
     clear(reactFlowInstance, graph);
@@ -70,7 +69,7 @@ export const PaneContextMenu = <T = unknown,>({ id }: IPaneContextMenu<T>) => {
       <Separator />
       <ContextMenuItem onClick={layout}>Apply Layout</ContextMenuItem>
       <ContextMenuItem onClick={setShowGrid}>
-        {showGridValue ? 'Hide' : 'Show'} Grid
+        {frame.settings.showGrid ? 'Hide' : 'Show'} Grid
       </ContextMenuItem>
       <ContextMenuItem onClick={recenter}>Recenter</ContextMenuItem>
       <Separator />

packages/graph-editor/src/components/contextMenus/selectionContextMenu.tsx

@@ -74,7 +74,7 @@ export const SelectionContextMenu = ({ id, nodes }: INodeContextMenuProps) => {
     });
   }, [nodes, reactFlowInstance, selectedNodeIds, store]);
 
-  const onCreateSubgraph = useCallback(() => {
+  const onCreateSubgraph = useCallback(async () => {
     //We need to work out which nodes do not have parents in the selection
 
     const lookup = new Set(selectedNodeIds);
@@ -96,7 +96,7 @@ export const SelectionContextMenu = ({ id, nodes }: INodeContextMenuProps) => {
       y: position.y / selectedNodes.length,
     };
 
-    const nodes = createNode({
+    const nodes = await createNode({
       type: 'studio.tokens.generic.subgraph',
       position: finalPosition,
     });

packages/graph-editor/src/components/controls/array.tsx

@@ -21,10 +21,8 @@ import {
 import { ColorPickerPopover } from '../colorPicker/index.js';
 import { IField } from './interface.js';
 import { JSONTree } from 'react-json-tree';
-import { delayedUpdateSelector } from '@/redux/selectors/index.js';
 import { observer } from 'mobx-react-lite';
 import { toJS } from 'mobx';
-import { useSelector } from 'react-redux';
 import FloppyDisk from '@tokens-studio/icons/FloppyDisk.js';
 import Minus from '@tokens-studio/icons/Minus.js';
 import Plus from '@tokens-studio/icons/Plus.js';
@@ -40,7 +38,7 @@ const NEW_ITEM_DEFAULTS = {
   },
 };
 
-export const ArrayField = observer(({ port, readOnly }: IField) => {
+export const ArrayField = observer(({ port, readOnly, settings }: IField) => {
   const [value, setValue] = React.useState(port.value);
   const [selectItemsType, setSelectItemsType] = React.useState(
     port.type.items.$id,
@@ -49,7 +47,6 @@ export const ArrayField = observer(({ port, readOnly }: IField) => {
   const [autofocusIndex, setAutofocusIndex] = React.useState<number | null>(
     null,
   );
-  const useDelayed = useSelector(delayedUpdateSelector);
 
   React.useEffect(() => {
     setValue(port.value);
@@ -82,13 +79,13 @@ export const ArrayField = observer(({ port, readOnly }: IField) => {
 
       setValue(newValueArray);
 
-      if (useDelayed) {
+      if (settings.delayedUpdate) {
         return;
       }
 
       (port as Input).setValue(newValueArray);
     },
-    [port, useDelayed, value],
+    [port, settings.delayedUpdate, value],
   );
 
   const onColorChange = useCallback(
@@ -106,12 +103,12 @@ export const ArrayField = observer(({ port, readOnly }: IField) => {
 
     setAutofocusIndex(newValueArray.length - 1);
 
-    if (useDelayed) {
+    if (settings.delayedUpdate) {
       return;
     }
 
     (port as Input).setValue(newValueArray);
-  }, [itemsType, port, useDelayed, value]);
+  }, [itemsType, port, settings.delayedUpdate, value]);
 
   const removeItem = useCallback(
     (index: number) => {
@@ -121,13 +118,13 @@ export const ArrayField = observer(({ port, readOnly }: IField) => {
       setValue(newValueArray);
       setAutofocusIndex(null);
 
-      if (useDelayed) {
+      if (settings.delayedUpdate) {
         return;
       }
 
       (port as Input).setValue(newValueArray);
     },
-    [port, useDelayed, value],
+    [port, settings.delayedUpdate, value],
   );
 
   const itemList = React.useMemo(() => {
@@ -255,7 +252,7 @@ export const ArrayField = observer(({ port, readOnly }: IField) => {
           onClick={addItem}
         />
       </Stack>
-      {useDelayed && (
+      {settings.delayedUpdate && (
         <Stack justify="end">
           <IconButton
             icon={<FloppyDisk />}

packages/graph-editor/src/components/controls/color.tsx

@@ -2,15 +2,12 @@ import { ColorPickerPopover } from '../colorPicker/index.js';
 import { IField } from './interface.js';
 import { IconButton, Stack, Text } from '@tokens-studio/ui';
 import { Input, hexToColor, toColor, toHex } from '@tokens-studio/graph-engine';
-import { delayedUpdateSelector } from '@/redux/selectors/index.js';
 import { observer } from 'mobx-react-lite';
-import { useSelector } from 'react-redux';
 import FloppyDisk from '@tokens-studio/icons/FloppyDisk.js';
 import React, { useCallback } from 'react';
 import styles from './color.module.css';
 
-export const ColorField = observer(({ port, readOnly }: IField) => {
-  const useDelayed = useSelector(delayedUpdateSelector);
+export const ColorField = observer(({ port, readOnly, settings }: IField) => {
   const [val, setVal] = React.useState('');
 
   React.useEffect(() => {
@@ -33,14 +30,14 @@ export const ColorField = observer(({ port, readOnly }: IField) => {
         col = e.target.value;
       }
       setVal(col);
-      if (useDelayed) {
+      if (settings.delayedUpdate) {
         return;
       }
 
       //We need to convert from hex
       (port as Input).setValue(hexToColor(col));
     },
-    [port, useDelayed],
+    [port, settings.delayedUpdate],
   );
 
   if (readOnly) {
@@ -62,7 +59,7 @@ export const ColorField = observer(({ port, readOnly }: IField) => {
     <Stack direction="row" justify="between" align="center" gap={2}>
       <ColorPickerPopover value={val} onChange={onChange} />
       <Text muted>{val}</Text>
-      {useDelayed && (
+      {settings.delayedUpdate && (
         <IconButton
           icon={<FloppyDisk />}
           onClick={() => (port as Input).setValue(val)}

packages/graph-editor/src/components/controls/curve.tsx

@@ -4,21 +4,23 @@ import { Input } from '@tokens-studio/graph-engine';
 import { observer } from 'mobx-react-lite';
 import React from 'react';
 
-export const CurveField = observer(({ port, readOnly }: IField) => {
-  const onChange = (index: number, value: number[]) => {
-    if (!readOnly) {
-      const points = [...port.value.curves[0].points];
-      points[index] = value;
-      (port as Input).setValue({
-        curves: [
-          {
-            points,
-          },
-        ],
-      });
-    }
-  };
-  return (
-    <CurveEditor points={port.value.curves[0].points} onChange={onChange} />
-  );
-});
+export const CurveField = observer(
+  ({ port, readOnly }: Omit<IField, 'settings'>) => {
+    const onChange = (index: number, value: number[]) => {
+      if (!readOnly) {
+        const points = [...port.value.curves[0].points];
+        points[index] = value;
+        (port as Input).setValue({
+          curves: [
+            {
+              points,
+            },
+          ],
+        });
+      }
+    };
+    return (
+      <CurveEditor points={port.value.curves[0].points} onChange={onChange} />
+    );
+  },
+);

packages/graph-editor/src/components/controls/interface.tsx

@@ -1,5 +1,7 @@
 import { Port } from '@tokens-studio/graph-engine';
+import { SystemSettings } from '@/system/frame/settings.js';
 export interface IField {
   port: Port;
   readOnly?: boolean;
+  settings: SystemSettings;
 }