@ankhzet/graph 0.1.0 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ankhzet/graph",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "type": "module",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -8,7 +8,7 @@
     "package.json",
     "src/**/*.ts",
     "src/**/*.tsx",
-    "build",
+    "dist",
     "*.md"
   ],
   "exports": {
@@ -30,10 +30,10 @@
     "@pixi/events": "^7.4.3",
     "mobx": "^6.15.4",
     "mobx-react-lite": "^4.1.1",
-    "@ankhzet/eventual": "1.1.0",
-    "@ankhzet/gcl": "1.1.0",
-    "@ankhzet/utils": "1.17.0",
-    "@ankhzet/ui": "0.1.0"
+    "@ankhzet/eventual": "1.2.0",
+    "@ankhzet/ui": "0.2.0",
+    "@ankhzet/utils": "1.18.0",
+    "@ankhzet/gcl": "1.2.0"
   },
   "peerDependencies": {
     "react": "^19.2.6"

package/src/{CircuitGroups.tsx → GraphGroups.tsx}

@@ -1,14 +1,14 @@
 import { useLastCallback } from '@ankhzet/ui';
 import { type TypeId } from './types';
 import { type ItemsGroup, NodeGroups } from './graph';
-import { CircuitNode } from './CircuitNode';
+import { ManagedGraphNode } from './ManagedGraphNode';
 
-export interface CircuitGroupsProps {
-    items: CircuitNode[];
+export interface GraphGroupsProps {
+    items: ManagedGraphNode[];
     onSelect: (ids: TypeId[]) => void;
 }
 
-export const CircuitGroups = ({ onSelect, ...props }: CircuitGroupsProps) => {
+export const GraphGroups = ({ onSelect, ...props }: GraphGroupsProps) => {
     const handleSelect = useLastCallback((group: ItemsGroup<TypeId>) => onSelect(group.ids));
 
     return (
@@ -20,7 +20,7 @@ export const CircuitGroups = ({ onSelect, ...props }: CircuitGroupsProps) => {
     );
 };
 
-const resolver = (node: CircuitNode) => {
+const resolver = (node: ManagedGraphNode) => {
     if (!node.item.isolator) {
         return;
     }

package/src/LoadNodes.ts

@@ -1,8 +1,8 @@
 import type { TypeId } from './types';
 import type { NodeConnection, Position, StoreInterface } from './graph';
-import { CircuitNode } from './CircuitNode';
+import { ManagedGraphNode } from './ManagedGraphNode';
 
-export type GraphListeners<N extends CircuitNode<any>> = {
+export type GraphListeners<N extends ManagedGraphNode<any>> = {
   onEdit: (node: N) => void;
   onConnect: (connection: NodeConnection<TypeId>) => Promise<void>;
   onMove: (node: N, pos: Position) => Promise<void>;
@@ -12,9 +12,9 @@ export type GraphListeners<N extends CircuitNode<any>> = {
   onDelete: (node: N) => Promise<void>;
 };
 
-type SyncConfig<N extends CircuitNode<any>> = { added: N[]; removed: TypeId[] };
+type SyncConfig<N extends ManagedGraphNode<any>> = { added: N[]; removed: TypeId[] };
 
-const connectHandlers = <N extends CircuitNode>(
+const connectHandlers = <N extends ManagedGraphNode>(
   node: N,
   { onEdit, onMove, onConnect, onDelete, onAddPort, onDisconnectPort, onDeletePort }: GraphListeners<N>,
 ) => {
@@ -27,7 +27,7 @@ const connectHandlers = <N extends CircuitNode>(
   node.onDeletePortAction(({ port }) => onDeletePort(node, port));
 };
 
-export const syncNodes = <N extends CircuitNode<any>>(
+export const syncNodes = <N extends ManagedGraphNode<any>>(
   nodes: StoreInterface<N>,
   handlers: GraphListeners<N> | undefined,
   { added, removed }: SyncConfig<N>,

package/src/{CircuitGraph.tsx → ManagedGraph.tsx}

@@ -1,7 +1,7 @@
 import { useLastCallback, handleAsNoop, Styles } from '@ankhzet/ui';
 import { RefObject, useRef, useMemo, useState, PropsWithChildren, useImperativeHandle } from 'react';
-import { CircuitGroups } from './CircuitGroups';
-import type { CircuitNode, IItem } from './CircuitNode';
+import { GraphGroups } from './GraphGroups';
+import type { ManagedGraphNode, IItem } from './ManagedGraphNode';
 import { type GraphHandlers, createGraphHandlers } from './createGraphHandlers';
 import type { GraphAdapter } from './graph';
 import { Store, useStore } from './graph';
@@ -15,37 +15,36 @@ import { Coordinates, GRID_SIZE } from './utils';
 
 export type { GraphHandlers };
 
-export interface CircuitGraphProps<Circuit extends Identifiable, Item extends IItem, DTO> {
-    innerRef?: RefObject<{ graph: GraphAdapter<CircuitNode<Item>>; element?: HTMLDivElement }>;
-    circuit: Circuit;
+export interface IGraph<Item extends IItem> extends Identifiable {
+    items: Item[];
+}
+
+export interface ManagedGraphProps<Graph extends IGraph<Item>, Item extends IItem, DTO> {
+    innerRef?: RefObject<{ graph: GraphAdapter<ManagedGraphNode<Item>>; element?: HTMLDivElement }>;
+    graph: Graph;
     selected?: Item[];
     className?: string;
     handlers?: Partial<GraphHandlers<DTO, Item>>;
-    exportToJson?: (circuit: Circuit) => string;
+    onExport?: (graph: Graph) => string;
 }
 
-export const CircuitGraph = <Circuit extends Identifiable, Item extends IItem, DTO extends GraphDTO>({
+export const ManagedGraph = <Graph extends IGraph<Item>, Item extends IItem, DTO extends GraphDTO>({
     innerRef,
-    circuit,
+    graph,
     selected,
     handlers,
     children,
-    exportToJson,
+    onExport,
     ...rest
-}: PropsWithChildren<CircuitGraphProps<Circuit, Item, DTO>>) => {
-    const graphRef = useRef<{ graph: GraphAdapter<CircuitNode<Item>>; element?: HTMLDivElement }>(null);
+}: PropsWithChildren<ManagedGraphProps<Graph, Item, DTO>>) => {
+    const graphRef = useRef<{ graph: GraphAdapter<ManagedGraphNode<Item>>; element?: HTMLDivElement }>(null);
     const coordinator = useMemo(() => new Coordinates(GRID_SIZE), []);
-    const [nodes, all] = useStore(() => new Store<CircuitNode<Item>>());
-    const [group, setGroup] = useState<TypeId[] | undefined>();
-
     const menu = useGraphMenu(coordinator, handlers?.onCreate);
+    const [nodes, all] = useStore(() => new Store<ManagedGraphNode<Item>>());
+    const [group, setGroup] = useState<TypeId[] | undefined>();
     const { canvas, loader } = createGraphHandlers(coordinator, nodes, handlers);
 
-    const handleExport = useLastCallback(async () => {
-        exportToJson && await navigator.clipboard.writeText(
-            JSON.stringify(exportToJson(circuit), null, 3)
-        );
-    });
+    const handleExport = useLastCallback(() => onExport?.(graph));
 
     useImperativeHandle(innerRef, () => ({
         get graph() {
@@ -57,14 +56,14 @@ export const CircuitGraph = <Circuit extends Identifiable, Item extends IItem, D
     }));
 
     const store = useMemo(() => {
-        const items = new Store<Item>();
+        const items = new Store<Item>(graph.items);
 
         return {
             items,
             get: () => items.all,
             onChange: (cb: () => void) => items.onChange(cb),
         };
-    }, []);
+    }, [graph.items]);
 
     useNodes({
         store,
@@ -81,11 +80,11 @@ export const CircuitGraph = <Circuit extends Identifiable, Item extends IItem, D
             <div style={styles.selector}>
                 {children}
 
-                <CircuitGroups items={all} onSelect={setGroup} />
+                <GraphGroups items={all} onSelect={setGroup} />
 
                 <button onClick={() => setGroup(undefined)}>Update</button>
 
-                {exportToJson && (
+                {onExport && (
                     <button onClick={handleExport}>Export</button>
                 )}
             </div>

package/src/{CircuitNode.ts → ManagedGraphNode.ts}

@@ -71,13 +71,13 @@ export enum NodeStatus {
     Selected = 1 << 4,
 }
 
-type NodeData<Item> = {
+export type NodeData<Item> = {
     item: Item;
     status: NodeStatus;
     progress: number;
 };
 
-enum MenuActions {
+export enum MenuActions {
     EDIT_NODE = 1,
     ADD_PORT = 2,
     DISCONNECT_PORT = 3,
@@ -85,7 +85,7 @@ enum MenuActions {
     DELETE_NODE = 5,
 }
 
-export class CircuitNode<Item extends IItem = IItem>
+export class ManagedGraphNode<Item extends IItem = IItem>
     extends GraphNode<TypeId, NodeData<Item>, Container>
     implements IMenuProvider<MenuAction>
 {

package/src/createGraphHandlers.ts

@@ -1,6 +1,6 @@
 import type { TypeId } from './types';
 import type { GraphListeners } from './LoadNodes';
-import type { CircuitNode, IItem } from './CircuitNode';
+import type { ManagedGraphNode, IItem } from './ManagedGraphNode';
 import type { ConnectionPoint, Coordinator, NodeConnection, Position, StoreInterface } from './graph';
 
 export interface GraphHandlers<DTO, Item> {
@@ -16,7 +16,7 @@ export interface GraphHandlers<DTO, Item> {
   onContextMenu?: (item: Item | null, pos: Position) => void | false;
 }
 
-export const createGraphHandlers = <DTO, Item extends IItem, Node extends CircuitNode<Item>>(
+export const createGraphHandlers = <DTO, Item extends IItem, Node extends ManagedGraphNode<Item>>(
   coordinator: Coordinator,
   nodes: StoreInterface<Node>,
   {

package/src/index.ts

@@ -1,3 +1,5 @@
+export * from './types';
 export * from './graph';
-export * from './CircuitGraph';
+export * from './ManagedGraph';
+export * from './ManagedGraphNode';
 export * from './GraphCanvas';

package/src/useNodeSelection.ts

@@ -2,9 +2,9 @@ import { useRef } from 'react';
 import { matchId } from '@ankhzet/utils';
 import { useIsomorphicLayoutEffect } from '@ankhzet/ui';
 
-import type { CircuitNode, IItem } from './CircuitNode';
+import type { ManagedGraphNode, IItem } from './ManagedGraphNode';
 
-export const useNodeSelection = <Item extends IItem>(nodes: CircuitNode<Item>[], selected?: Item[]) => {
+export const useNodeSelection = <Item extends IItem>(nodes: ManagedGraphNode<Item>[], selected?: Item[]) => {
     const ref = useRef<Item[]>([]);
 
     useIsomorphicLayoutEffect(() => {

package/src/useNodes.tsx

@@ -4,7 +4,7 @@ import { reaction } from 'mobx';
 import { useLastCallback, useSyncStore } from '@ankhzet/ui';
 import type { Coordinator} from './graph';
 import { isEqualIdentifiables } from './graph';
-import { CircuitNode, IItem } from './CircuitNode';
+import { ManagedGraphNode, IItem } from './ManagedGraphNode';
 import { TypeId } from './types';
 
 export const useNodes = <Item extends IItem>({
@@ -16,7 +16,7 @@ export const useNodes = <Item extends IItem>({
 }: {
     store: { get: () => Item[]; onChange: (cb: () => void) => () => void };
     coordinator: Coordinator;
-    sync: (config: { added: CircuitNode<Item>[]; removed: TypeId[] }) => void;
+    sync: (config: { added: ManagedGraphNode<Item>[]; removed: TypeId[] }) => void;
     toTitle: (item: Item) => string;
     onUpdate: () => void;
 }) => {
@@ -45,7 +45,7 @@ export const useNodes = <Item extends IItem>({
     ref.current = sync;
 
     useIsomorphicLayoutEffect(() => {
-        const factory = (item: Item): CircuitNode<Item> => new CircuitNode<Item>({
+        const factory = (item: Item): ManagedGraphNode<Item> => new ManagedGraphNode<Item>({
             finder,
             item,
             coordinator,
@@ -57,7 +57,7 @@ export const useNodes = <Item extends IItem>({
                 (acc: Record<TypeId, boolean>, { id }) => ((acc[id] = true), acc),
                 {}
             );
-            const added = items.filter((processor) => !cache[processor.id]).map(factory);
+            const added = items.filter((item) => !cache[item.id]).map(factory);
             const removed = Object.keys(cache).filter((id) => !finder(id));
 
             if (added.length || removed.length) {

package/src/utils.ts

@@ -1,5 +1,4 @@
-// import { ProcessorType } from '@council/model';
-import type { CircuitNode } from './CircuitNode';
+import type { ManagedGraphNode } from './ManagedGraphNode';
 import type { Coordinator, Position } from './graph';
 
 export const GRID_SIZE = 16;
@@ -50,9 +49,8 @@ export class Coordinates implements Coordinator {
     }
 }
 
-// export const groupResolver = ({ description: { processor } }: CircuitNode) =>
-//     processor.type === ProcessorType.Call || processor.isolator ? processor.title : null;
+export const groupResolver = ({ description: { item } }: ManagedGraphNode) => item.isolator ? item.title : null;
 
 const re = /^signal_?/;
 
-export const isBarrier = ({ description }: CircuitNode<any>) => re.test(description.title);
+export const isBarrier = ({ description }: ManagedGraphNode<any>) => re.test(description.title);