@ankhzet/graph 0.4.0 → 0.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ankhzet/graph",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "type": "module",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -31,9 +31,9 @@
     "mobx": "^6.15.4",
     "mobx-react-lite": "^4.1.1",
     "@ankhzet/eventual": "1.2.0",
-    "@ankhzet/ui": "0.3.0",
     "@ankhzet/gcl": "1.2.0",
-    "@ankhzet/utils": "1.19.0"
+    "@ankhzet/utils": "1.19.0",
+    "@ankhzet/ui": "0.3.0"
   },
   "peerDependencies": {
     "react": "^19.2.6"

package/src/ManagedGraphNode.ts

@@ -239,8 +239,8 @@ export class ManagedGraphNode<Item extends IItem = IItem>
     }
 
     public render(content: Container) {
-        const width = ~~content.width - 1;
-        const height = ~~content.height - 2;
+        const width = content.width - 1;
+        const height = content.height - 1;
 
         if (this.#outline) {
             this.#outline.hotSwap(content);
@@ -251,7 +251,7 @@ export class ManagedGraphNode<Item extends IItem = IItem>
                     height,
                     color: 0x33ffff,
                     lineSize: 1,
-                    radius: 4,
+                    radius: 6,
                 }),
                 content,
             );
@@ -267,7 +267,7 @@ export class ManagedGraphNode<Item extends IItem = IItem>
                 sizeY: height,
                 color: 0x3333ff,
                 lineSize: 3,
-                radius: 4,
+                radius: 6,
             });
         }
 

package/src/graph/NodeGroups.tsx

@@ -16,29 +16,36 @@ export type GroupResolver<T extends GroupableItem<any>> = (node: T) => null | un
 export interface NodeGroupsProps<T extends GroupableItem<any>> extends PropsWithChildren {
     items: T[];
     resolver: GroupResolver<T>;
-    onSelect: (group: ItemsGroup<T['id']>) => void;
+    onSelect: (groups: ItemsGroup<T['id']>[]) => void;
 }
 
