nope/resources/ui/graph/defaults/default.context-menu.ts

/**
 * @author Martin Karkowski
 * @email m.karkowski@zema.de
 * @create date 2020-04-09 08:50:11
 * @modify date 2020-07-22 21:57:01
 * @desc [description]
 */

import { clusterSelected } from '../addons/cluster.selected';
import { IBaseNodeOptions } from '../interfaces/IBaseNodeOptions';
import { IBaseEdgeOptions } from '../interfaces/IBaseEdgeOptions';
import { IRigthClickActions } from '../../gui-components-basic-layout/types/interfaces';
import { ICallbackData, IGraphToolComponent } from '../interfaces/IGraphTool';
import { readFromClipboard } from '../../../@zema/ZISS-Browser-Library/src/clipboard';
import { parseWithFunctions } from '../../../@zema/ZISS-TypeScript-Library/src/JSON';

export type rigthClickActions = Array<{
    label?: string;
    onClick?: (event?: any) => void;
    divider?: boolean
}>;

export type mousePosition = {
    x: number,
    y: number
}

export type rightClickActionGenerator = (component?: any, event?: mousePosition) => rigthClickActions;

export interface IContextConfig<N extends IBaseNodeOptions, E extends IBaseEdgeOptions, D extends ICallbackData<N,E>> {
    /** Called, if the context menu is opened over a single Edge **/
    edge: (component?: IGraphToolComponent<N,E,D>, event?: mousePosition, edgeID?: string) => IRigthClickActions<ICallbackData<N,E>>;
    /** Called, if the context menu is opened over a single node **/
    node: (component?: IGraphToolComponent<N,E,D>, event?: mousePosition, nodeID?: string) => IRigthClickActions<ICallbackData<N,E>>;
    /** Called, if the context menu is opened without the selection of a node or edge **/
    background: (component?: IGraphToolComponent<N,E,D>, event?: mousePosition) => IRigthClickActions<ICallbackData<N,E>>;
    /** Called if Multiple Nodes or Edges are selected **/
    default: (component?: IGraphToolComponent<N,E,D>, event?: mousePosition, nodeIds?: Array<string>, EdgeIds?: Array<string> ) => IRigthClickActions<ICallbackData<N,E>>;
}

export function generateDefaulContextMenu<N extends IBaseNodeOptions, E extends IBaseEdgeOptions, D extends ICallbackData<N,E>>() {
    const contextMenuGenerator: IContextConfig<N,E,D> = {
        background: (component: IGraphToolComponent<N,E,D>, position) => {
            const ret:IRigthClickActions<ICallbackData<N,E>> = [];
            ret.push(
                {
                    label: 'Fit Graph',
                    onClick: () => component.network.network.fit()
                },
                {
                    divider: true,
                },
                {
                    label: 'Paste Element',
                    onClick: async () => {
                        try{
                            component.paste(parseWithFunctions(await component.readDataFromClipboard()),component.network.network.DOMtoCanvas(component.mousePos), false)
                        } catch (e) {

                        }
                    }
                },
            );
            return ret;
        },
        edge: (component, position) => {
            return [
                {
                    label: 'Delete Selection',
                    onClick: () => component.network.network.deleteSelected()
                }
            ];
        },
        node: (component, position) => {
            const ret: IRigthClickActions<ICallbackData<N,E>> = [];

            if (component.network.network.isCluster(component.network.network.getSelectedNodes()[0])) {
                const id = component.network.network.getSelectedNodes()[0];
                ret.push(
                    {
                        label: 'open cluster',
                        onClick() {
                            component.network.network.openCluster(id);
                        }
                    },
                    {
                        divider: true
                    }
                );
            }
            ret.push(
                {
                    label: 'compress',
                    onClick() {
                        clusterSelected(component)
                    }
                },
                {
                    divider: true
                },
                {
                    label: 'copy',
                    onClick() {
                        component.copySelectionToClipboard();
                    }
                },
                {
                    divider: true
                },
                {
                    label: 'delete',
                    onClick: () => component.network.network.deleteSelected()
                },
                {
                    label: 'edit',
                    onClick() {
                        console.log('not implemented');
                    }
                }
            );

            return ret;
        },
        default: (component) => {

            const menu = [];

            if (component.network.network.getSelectedNodes().length > 0) {
                menu.push(
                    {
                        label: 'cluster selected',
                        onClick() {
                            clusterSelected(component, false);
                        }
                    },
                    {
                        divider: true,
                    },
                    {
                        label: 'copy selected',
                        onClick() {
                            component.copySelectionToClipboard();
                        }
                    }
                );
            }

            menu.push({
                label: 'delete selected',
                onClick: () => component.network.network.deleteSelected()
            });
            return menu;
        }
    }

    return contextMenuGenerator;
}