Q: Save Button

[wduandy]

On the Switch Case i have the following template code:

          case 'first_message':
            var first_message = `
            <div>
            <div class="title-box"><i class="fas fa-comment-dots"></i> Mensagem Inicial</div>
            <div class="box">
              <p>Mensagem</p>
              <textarea df-db-mensagem></textarea><br><br>
            </div>
            </div>
            `;
            editor.addNode('first_message', 0, 1, pos_x, pos_y, 'first_message', { "db": { "mensagem": ''}}, first_message );
            break;

How to add a save button inside the template that references the id of the node? I can't figure how to do this and is needed for my purpose :(

[jerosoler]

df-values in your case df-db-messagem it's autosave.

Add a button:

    var first_message = `
            <div>
            <div class="title-box"><i class="fas fa-comment-dots"></i> Mensagem Inicial</div>
            <div class="box">
              <p>Mensagem</p>
              <textarea df-db-mensagem></textarea><br><br>
              <button onclick="test(event);">Button</button>
            </div>
            </div>
            `;
            editor.addNode('first_message', 0, 1, 100, 300, 'first_message', { "db": { "mensagem": ''}}, first_message );

  function test(e) {
    const nodeId = e.target.closest(".drawflow-node").id;
    alert(nodeId);
  }

[wduandy]

@jerosoler thanks a lot for your support! How this logic would be possible on Vue.js? I still can't figure it out how to setup DrawFlow on Vue.

[jerosoler]

With the example: https://github.com/jerosoler/Drawflow/issues/263#issuecomment-930449781

For example component: Not tested created on the fly

<template>
<div>
            <div class="title-box"><i class="fas fa-comment-dots"></i> Mensagem Inicial</div>
            <div class="box">
              <p>Mensagem</p>
              <textarea df-db-mensagem></textarea><br><br>
              <button @click="test(event);">Button</button>
            </div>
            </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  methods: {
        test(e) {
         const nodeId = e.target.closest(".drawflow-node").id;
         alert(nodeId);
        },
  }
}
</script>

[jerosoler]

For vue view most issues: https://github.com/jerosoler/Drawflow/issues?q=is%3Aissue+label%3AVue+is%3Aclosed