search

retejs / alight-render-plugin

2 stars 4 forks source link

detect mousedown event at input Control, with alight-render-plugin #2

Closed robsimal closed 5 years ago

robsimal commented 5 years ago

I have tried to migrate a control inside an input, from D3NE to Rete alpha.2 (https://rete.readthedocs.io/en/latest/Migrate/#controls), but I am not able to find how could I detect a mouse click (mousedown) event inside the input box, as it is described in the D3NE code, with el.addEventListener("mousedown", ...);. I have found how to prevent node movement when selecting text in the input field, using @mousedown.stop at the input template: <input type="text" :name="table" :readonly="readonly" :value="value" @input="change($event)" @mousedown.stop>

I do not know which other options does @mousedown have, where to find them. I have tried to directly call an "open dialog" function with @mousedown.openTableDialogg, where openTableDialog() is a function I wrote inside the Control, at the same level as change(e), update(), mounted(), setValue(val).

Ni55aN commented 5 years ago

Have you switched to vue-render-plugin ?

robsimal commented 5 years ago

I have tried, but it is not working with Angular 6: https://github.com/retejs/examples/issues/9 "it all attempts to integrate vue-loader into Angular project are unsuccessful"

Even if it would be working, I can't find the way to detect this mouse event with vue-render-plugin.

Ni55aN commented 5 years ago

@robsimal This code is working

import Vue from 'vue/dist/vue.esm';

const comp = Vue.component('num' { ... vue component propeerties });

There are two ways to listen mousedown

  1. add mousedown listener on rendernode's el. editor.on('rendernode', ({ el }) => el.addEventLi...
  2. add @mousedown to custom Node.vue. The correct syntax is @mousedown="myFunc()"