go.charczuk.com@v0.0.0-20240327042549-bc490516bd1a/projects/nodes/static/_nextjs/src/components/nodeContextMenu.tsx (about)

     1  /**
     2   * Copyright (c) 2024 - Present. Will Charczuk. All rights reserved.
     3   * Use of this source code is governed by a MIT license that can be found in the LICENSE file at the root of the repository.
     4   */
     5  import { Node } from "reactflow";
     6  import { NodeData } from "../store/nodeData";
     7  import { Intent, Menu, MenuDivider, MenuItem } from "@blueprintjs/core";
     8  
     9  export interface NodeContextMenuProps {
    10    node: Node<NodeData>
    11    top: number;
    12    left: number;
    13    right?: number;
    14    bottom?: number;
    15    onClick?: (e: any) => void;
    16  
    17    onDuplicate: (n: Node<NodeData>) => void;
    18    onWatch: (nodeId: string, watched: boolean) => void;
    19    onEdit: (n: Node<NodeData>) => void;
    20    onObserve: (n: Node<NodeData>) => void;
    21    onSetStale: (n: Node<NodeData>) => void;
    22    onRemove: (n: Node<NodeData>) => void;
    23  }
    24  
    25  export function NodeContextMenu({ node, top, left, right, bottom, ...props }: NodeContextMenuProps) {
    26    const nodeIsObserver = node.data.node.metadata.node_type === 'observer';
    27    const nodeIsVar = node.data.node.metadata.node_type === 'var';
    28    const onMenuItemClick = (handler: (n: Node<NodeData>) => void) => {
    29      return (e: any) => {
    30        handler(node)
    31        if (props.onClick) {
    32          props.onClick(e)
    33        }
    34      }
    35    }
    36    return (
    37      <Menu small={true} style={{ top, left, right, bottom }} className="node-context-menu">
    38        <MenuItem onClick={onMenuItemClick(() => props.onEdit(node))} icon="edit" text="Edit node" />
    39        <MenuDivider />
    40        {!nodeIsObserver && !nodeIsVar && (
    41          <MenuItem onClick={onMenuItemClick(props.onObserve)} icon="eye-on" text="Observe node" />
    42        )}
    43        {(nodeIsObserver || nodeIsVar) && node.data.node.metadata.watched && (
    44          <MenuItem onClick={onMenuItemClick(() => { props.onWatch(node.data.node.id, false) })} icon="eye-off" text="Remove Watch" />
    45        )}
    46        {(nodeIsObserver || nodeIsVar) && !node.data.node.metadata.watched && (
    47          <MenuItem onClick={onMenuItemClick(() => { props.onWatch(node.data.node.id, true) })} icon="eye-on" text="Add Watch" />
    48        )}
    49        <MenuItem onClick={onMenuItemClick(props.onDuplicate)} icon="duplicate" text="Duplicate node" />
    50        <MenuItem onClick={onMenuItemClick(props.onSetStale)} icon="outdated" text="Set node stale" />
    51        <MenuDivider />
    52        <MenuItem onClick={onMenuItemClick(props.onRemove)} intent={Intent.DANGER} icon="trash" text="Delete node" />
    53      </Menu>
    54    )
    55  }