jerosoler / Drawflow

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

flowchart shapes? #454

Closed jnylund closed 2 years ago

jnylund commented 2 years ago

Hi, this is a really cool library/framework, thanks for sharing!

I am looking to implement a flowchart type tool within my app, could this be used for all flowchart shapes? The examples seem to be all rectangles.

I would need at a minimum, oval, diamond/kite, rhombus.

Is this possible, and can you point me to any examples?

thx Joel

jerosoler commented 2 years ago

View example with romb: https://github.com/jerosoler/Drawflow/issues/20#issuecomment-679976512

Other option is with svg.

Example:

editor.addNode('aaa', 1, 1, 600, 200, 'shape', {}, `<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><polygon points="0,100 50,25 50,75 100,0" /></svg>` );

and css

.drawflow-node.shape {
      background: transparent;
      border: 0px;
      pointer-events: none;
    }
    .drawflow-node.shape.selected {
      background: transparent;
    }
    .drawflow-node.shape  polygon {
      pointer-events: all;
    }
    .drawflow-node.shape .input, .drawflow-node.shape .output {
      pointer-events: all;
    }
    .drawflow-node.shape .inputs .input_1 {
      top: 187px;
      left: -10px;
    }
    .drawflow-node.shape .outputs .output_1 {
      top: 7px;
      left: 13px;
    }

And result:

image

jnylund commented 2 years ago

Thank you!