@ankhzet/graph 0.1.0 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @ankhzet/graph
 
+## 0.3.0
+
+### Minor Changes
+
+- Expose types and fix circuit references
+
+## 0.2.0
+
+### Minor Changes
+
+- Fix release
+
+### Patch Changes
+
+- Updated dependencies
+  - @ankhzet/eventual@1.2.0
+  - @ankhzet/utils@1.18.0
+  - @ankhzet/gcl@1.2.0
+  - @ankhzet/ui@0.2.0
+
 ## 0.1.0
 
 ### Minor Changes

package/dist/index.d.ts

@@ -0,0 +1,676 @@
+import { BitmapFont } from '@pixi/text-bitmap';
+import { ColorSource } from '@pixi/core';
+import { Constructor } from '@ankhzet/utils';
+import { Container } from '@pixi/display';
+import { DisplayObject } from '@pixi/display';
+import { DisposableEventSource } from '@ankhzet/gcl';
+import { Disposer } from '@ankhzet/gcl';
+import { ForwardRefExoticComponent } from 'react';
+import { Graphics } from '@pixi/graphics';
+import { IBitmapFontOptions } from '@pixi/text-bitmap';
+import { IBitmapTextStyle } from '@pixi/text-bitmap';
+import { IEventHandler } from '@ankhzet/eventual';
+import { ITextStyle } from '@pixi/text';
+import { JSX } from 'react/jsx-runtime';
+import { MouseEvent as MouseEvent_2 } from 'react';
+import { PropsWithChildren } from 'react';
+import { Ref } from 'react';
+import { RefAttributes } from 'react';
+import { RefObject } from 'react';
+import { TextStyle } from '@pixi/text';
+import { TouchEvent as TouchEvent_2 } from 'react';
+
+declare class Batch extends DisposableEventSource {
+    private counter;
+    constructor();
+    batch(cb: () => void): void;
+    begin(): void;
+    end(): void;
+    and(handler: (batch: this) => void): Disposer;
+}
+
+export declare type ClickHandler = (offset: {
+    x: number;
+    y: number;
+}, e: MouseEvent_2) => void;
+
+export declare class ClusteredLayout<Node extends GraphNodeInterface> extends NodesGraph<Node> implements Layout<Node> {
+    private cache;
+    private hash;
+    get center(): Position;
+    private splice;
+    private align;
+    spread(layer: number, nodes: Node['id'][]): number;
+}
+
+export declare type ConnectionPoint<Node, Port = Node> = {
+    node: Node;
+    port: Port;
+};
+
+export declare type Connector<ID> = {
+    addTarget(node: ID, port: ID): Line;
+    removeTarget(node: ID, port: ID): void;
+    moveTargetTo(node: ID, port: ID, pos: Position): boolean;
+    move(pos: Position): boolean;
+};
+
+export declare type ConnectorId<Node extends GraphNodeInterface> = Node['id'] extends string | number ? `${Node['id']}-${Node['id']}` : never;
+
+export declare type ConnectorPoint<Node extends GraphNodeInterface, Input extends true | false | void = void> = Position & {
+    parent: Node['id'];
+    port: Node['id'];
+    input: boolean;
+    name: string;
+    nodes: ConnectionPoint<Node['id']>[];
+} & (Input extends true ? {
+    connector: Connector<Node['id']>;
+} : Input extends false ? {
+    connector: never;
+} : {
+    connector?: Connector<Node['id']>;
+});
+
+export declare type Coordinator = {
+    grid: number;
+    gridSize: Position;
+    sizes: {
+        grid: Position;
+        port: number;
+        lane: number;
+        space: number;
+    };
+    snap(value: number): number;
+    toGraph: (pos: Position) => Position;
+    toData: (pos: Position) => Position;
+};
+
+export declare type DragHandler = (offset: {
+    x: number;
+    y: number;
+}) => void;
+
+export declare type DragHandlers = {
+    position: {
+        x: number;
+        y: number;
+    };
+    onPointer: DragHandler;
+    onClick: ClickHandler;
+    onUp: DragHandler;
+    onDrag: DragHandler;
+    onContext: DragHandler;
+};
+
+export declare class EdgesSort {
+    sort(dependants: Record<string, string[]>, dependencies: Record<string, string[]>, layers: string[][]): void;
+    private mutate;
+}
+
+export declare const getChannelName: (name: string) => string;
+
+export declare class GraphAdapter<Node extends GraphNodeInterface> extends Batch implements Iterable<Node> {
+    private readonly renderer;
+    private nodes;
+    constructor(config: RendererConfig);
+    [Symbol.iterator](): ArrayIterator<Node>;
+    clear(): void;
+    update(): void;
+    moveToForeground(node: Node): void;
+    hitTest(pos: Position): undefined | HitTestResult<Node>;
+    getNodePos(node: Node): Position;
+    moveNodeTo(node: Node, pos: Position): void;
+    addNode(node: Node): Node;
+    removeNode(node: Node): Node;
+    get capturing(): Node | undefined;
+    releaseNode(): void;
+    get translation(): Position;
+    translate(pos: Position): void;
+    resize(width: number, height: number): void;
+    fromGlobal(pos: Position): Position;
+    fromLocal(pos: Position): Position;
+    mount(element: HTMLElement, options: RendererOptions): () => void;
+    unmount(): void;
+    layout(): void;
+}
+
+export declare type GraphBarrier<N extends GraphNodeInterface> = (node: N) => boolean;
+
+export declare function GraphCanvas<Node extends GraphNodeInterface<ID, Data, Render>, ID = any, Data = any, Render = any>({ innerRef, nodes, subset, coordinator, menu, onSelectNode, onContextMenu, ...rest }: GraphNodeProps<Node>): JSX.Element;
+
+declare interface GraphDTO {
+    title: string;
+    x: number;
+    y: number;
+    args?: Partial<Record<string, string>>;
+}
+
+export declare interface GraphHandlers<DTO, Item> {
+    onCreate: (data: DTO) => Promise<Item>;
+    onEdit: (item: Item) => void;
+    onAddPort: (item: Item, input: boolean) => Promise<void>;
+    onDisconnectPort: (item: Item, portId: TypeId) => Promise<void>;
+    onDeletePort: (item: Item, portId: TypeId) => Promise<void>;
+    onDelete: (item: Item) => Promise<void>;
+    onMove: (item: Item, pos: Position) => Promise<void>;
+    onConnect: (connection: NodeConnection<Item, TypeId>) => Promise<void>;
+    onSelect?: (item: Item | null, pos: Position) => void | false;
+    onContextMenu?: (item: Item | null, pos: Position) => void | false;
+}
+
+export declare abstract class GraphNode<ID, Data = {}, R = any> extends DisposableEventSource implements GraphNodeInterface<ID, Data, R> {
+    #private;
+    readonly id: ID;
+    readonly description: GraphNodeDescriptor<Data>;
+    readonly inputs: NodeJoints<ID>;
+    readonly outputs: NodeJoints<ID>;
+    readonly coordinator: Coordinator;
+    constructor({ id, coordinator, inputs, outputs, ...description }: GraphNodeDescriptor<Data> & {
+        id: ID;
+        inputs?: NodeJoint<ID>[];
+        outputs?: NodeJoint<ID>[];
+    });
+    abstract render(content: R): R;
+    abstract getMenu(tag: any, pos: Position): IMenu<any> | undefined;
+    abstract handleMenu(data: any): void | false;
+    get title(): string;
+    get width(): number;
+    get height(): number;
+    get position(): Position;
+    set position({ x, y }: Position);
+    isInput(portId: ID, nodeId: ID, nodePortId: ID): boolean;
+    isOutput(portId: ID, nodeId: ID, nodePortId: ID): boolean;
+    isConnected(port: ID, input: boolean, to: ConnectionPoint<ID>): boolean;
+    getNodes(port: ID, input: boolean): ConnectionPoint<ID, ID>[] | undefined;
+    connect({ input, connect, port, nodes }: NodeConnectionRequest<ID, GraphNode<ID, Data>>): void;
+    move(pos: Position): Position;
+    onConnect(handler: IEventHandler<NodeConnection<ID>>): Disposer;
+    onMove(handler: IEventHandler<Position>): Disposer;
+}
+
+export declare type GraphNodeDescriptor<Data> = Data & {
+    title: string;
+    coordinator: Coordinator;
+};
+
+export declare interface GraphNodeInterface<ID = any, Data = any, Render = any> extends IMenuProvider<any> {
+    id: ID;
+    inputs: NodeJoints<ID>;
+    outputs: NodeJoints<ID>;
+    description: GraphNodeDescriptor<Data>;
+    position: Position;
+    readonly title: string;
+    readonly width: number;
+    readonly height: number;
+    isInput(port: ID, nodeId: ID, nodePortId: ID): boolean;
+    isOutput(port: ID, nodeId: ID, nodePortId: ID): boolean;
+    isConnected(port: ID, input: boolean, to: ConnectionPoint<ID>): boolean;
+    connect(request: NodeConnectionRequest<ID, GraphNodeInterface<ID, Data>>): void;
+    move(pos: Position): Position;
+    render(content: Render): Render;
+    onConnect(handler: IEventHandler<NodeConnection<ID>>): () => void;
+    onMove(handler: IEventHandler<Position>): () => void;
+}
+
+export declare class GraphNodeJoints<ID> implements NodeJoints<ID> {
+    private readonly joints;
+    private readonly parentId;
+    constructor(parentId: ID, ports: NodeJoint<ID>[]);
+    [Symbol.iterator](): Iterator<NodeJoint<ID>>;
+    get connected(): NodeJoint<ID>[];
+    find(predicate: (joint: NodeJoint<ID>) => boolean): NodeJoint<ID> | undefined;
+    map<R>(mapper: (joint: NodeJoint<ID>, index: number) => R): R[];
+    has(nodeId: ID, portId?: ID): boolean;
+    hasAtPort(portId: ID, nodeId: ID, nodePortId: ID): boolean;
+    getPort(nodeId: ID, portId?: ID): ID | undefined;
+    connect({ port, target, connect }: NodeJoinRequest<ID>): NodeJoint<ID>;
+    getNodes(portId: ID): ConnectionPoint<ID>[] | undefined;
+    get ids(): ID[];
+    get count(): number;
+}
+
+export declare interface GraphNodeProps<Node extends GraphNodeInterface> {
+    innerRef?: Ref<GraphRef<Node>>;
+    coordinator: Coordinator;
+    nodes: Node[];
+    subset?: Node['id'][];
+    menu: IMenuProvider<any>;
+    onSelectNode: (node: Node | null, pos: Position) => void | false;
+    onContextMenu: (node: Node | null, pos: Position) => void | false;
+}
+
+export declare type GraphRef<Node extends GraphNodeInterface> = {
+    graph: GraphAdapter<Node>;
+    element?: HTMLDivElement;
+};
+
+declare interface GroupableItem<ID> {
+    id: ID;
+}
+
+export declare type GroupResolver<T extends GroupableItem<any>> = (node: T) => null | undefined | ItemsGroup<T['id']>;
+
+export declare interface HitTestResult<Node extends GraphNodeInterface> extends Position {
+    node: Node;
+    width: number;
+    height: number;
+}
+
+export declare type Identifiable<ID = TypeId> = {
+    id: ID;
+};
+
+export declare interface IGraph<Item extends IItem> extends Identifiable {
+    items: Item[];
+}
+
+export declare interface IItem extends Identifiable, Position {
+    isolator: boolean;
+    title: string;
+    ports: IItemPort<this>[];
+}
+
+export declare interface IItemPort<Item> extends Identifiable {
+    name: string;
+    input: boolean;
+    to: Item | null;
+    port: string | null;
+}
+
+export declare interface IMenu<Data = never> {
+    items: IMenuItem<Data>[];
+    onChange?: (cb: (diff: {
+        added?: IMenuItem[];
+        removed?: TypeId[];
+        updated?: TypeId[];
+    }) => void) => () => void;
+}
+
+export declare interface IMenuItem<Data = never> {
+    label: string;
+    disabled?: boolean;
+    group?: boolean;
+    separator?: boolean;
+    data?: Data;
+}
+
+export declare interface IMenuProvider<Data = never> {
+    getMenu(tag: any, pos: Position): IMenu<Data> | undefined;
+    handleMenu(data: Data): void | false;
+}
+
+export declare const isChannelName: (name: string) => boolean;
+
+export declare const isEqualIdentifiables: (a: {
+    id: any;
+}[], b: {
+    id: any;
+}[]) => boolean;
+
+export declare type ItemsGroup<ID> = {
+    value: string | number;
+    label: string;
+    ids: ID[];
+};
+
+export declare interface Layer<Node extends GraphNodeInterface> {
+    [id: string]: Node;
+}
+
+export declare class LayeredLayout<Node extends GraphNodeInterface> extends NodesGraph<Node> implements Layout<Node> {
+    layers: Layers<Node>;
+    private hash;
+    get center(): Position;
+    spread(layer: number, nodes: Node['id'][]): number;
+    findMax(node: Node): number;
+    dependants({ id }: Node): Node[];
+    get(ids: Node['id'][]): Node[];
+    remove(node: Node, layer: number): boolean;
+    put(node: Node, layer: number): void;
+    findLayer(node: Node): number;
+    findLayers(nodes: Node[]): Partial<Record<string, number>>;
+    shift(node: Node, fromLayer: number, offset: number, chain?: Node[]): number;
+    private all;
+    private walk;
+}
+
+export declare interface Layers<Node extends GraphNodeInterface> extends Iterable<Layer<Node>> {
+    [idx: number]: Layer<Node>;
+}
+
+declare interface Layout<Node extends GraphNodeInterface<any, any>> {
+    readonly center: Position;
+    getSubGraphs(subset?: Node['id'][]): Node['id'][][];
+    spread(layer: number, nodes: Node['id'][]): number;
+}
+
+export declare class Layouter<Node extends GraphNodeInterface<any, any>> {
+    private readonly isBarrier;
+    private readonly klass;
+    constructor(klass: Constructor<Layout<Node>, [nodes: Node[], isBarrier: GraphBarrier<Node>]>, isBarrier: GraphBarrier<Node>);
+    layout(nodes: Node[], subset?: Node['id'][]): Layout<Node>;
+    getSubGraphs(nodes: Node[]): Node["id"][][];
+}
+
+export declare type Line = {
+    moveFromPoint(pos: Position): boolean;
+    moveToPoint(pos: Position): boolean;
+    setColor(color: number): void;
+    update(): void;
+};
+
+export declare const ManagedGraph: <Graph extends IGraph<Item>, Item extends IItem, DTO extends GraphDTO>({ innerRef, graph, selected, handlers, children, onExport, ...rest }: PropsWithChildren<ManagedGraphProps<Graph, Item, DTO>>) => JSX.Element;
+
+export declare class ManagedGraphNode<Item extends IItem = IItem> extends GraphNode<TypeId, NodeData<Item>, Container> implements IMenuProvider<MenuAction> {
+    #private;
+    constructor({ finder, item, coordinator, toTitle }: {
+        finder: Resolver<Item>;
+        item: Item;
+        coordinator: Coordinator;
+        toTitle: ToTitle<Item>;
+    });
+    dispose(): void;
+    getMenu(tag?: {
+        type: 'node' | 'port';
+        id: TypeId;
+    }): IMenu<any> | undefined;
+    handleMenu(data: MenuAction): void | false;
+    onAddPortAction(handler: IEventHandler<boolean>): Disposer;
+    onDisconnectPortAction(handler: IEventHandler<NodeJoint<TypeId>>): Disposer;
+    onDeletePortAction(handler: IEventHandler<NodeJoint<TypeId>>): Disposer;
+    onEditAction(handler: IEventHandler<TypeId>): Disposer;
+    onDeleteAction(handler: IEventHandler<TypeId>): Disposer;
+    setStatus(status: NodeStatus): void;
+    setProgress(progress: number): void;
+    setSelected(value: boolean): void;
+    get item(): Item;
+    getItemPort(predicate: (port: IItemPort<Item>) => boolean): IItemPort<Item> | undefined;
+    get isSelected(): boolean;
+    get isInProgress(): boolean;
+    render(content: Container): RectSpinner;
+}
+
+export declare 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>>;
+    onExport?: (graph: Graph) => string;
+}
+
+export declare type MenuAction = {
+    action: MenuActions.ADD_PORT;
+    input: boolean;
+} | {
+    action: MenuActions.DISCONNECT_PORT | MenuActions.DELETE_PORT;
+    port?: NodeJoint<TypeId>;
+} | {
+    action: MenuActions.EDIT_NODE | MenuActions.DELETE_NODE;
+};
+
+export declare enum MenuActions {
+    EDIT_NODE = 1,
+    ADD_PORT = 2,
+    DISCONNECT_PORT = 3,
+    DELETE_PORT = 4,
+    DELETE_NODE = 5
+}
+
+export declare type NodeConnection<Node, Port = Node> = {
+    connect: boolean;
+    input: boolean;
+    source: ConnectionPoint<Node, Port>;
+    target?: ConnectionPoint<Node, Port>[];
+};
+
+export declare type NodeConnectionRequest<ID, Node> = {
+    input: boolean;
+    connect: boolean;
+    port: ID;
+    nodes?: RequestedConnection<ID, Node>[];
+};
+
+export declare type NodeData<Item> = {
+    item: Item;
+    status: NodeStatus;
+    progress: number;
+};
+
+export declare function NodeGroups<Item extends GroupableItem<any>>({ items, resolver, onSelect, children, ...rest }: NodeGroupsProps<Item>): JSX.Element;
+
+export declare interface NodeGroupsProps<T extends GroupableItem<any>> extends PropsWithChildren {
+    items: T[];
+    resolver: GroupResolver<T>;
+    onSelect: (group: ItemsGroup<T['id']>) => void;
+}
+
+export declare type NodeJoinRequest<ID> = {
+    port: ID;
+    target?: ConnectionPoint<ID>[];
+    connect: boolean;
+};
+
+export declare interface NodeJoint<ID> {
+    port: ID;
+    name: string;
+    nodes: ConnectionPoint<ID>[];
+}
+
+export declare interface NodeJoints<ID> extends Iterable<NodeJoint<ID>> {
+    count: number;
+    ids: ID[];
+    connect(join: NodeJoinRequest<ID>): NodeJoint<ID>;
+    getNodes(portId: ID): ConnectionPoint<ID>[] | undefined;
+    getPort(nodeId: ID, portId?: ID): ID | undefined;
+    find(predicate: (joint: NodeJoint<ID>) => boolean): NodeJoint<ID> | undefined;
+    map<R>(mapper: (joint: NodeJoint<ID>, index: number) => R): R[];
+    has(nodeId: ID, portId?: ID): boolean;
+    hasAtPort(portId: ID, nodeId: ID, nodePortId: ID): boolean;
+    connected: Array<NodeJoint<ID>>;
+}
+
+export declare class NodesGraph<Node extends GraphNodeInterface> {
+    private readonly _barriers;
+    private readonly _isBarrier;
+    readonly map: Partial<Record<Node['id'], Node>>;
+    readonly nodes: Node[];
+    constructor(nodes: Node[], isBarrier: GraphBarrier<Node>);
+    protected isBarrier(id: Node['id']): boolean | (Partial<Record<Node["id"], boolean>>[Node["id"]] & {});
+    getSubGraphs(subset?: Node['id'][]): Node["id"][][];
+    protected inputs(nodeId: Node['id']): any[];
+    protected outputs(nodeId: Node['id']): any[];
+    protected getConnectedNodes(node: Node, subset?: Node['id'][], target?: Node['id'][]): Node['id'][];
+    protected getCenter(mapper: (node: Node) => Position | undefined): {
+        x: number;
+        y: number;
+    };
+}
+
+export declare class NodesSort<R extends Relations<K>, K extends string> {
+    sort(nodes: GraphNodeInterface<K, any>[]): string[][];
+    private walk;
+    private split;
+}
+
+export declare enum NodeStatus {
+    Idle = 1,
+    Processing = 2,
+    Done = 4,
+    Error = 8,
+    Selected = 16
+}
+
+export declare class PIXIGUI<M> extends Container implements RendererGUI<M> {
+    #private;
+    static text: (text: any, textStyle?: Partial<Omit< IBitmapTextStyle, "fontName">>) => PIXIText;
+    static makeText: (text: string) => PIXIText;
+    constructor(menu: IMenuProvider<M>, legendText?: string);
+    getMenu(tag: any, pos: Position): IMenu<M> | undefined;
+    handleMenu(data: M): void | false;
+    get legendText(): string;
+    set legendText(text: string);
+    set text(text: string);
+    get legend(): boolean;
+    set legend(value: boolean);
+}
+
+declare class PIXIText extends Container {
+    #private;
+    static makeFont: (id: string, style?: TextStyle | Partial<ITextStyle>, options?: IBitmapFontOptions) => false | BitmapFont;
+    static factory: (id: string, style?: TextStyle | Partial<ITextStyle>, options?: IBitmapFontOptions) => (text: any, textStyle?: Partial<Omit<IBitmapTextStyle, "fontName">>) => PIXIText;
+    constructor(text: any, style?: Partial<IBitmapTextStyle>);
+    set text(text: any);
+    get text(): any;
+    set tint(color: ColorSource);
+}
+
+export declare type Position = {
+    x: number;
+    y: number;
+};
+
+declare class RectSpinner extends Graphics {
+    #private;
+    readonly sizeX: number;
+    readonly sizeY: number;
+    readonly lineSize: number;
+    readonly color: ColorSource;
+    progress: number;
+    active: boolean;
+    constructor(child: DisplayObject, { lineSize, sizeX, sizeY, radius, color, }: {
+        lineSize: number;
+        sizeX: number;
+        sizeY: number;
+        radius: number;
+        color: ColorSource;
+    });
+    setActive(value: boolean): void;
+    destroy(_options: any): void;
+    hotSwap(child: DisplayObject): void;
+    update(progress: number): void;
+}
+
+declare type Relations<K extends string | number> = Record<K, K[]>;
+
+export declare interface Renderer<N extends GraphNodeInterface> {
+    translation: Position;
+    center: Position;
+    capturing?: N;
+    options: RendererOptions;
+    mount(element: HTMLElement, options: RendererOptions): () => void;
+    unmount(): void;
+    resize(width: number, height: number): void;
+    translate(pos: Position): void;
+    offsetPos(pos: Position, dir?: number): Position;
+    fromGlobal(pos: Position): Position;
+    fromLocal(pos: Position): Position;
+    moveToForeground(node: N): void;
+    addNode(node: N): void;
+    removeNode(node: N): void;
+    getNodePos(node: N): Position;
+    moveNodeTo(nodeId: N['id'], pos: Position): void;
+    hitTest(pos: Position): undefined | HitTestResult<N>;
+    clear(): void;
+    render(): void;
+    update(): void;
+    layout(): void;
+}
+
+export declare type RendererConfig = {
+    maxFPS: number;
+    grid: {
+        cellSize: Position;
+        colors: ColorSource[];
+    };
+    gui?: RendererGUI<any>[];
+};
+
+export declare type RendererGUI<M> = DisplayObject & IMenuProvider<M>;
+
+export declare interface RendererOptions {
+    viewport: {
+        width: number;
+        height: number;
+        antialias: boolean;
+        transparent: boolean;
+        backgroundColor?: number;
+        resolution: number;
+    };
+}
+
+export declare type RequestedConnection<ID, Node> = {
+    node: Node;
+    port: ID;
+};
+
+export declare type Resolver<Item> = (id: TypeId) => Item | undefined;
+
+export declare class Store<Item extends {
+    id: TypeId;
+}> extends DisposableEventSource implements StoreInterface<Item> {
+    all: Item[];
+    map: Record<TypeId, Item>;
+    constructor(all?: Item[]);
+    clear(): void;
+    find(predicate: (node: Item) => boolean): Item | undefined;
+    filter(predicate: (node: Item) => boolean): Item[];
+    get(id: Item['id']): Item | undefined;
+    add<T extends Item | Item[]>(nodes: T): T;
+    remove(ids: Item['id'] | Item['id'][]): this;
+    onChange(handler: IEventHandler): Disposer;
+}
+
+export declare interface StoreInterface<Item extends {
+    id: ID;
+}, ID = TypeId> {
+    all: Item[];
+    find(predicate: (node: Item) => boolean): Item | undefined;
+    filter(predicate: (node: Item) => boolean): Item[];
+    get(id: Item['id']): Item | undefined;
+    add<T extends Item | Item[]>(nodes: T): T;
+    remove(id: Item['id'] | Item['id'][]): this;
+    clear(): void;
+    onChange(handler: IEventHandler<{
+        diff: Item[];
+        added: boolean;
+    }>): () => void;
+}
+
+export declare type ToTitle<Item> = (item: Item) => string;
+
+export declare type TypeId = string;
+
+export declare const useDraggable: <E extends HTMLElement>(handlers: DragHandlers) => {
+    isDragging: boolean;
+    bind: {
+        'data-element': string;
+        ref: RefObject<E | null>;
+        onMouseDown: (e: MouseEvent_2 | TouchEvent_2 | MouseEvent_2 | TouchEvent_2) => void;
+    };
+    anchor: {
+        x: number;
+        y: number;
+    };
+    reset: (pos: {
+        x: number;
+        y: number;
+    }) => void;
+};
+
+export declare function useStore<S extends StoreInterface<any>>(init: () => S): [S, S['all']];
+
+export declare const Viewport: ForwardRefExoticComponent<ViewportProps & RefAttributes<unknown>>;
+
+declare interface ViewportProps {
+    handlers: DragHandlers;
+    onResize: (rect: {
+        width: number;
+        height: number;
+    }) => void;
+}
+
+export { }