-function makeGroups<T extends GroupableItem<any>>(items: T[], resolver: GroupResolver<T>): ItemsGroup<T['id']>[] {
-    const groups: ItemsGroup<T['id']>[] = [];
+function makeGroups<T extends GroupableItem<any>>(items: T[], resolver: GroupResolver<T>): {
+    groups: ItemsGroup<T['id']>[];
+    getAll: () => ItemsGroup<T['id']>[];
+} {
+    const resolved: ItemsGroup<T['id']>[] = [];
 
     for (const node of items) {
         const group = resolver(node);
 
         if (group) {
-            groups.push(group);
+            resolved.push(group);
         }
     }
 
-    return groups
+    const all: ItemsGroup<T['id']> = {
+        value: 'all',
+        ids: items.map(({ id }) => id),
+        label: `All nodes (${items.length})`,
+    };
+    const groups = resolved
         .sort((a, b) => a.label.localeCompare(b.label))
-        .concat([
-            {
-                value: 'all',
-                ids: items.map(({ id }) => id),
-                label: `All nodes (${items.length})`,
-            },
-        ]);
+        .concat([all]);
+
+    return {
+        groups,
+        getAll: () => [all],
+    };
 }
 
 const isSameArray = (a: any[], b: any[]) => {
@@ -57,12 +64,24 @@ const isSameArray = (a: any[], b: any[]) => {
     return true;
 };
 
-const isValue = (value: any) => {
-    const s = String(value);
+const isValue = (values: Array<string | number>) => {
+    const mapped = values.map(String);
 
-    return (item: { value: any }) => String(item.value) === s;
+    return (item: { value: string | number }) => (
+        mapped.includes(String(item.value))
+    );
 };
 
+const isSameSelection = (a: ItemsGroup<any>[], b: ItemsGroup<any>[]) => (
+    a.every((group) => b.some((item) => item.value === group.value)) && isSameArray(
+        a.flatMap(mapIds),
+        b.flatMap(mapIds)
+    )
+);
+
+const mapValue = (item: { value: string | number }) => item.value;
+const mapIds = (item: ItemsGroup<any>) => item.ids;
+
 export function NodeGroups<Item extends GroupableItem<any>>({
     items,
     resolver,
@@ -70,40 +89,39 @@ export function NodeGroups<Item extends GroupableItem<any>>({
     children,
     ...rest
 }: NodeGroupsProps<Item>) {
-    const groups = useMemo(() => makeGroups(items, resolver), [items, resolver]);
-    const [group, setGroup] = useState<ItemsGroup<Item>>(groups.find(({ value }) => value === 'all')!);
+    const { groups, getAll } = useMemo(() => makeGroups(items, resolver), [items, resolver]);
+    const [selected, setSelected] = useState(getAll);
+    const currentValue = useMemo(() => selected.map((group) => String(group.value)), [selected]);
 
-    const handleGroup = useLastCallback(({ target: { value } }: ChangeEvent<HTMLSelectElement>) => {
-        const found = groups.find(isValue(value));
+    const handleGroup = useLastCallback(({ target: { selectedOptions } }: ChangeEvent<HTMLSelectElement>) => {
+        const found = groups.filter(isValue(Array.from(selectedOptions, mapValue)));
 
         if (found) {
-            setGroup(found);
+            setSelected(found);
         }
     });
 
-    useEffect(() => void onSelect(group), [group, onSelect]);
+    useEffect(() => void onSelect(selected), [selected, onSelect]);
 
     useLayoutEffect(() => {
-        const found = groups.find(isValue(group.value));
+        const found = groups.filter(isValue(selected.map(mapValue)));
 
         if (found) {
-            if (found === group) {
+            if (isSameSelection(found, selected)) {
                 return;
             }
 
-            if (found.label !== group.label || !isSameArray(found.ids, group.ids)) {
-                setGroup(found);
-            }
+            setSelected(found);
         } else {
-            setGroup(groups[0]!);
+            setSelected(getAll);
         }
-    }, [groups, group]);
+    }, [groups, getAll, selected]);
 
     return (
         <select
             multiple
             size={groups.length}
-            value={String(group.value)}
+            value={currentValue}
             onChange={handleGroup}
             {...rest}
         >

package/src/graph/nodes/GraphNode.ts

@@ -140,9 +140,9 @@ export abstract class GraphNode<ID, Data = {}, R = any>
     }
 
     move(pos: Position): Position {
-        this.position = pos;
-
-        return this.position;
+        return (
+            this.position = pos
+        );
     }
 
     onConnect(handler: IEventHandler<NodeConnection<ID>>): Disposer {

package/src/graph/render/PIXINode.ts

@@ -14,7 +14,6 @@ import { PIXIText } from './PIXIText';
 export const E_NODE_CONTEXT = Symbol.for('E_NODE_CONTEXT');
 export const E_CONNECTORS_UPDATE = Symbol.for('E_CONNECTORS_UPDATE');
 
-export const NODE_WIDTH = 64;
 export const LANE_WIDTH = 16;
 export const LANE_HEIGHT = 16;
 export const PORT_SIZE = 8;
@@ -48,8 +47,8 @@ export class PIXINode<Node extends GraphNodeInterface<any, any, Container>> exte
     });
 
     readonly #label: PIXIText;
-    #_shape?: Container;
-    #_connectors?: ConnectorPoint<Node>[];
+    #shape?: Container;
+    #connectors?: ConnectorPoint<Node>[];
     #drag = onDragStart(this);
 
     public data: Node;
@@ -79,8 +78,8 @@ export class PIXINode<Node extends GraphNodeInterface<any, any, Container>> exte
             port.dispose();
         }
 
-        if (this.#_connectors) {
-            const remove = this.#_connectors.map(({ port }) => `${this.id}-${port}` as ConnectorId<Node>);
+        if (this.#connectors) {
+            const remove = this.#connectors.map(({ port }) => `${this.id}-${port}` as ConnectorId<Node>);
 
             if (remove.length) {
                 this.dispatchEvent(E_CONNECTORS_UPDATE, {
@@ -89,9 +88,9 @@ export class PIXINode<Node extends GraphNodeInterface<any, any, Container>> exte
             }
         }
 
-        if (this.#_shape) {
-            this.#_shape.removeFromParent();
-            this.#_shape = undefined;
+        if (this.#shape) {
+            this.#shape.removeFromParent();
+            this.#shape = undefined;
         }
 
         super.dispose();
@@ -113,7 +112,7 @@ export class PIXINode<Node extends GraphNodeInterface<any, any, Container>> exte
     }
 
     public get width() {
-        return Math.max(this.data.width, this.#label.width + 2);
+        return Math.max(this.data.width, this.#label.width + 6);
     }
 
     public get height() {
@@ -143,18 +142,19 @@ export class PIXINode<Node extends GraphNodeInterface<any, any, Container>> exte
     }
 
     public get connectors(): ConnectorPoint<Node>[] {
-        if (this.#_connectors) {
-            return this.#_connectors;
+        if (this.#connectors) {
+            return this.#connectors;
         }
 
-        const connectors: ConnectorPoint<Node>[] = [];
+        const width = this.width;
+        this.#connectors = [];
         let idx1 = 1;
         let idx2 = 1;
 
         for (const joint of this.data.inputs) {
             const offset = { x: LANE_WIDTH / 2, y: idx1 * LANE_HEIGHT + LANE_HEIGHT / 2 };
             const pos = addOffset(this.data.position, offset);
-            connectors.push({
+            this.#connectors.push({
                 parent: this.data.id,
                 port: joint.port,
                 name: joint.name,
@@ -168,19 +168,19 @@ export class PIXINode<Node extends GraphNodeInterface<any, any, Container>> exte
         }
 
         for (const joint of this.data.outputs) {
-            connectors.push({
+            this.#connectors.push({
                 parent: this.data.id,
                 port: joint.port,
                 name: joint.name,
                 nodes: joint.nodes,
                 input: false,
-                x: NODE_WIDTH - LANE_WIDTH / 2,
+                x: width - LANE_WIDTH / 2,
                 y: idx2 * LANE_HEIGHT + LANE_HEIGHT / 2,
             });
             idx2++;
         }
 
-        return (this.#_connectors = connectors);
+        return this.#connectors;
     }
 
     public placeConnectors(recursive = true) {
@@ -231,8 +231,8 @@ export class PIXINode<Node extends GraphNodeInterface<any, any, Container>> exte
     }
 
     public get renderable(): Container {
-        if (this.#_shape) {
-            return this.#_shape;
+        if (this.#shape) {
+            return this.#shape;
         }
 
         const width = this.width;
@@ -289,7 +289,7 @@ export class PIXINode<Node extends GraphNodeInterface<any, any, Container>> exte
         base.x = this.data.position.x;
         base.y = this.data.position.y;
 
-        return (this.#_shape = base);
+        return (this.#shape = base);
     }
 
     public makeRoundRect({ stroke, fill, x = 0, y = 0, width, height, thickness = 1, radius = 4 }: RoundRectStyle) {