retejs / context-menu-plugin Goto Github PK

Hey, is there a possibility to get a context menu by clicking on the connection line or set a label on connection?

Creeps away for the screen :(

And use whatever renderers stuff it can. Otherwise every new Renderer will require new Context menu. :/

Within src/menu/Search.vue something changes the prop value because of the v-model and its also send with the emit event and doubly added to filter in the parent in src/menu/Menu.vue. Maybe make the value data instead of prop if you send it through the emit?

main-menu.js - export default class NodeMenu extends Menu {...
node-menu.js - export default class NodeMenu extends Menu {...

Hey, I'd like to use this, but I'm not too keen on adding Vue to my React project. So, I'm considering porting the Vue files to React.

I'm curious if anyone has any thoughts on the possibility of making this framework agnostic, or perhaps giving the user the ability to select the renderer. Otherwise I'll just fork this project and make a React version.

Hi,
On MacOS / Safari, the context menu does not work correctly. It opens on Control+mousedown, but disappears immediately on mouseup (when we release the click). It can be reproduced on the example page: https://rete.js.org/#/examples/basic. It works well on Firefox.

Tested with MacOS 10.15.6 and Safari 14.0.

If you add the plugin to a project, it will console log this:

You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html

Describe the bug

First of all, congratulations and thank you for your excellent work.

I'm using version 2.0.3 of the context-menu-plugin and I'm trying to set the delay option, but it doesn't seem to have any effect.

I am using rete version 2.0.3.

I followed the information described on this documentation page.

I created a fork of the example available in the documentation to make it easier to visualize the problem.

Example to reproduce

https://codesandbox.io/s/rete-js-v2-context-menu-forked-59d9tq?file=/src/editor.ts

How to reproduce

• Add the delay attribute with the value 0 when instantiating the ContextMenuPlugin class
• Add more than one submenu item
• Hover over a menu option and then hover over another option

Expected behavior

I expected the submenus to disappear immediately when pointing the mouse to another menu option, given that I set the delay to 0

Dependencies

Codesandbox

Platform

Chrome Version 127.0.6533.72, Node.js v20.15.1

Relevant log output

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

When drag-highlighting and releasing across multiple items in a submenu of the context menu, an error occurs.


This occurs in both the AllMatter example as well as my own project.

If i do a right-click on node i got the following options: Delete & Clone.

Is there a possibility to add some custom entry to this?

retejs/rete#147

export default {
  props: ['value', 'search'],

For what it is assigned there?

Hi,
I want to hide some options in context menu of delete and clone (node Items ) on specific nodes.
Eg.

If i right clicked on 'select file' node , then i want to hide or remove Delete and 'select number' options in the context menu .
*I have added some options in context menu by using 'nodeItems' property in context menu plugin as follows -
nodeItems: { 'select File'() { self.CreateFile(); }, 'select Number'() { self.CreateNumber(); }, 'select Web Book'() { self.CreateWebBook(); }, 'Delete All connected'() { self.removeOutputNodes(self.rootnode); },
Is there any way to do it ?
Thanks.

Hello,
I would like to customize the shape, style, ... of my context menu component, but i found nothing except this issue : #9 but it is a V1 example.

Is there a V2 functionality for render.addPreset(Presets.contextMenu.setup(cus)); like that ?

  render.addPreset(
    Presets.classic.setup({
      customize: {
   ....
      },
    })
  );

Thanks,

Hi! Is there a possibility to translate the context menu that appears when right-clicking a node, namely "delete" and "clone?". The function "rename" does not cover those entries.
Thanks!

Hi! I've started using Rete.js 2 or 3 days ago and I really enjoy your plugin :)

Is it or would it be possible to have a enable scrolling if there are too many items in the context menu? I've all Math class functions implemented automatically in nodes, so there is a lot to display and it overflows out of my view...

Thanks in advance and sorry for English mistakes

Greatings from Québec, Canada!
ZedeV2

https://github.com/retejs/context-menu-plugin/blob/master/src/index.js#L10

Hi,

is it possible to customize the style of the context menu (e.g. width, background)? What is the proper way to do it?

Thanks for the amazing library and support!

The rete-cli won't compile this plugin, emitting a "Type generating failed" error. However, it does work on other plugins and the "master" branch.

Minimal steps to reproduce:

git clone https://github.com/retejs/context-menu-plugin
cd context-menu-plugin
npm i -g rete-cli
rete build --config rete.config.ts

However, this works:

git checkout master
rete build --config rete.config.ts

and this works:

git clone https://github.com/retejs/rete-kit
cd rete-kit
rete build --config rete.config.ts

1. The items, created by "items: {}" key do not removed from the menu when using "search" function. May be properties "do not hide" for item.
2. Context menu (main) have two mode: fixed and always on(linked to div like rete) and float (as in the current version).

По первому пункту - нужны пункты меню, которые не исчезают, когда с окошке поиска вводится буква, которой нет в слове. Это всяческая служебная мура, типа сохранить, очистить и т.п. Добавить флаг "не скрывать".
По второму - нужно фиксированное меню, которое всегда на экране в своем контейнере. Вызывать меню правым кликом реально достает после 10 минут работы. Собственно, это тоже пара свойств: id контейнера, где будет жить меню, немножко другие стили и тип в конструкторе (fixed/float).

1. For auto add, when allocate returns null or false, exclude it from context menu
2. Some param to add by hand formed context menu:

{
  xx: {
    yy: TComponent,
    zz: function() {
      doSomething();
    } 
  }
}

if wish so!

You could use npm i lodash.debounce instead of the full lodash.

Hey,

I checked if this has been a problem before with the context-menu-plugin but could not find an issue that covers it.

After following the example on retejs.org how to setup this plugin, I get this error:

Uncaught ....../node_modules/lodash-es/lodash.js:10
export { default as add } from ./add.js;
^^^^^^

SyntaxError: Unexpected token export
    at new Script (vm.js:84:7)
    at createScript (vm.js:258:10)
    at Object.runInThisContext (vm.js:306:10)
    at Module._compile (internal/modules/cjs/loader.js:884:26)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:986:10)
    at Module.load (internal/modules/cjs/loader.js:816:32)
    at Module._load (internal/modules/cjs/loader.js:728:14)
    at Module._load (electron/js2c/asar.js:717:26)
    at Function.Module._load (electron/js2c/asar.js:717:26)
    at Module.require (internal/modules/cjs/loader.js:853:19)

My guess is that I am missing lodash so I tried to include it using yarn. But nothing of what I tried so far worked. Could anybody lead me in the right direction? I am running retejs with electron-webpack.

This is my package.json:

{
  "name": "test",
  "version": "0.0.1",
  "license": "MIT",
  "scripts": {
    "dev": "electron-webpack dev",
    "compile": "electron-webpack",
    "dist": "yarn compile && electron-builder",
    "dist:dir": "yarn dist --dir -c.compression=store -c.mac.identity=null"
  },
  "dependencies": {
    "@babel/core": "^7.9.6",
    "@babel/polyfill": "^7.8.7",
    "@babel/preset-env": "^7.9.6",
    "rete": "^1.4.3-rc.1",
    "rete-area-plugin": "^0.2.1",
    "rete-connection-plugin": "^0.9.0",
    "rete-connection-reroute-plugin": "^0.4.0",
    "rete-context-menu-plugin": "^0.6.0-rc.1",
    "rete-dock-plugin": "^0.2.1",
    "rete-minimap-plugin": "^0.3.1",
    "rete-module-plugin": "^0.4.1",
    "rete-readonly-plugin": "^0.4.1",
    "rete-reorder-nodes-plugin": "^0.3.0",
    "rete-task-plugin": "^0.3.0",
    "rete-vue-render-plugin": "^0.5.0",
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "babel-loader": "^8.1.0",
    "css-loader": "^3.5.3",
    "electron": "^8.2.5",
    "electron-builder": "^22.4.1",
    "electron-debug": "^3.0.1",
    "electron-webpack": "^2.8.2",
    "node-sass": "^4.14.1",
    "sass-loader": "^8.0.2",
    "source-map-loader": "^0.2.4",
    "vue-loader": "^15.9.2",
    "vue-template-compiler": "^2.6.11",
    "webpack": "^4.43.0"
  }
}

I want to hide the context menu of 'delete' and 'clone' for specific component ? how can i do this?

I want to hide the context menu when I right click on the start call.Is there anyway to do it ?
Currently using the updated version (0.4.0)
Thanks

Originally posted by @jadhavsuraj2207 in #13 (comment)

There is a name clash between the .item class used by context-menu-plugin and the .item class used by ion-item of the Ionic Framework.

Would it be possible to rename the class definition of the context menu items from .item to something more specific like .rete-context-item?

Hi,
when I right click on node , the context menu open above node.
I want the context-menu to display near to the respective node even if I right click on the node. so that my node will be fully visible and besides that context menu will be positioned.

As u can see in above image, context menu is overlapping node .
In index.js file on context menu function , menu.show(x,y,{node}) is used which clientX,clientY value .

is there any way to position it beside node ?

Is there a way to disable the timeout delay closing the whole context menu? With the delay on, submenus in the context menu will overlap when switching from one to the other. I would like to put the delay to 0 here, but that renders the menu absolutely unusable: as soon as the mouse moves, the full context menu is closed. Obviously this is not what I wanted either. Is it possible to only disable the delay for the submenus and simply keep the context menu open until the user clicks somewhere else, not make it close on mouse move/leave?

Hello,

I just experienced a visuell bug with the submenus. When switching menus the collapsing and expanding is updating with a delay.

Video attached:
https://github.com/retejs/context-menu-plugin/assets/7767387/3e9d2e38-5fef-4d61-b35e-3e6cc730022f

Thanks and kind regards

Clicking on a menu item that has subitems (where the desired behavior is to have no action) causes the error:

props.data.handler is not a function

This error can be reproduced by clicking on the "extra" menu item found at the example here.

I imagine the solution is to add a empty function like:
handler() {}

on this line. I forked this repo in the hopes of making a PR with this change, however I can't ensure it fixes the problem because the rete-cli emits a "Type generating failed" error when attempting to compile the context-menu-plugin.

If the context menu is opened closer to the right or bottom edge, it could happen that it is not entirely visible. This happens especially with large context menus, but is also reproducible on the example page: https://retejs.org/examples/context-menu

Expected:
The position does not only depend on the cursor position, but also on the edges of the editor area (or visible screen area).
E.g. If the menu exceeds the bottom, it is repositioned that the bottom of the context menu aligns with the bottom of the editor area.

My goal is to recreate nodes with their connections in the editor from the JSON file.
JSON structure:
id: '[email protected]', nodes: { '1': { id: 1, name: 'MyNode', data: { title: 'Some title' }, inputs: { num1: { connections: [] } }, outputs: { num: { connections: [{ node: 2, input: 'num1' }] }, }, position: [0, 0], }
In builder method I have everything from a 'data' object, but no inputs or outputs. Seems like it is was an intentional decision, but how to generate inputs then?

I would like to have the browser default spellcheck accessible when the user clicks on a item that allows spellcheck (IE a textarea).

I wrote some code to accomplish this:

export function hasSpellCheck(event) {
    const target = event.target;
    if (!target.spellcheck) {
        return false;
    } else {
        return true;
    }
}

And the code to disable the context menu

editor.on('showcontextmenu', ({e,node}) => {
    if (hasSpellCheck(e)) {
      console.log("has misspelled word, skipping context");
      return false;
    }
    return !e.node || !editor.components.get(e.node.name).data.noContextMenu;
  });

I confirmed that this disables the context menu correctly. however, if this menu is disabled, the browser default behavior (showing a menu that includes spellcheck) does not show up. I would think if this menu is disabled, the default behavior would come back, but I may just be missing something.

When using context menus search for components, it will give a warning:

need to style the v2 context menu without CSS overrides if possible
the default blue theme doesn't work for my application

Scrolling in the context menu does not work. The sub-menu is long, so I made the height equal to 350 pixels, and scrolling doesn't work in the menu, it works in the area.

При попытке ввода символов + или * в поле поиска компонентов происходит ошибка:

SyntaxError: Invalid regular expression: /*/: Nothing to repeat
    at new RegExp (<anonymous>)
    at VueComponent.filtered

Можно протестировать на официальном примере.

Hi. "Delay" does't work correctly in last stable version. I need to close context menu by click not only area of editor. It was a good idea to close by delay. How can I fixed it?

Are you kidding?
What's wrong with typeof nodeItems === 'function' ?

I have the smallest example I could to reproduce issue:

<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/rete.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/vue-render-plugin.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/connection-plugin.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/context-menu-plugin.min.js"></script>

        <script>
            document.addEventListener('DOMContentLoaded', () => {
                const div = document.getElementById('editor');
                console.log(div);
                const editor = new Rete.NodeEditor('[email protected]', div);
                editor.use(ConnectionPlugin.default);
                editor.use(VueRenderPlugin.default);
                editor.use(ContextMenuPlugin.default, {items: ["test1", "test2"]});
            });
        </script>
    </head>
    <body>
        <div id="editor" style="width: 100%; height: 80em; background-color: lightgrey;"></div>
    </body>
<html>

When I load this html in my browser and right-click on editor space I get:

TypeError: y is undefined
    mounted debounceHide.js:18
    He vue@2:6
    Yt vue@2:6
    insert vue@2:6
    k vue@2:6
    zi vue@2:6
    _update vue@2:6
    r vue@2:6
    get vue@2:6
    fn vue@2:6
    mount vue@2:6
    $mount vue@2:6
    $mount vue@2:6
    i index.js:13
    p main-menu.js:5
    install index.js:43
    value emitter.ts:29
    value emitter.ts:28
    o index.ts:28
    o index.ts:28
    n editor.ts:23
    <anonymous> test.html:13
    EventListener.handleEvent* test.html:10
vue@2:6:11752

What am I missing?

Hi , I am using Angular-render-plugin . I have 7 Components (Archi,sdsm,hdsm,bugspace,rootcover,download file,graph) I want items to show in the contextmenue as follow:
Archi>Archi
Titan> [Sdsm,Hdsm,Bugspace,Rootcover]
Utilities> [Download file,Graph]

I tried to add them to items but it dosent work can you please show me how that can be done?

I've read on https://retejs.org/docs/guides/context-menu#render-context-menu that this plugin doesn't support vue rendering yet. What would have to be done to support vue? I'd really like to use it :)