jerosoler / Drawflow

Simple flow library 🖥️🖱️
https://jerosoler.github.io/Drawflow/
MIT License
4.65k stars 722 forks source link

how to change input /output bubble to triangle shape #163

Closed princeyogesh closed 3 years ago

jerosoler commented 3 years ago

Hello @princeyogesh

Edit with css

.drawflow .drawflow-node .input {
 // Your triangle shape
}
.drawflow .drawflow-node .output {
// Your triangle shape
}
jerosoler commented 3 years ago

Simple example edit demo in browser:

image

.drawflow .drawflow-node .input {
    left: -10px;
    background: transparent;
}
.drawflow .drawflow-node .output {
    right: 0px;
}
.drawflow .drawflow-node .input, .drawflow .drawflow-node .output {
    /* height: 15px; */
    /* width: 15px; */
    /* border: 2px solid var(--border-color); */
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 15px 0 15px 15px;
    border-color: transparent transparent transparent #007bff;
    background: transparent;
    border-radius: 0px;
}
TheoCtla commented 7 months ago

Hi, i just use this css to add arrows on my diagram but when i drag a node, this happens.

This is my diagram when the page has just loaded :

image

This is my diagram afteri drag a node, the arrow remains selected until I left-click anywhere else.

image

Do you know how to fix it ?

ElvisAns commented 6 months ago

I think adding "user-select : none" to your custom node can be helpful, or i did not get well the question