newcat / baklavajs

Graph / node editor in the browser using VueJS
http://baklava.tech
MIT License
1.57k stars 116 forks source link

how to inverse input output vertical order ? #319

Closed eviltik closed 1 year ago

eviltik commented 1 year ago

Is it possible to switch the order ? i.e inputs at he top, output at the bottom

const CommandeNode = BaklavaJS.Core.defineNode( {
      type: "Execute commande",
      inputs: {
        command: () => new BaklavaJS.RendererVue.TextInputInterface( "command", "ping $1" ),
        operation: () => new BaklavaJS.RendererVue.SelectInterface( "Operation", "Addition", [ "Addition", "Subtraction", "Sine" ] ),

      },
      outputs: {
        stdoutc: () => new BaklavaJS.RendererVue.TextInputInterface( "stdout content" ),
        stderrc: () => new BaklavaJS.RendererVue.TextInputInterface( "stderr content" ),
        stdoutl: () => new BaklavaJS.RendererVue.TextInputInterface( "stdout lines" ),
        stderrl: () => new BaklavaJS.RendererVue.TextInputInterface( "stderr lines" ),
      },
    } );

Currently, inputs are at the bottom, outputs at the top. image

Thank you !

eviltik commented 1 year ago

Actual

image

Expected

image

( inverse divs order, classname inputs and outputs )

RGamberini commented 1 year ago

@eviltik Add the following style rule to your CSS:

.baklava-node > .__content {
    display: flex;
    flex-direction: column-reverse;
}

Before / After image

eviltik commented 1 year ago

Thank you !!