Api: Kit

Kit

The Kit object that holds the internal state of the kit. It ispassed to custom components and children functions.

Interface

interface Kit {
  // State Accessors
  nodes: NodeType[];
  setNodes: SetStoreFunction<NodeType[]>;

  connections: ConnectionType[];
  setConnections: SetStoreFunction<ConnectionType[]>;

  viewport: () => ViewPort;
  setViewport: Setter<ViewPort>;

  focus: Accessor<boolean>;
  setFocus: Setter<boolean>;

  selectedItems: () => Set<string>;
  setSelectedItems: Setter<Set<string>>;

  activeConnectionDestination: () => { x: number; y: number } | null;
  setActiveConnectionDestination: Setter<{ x: number; y: number } | null>;

  activeConnection: ActiveConnectionType;

  containerRect: DOMRect | null;

  gridSize: () => number;

  // Methods
  updateNodes: () => void;
  updateConnections: () => void;
  updateViewport: () => void;

  randomId: (type:"node"|"connection") => string;
}

Key Properties

nodes / setNodes

Direct access to the nodes array. You can use setNodes to update nodes programmatically.

connections / setConnections

Direct access to the connections array.

viewport / setViewport

Accessor and setter for the viewport state.

selectedItems

A Set containing the IDs of currently selected nodes and connections.

updateNodes, updateConnections, updateViewport

These methods trigger the external on...Change callbacks passed to the SolidKitx component. Call these if you modify the object directly and want to sync with the parent state, it's better to treat the on...Change methods as finalizing / committed updaters.

randomId

It's recommended to use this function to generate new id for both nodes and connection, the reason is a rare case where you might need to tell the difference between the selectedItems in the Kit object, the function selectedItems is a set of ids, where nodes should start with node-, and connection with connection-.

Usage Example

import { Component } from "solid-js";
import { Kit } from "solid-kitx";

const MyComponent:Component<{kit:Kit}> = (props) => {

  const zoomIn = () => {
    const current = props.kit.viewport();
    kit.setViewport({ ...current, zoom: current.zoom + 0.1 });
    kit.updateViewport();
  };

  return <button onClick={zoomIn}>Zoom In</button>;
};