Estoy tratando de crear una conexión de línea al hacer clic en el ícono de una imagen, he intentado lo mismo usando cables.html ejemplo. Pero no está funcionando. Estoy usando reaccionar con mxGraph. Cómo implementar esto. ¿Hay alguna forma de lograrlo?

mxEvent.addGestureListeners(
    img,
    mxUtils.bind(this, function(evt) {
      mxConnectionHandler.prototype.isStartEvent = function(me) {
        console.log("Here we have to start the line connection");
      };
    })
  );

Tengo que iniciar la conexión de línea dentro del evento de vinculación. Hay alguna forma de arreglar esto. Lo he intentado pero ninguno de ellos funciona.

Realmente necesito ayuda.

Canvas

En la imagen, Arrow Connection (Multiple points are not supported. Used for directly connecting source to target) funciona correctamente. Pero es necesario implementar Conexión de línea (Multiple points are supported. Starting from source we can click any where to create multiple points till the target connection).

Por favor, compruebe la URL siguiente, por ejemplo.

URL de demostración: http://jithin.com/javascript/examples/contexticons.html

URL del código fuente: https://jsfiddle.net/fs1ox2kt/

En la URL de demostración , al hacer clic en una celda, se mostrarán 4 iconos (Eliminar, Cambiar tamaño, Mover, Conectar). Reemplacé Eliminar por Conexión de línea y Cambiar tamaño por Conexión de flecha . Por favor échale un vistazo.

7
Jithin Varghese 23 sep. 2019 a las 08:20

1 respuesta

La mejor respuesta

No estoy seguro de haber entendido correctamente su pregunta, por lo que estoy respondiendo a algunas posibles:

  1. Encontré el ejemplo de hola mundo muy útil para comprender cómo escribir código que permite crear y modificar nodos y conexiones usando mxGraph.
  2. Tus etiquetas sugieren que estás usando React. Curiosamente, no menciona Redux-Saga como biblioteca. Si aún no lo está utilizando, le recomendamos que eche un vistazo al concepto de reductores .
  3. Su pregunta también puede ser sobre el comportamiento específico de una conexión de línea mxGraph :

    cuando hago clic en el icono de desplazamiento de conexión de línea, no comienza desde la celda.

    Al mirar el ejemplo de flujo de trabajo, no veo ningún icono de desplazamiento cuando quiero dibujar una línea o conexión de un cuadro de tareas a otro. Recuerdo vívidamente que me tomó un tiempo darme cuenta de que tienes que hacer clic en el cuadro de origen, mantener presionado y arrastrar al cuadro de destino.

  4. Si su pregunta es más sobre los iconos de desplazamiento, ya tiene otra pregunta (sin respuesta) sobre eso: agregar el controlador de conexión al hacer clic en el icono de desplazamiento no funciona mxGraph

EDITAR: finalmente entendí que los íconos en su figura son los íconos flotantes, por lo que hay una quinta interpretación de su pregunta:

Descripción del problema: El usuario hace clic en el cuadro naranja con el icono del microchip, luego aparece un menú emergente (sus iconos flotantes) y, a continuación, el usuario debe elegir un tipo de línea haciendo clic en uno de Los artículos. El punto final de la línea respectiva debe seguir siendo el cuadro de tareas que el usuario seleccionó inicialmente.

Esquema de la solución: Ya en el evento onClick inicial, debe completar una variable final_vertex con las coordenadas del cuadro con el icono del microchip que contiene las coordenadas del clic, o el respectivo vértice - tu caja. Al dibujar la conexión elegida, debe asegurarse de elegir este final_vertex como punto final, y el cuadro con el icono lambda como vértice inicial. En otras palabras, necesita al menos dos eventos: el onClick inicial y un onHoverItemClick. No estoy muy familiarizado con mxGraph, pero supongo que no puede resolver el problema con un solo controlador de eventos.

1
B--rian 10 oct. 2019 a las 07:50