Migrating the design https://jerosoler.github.io/Drawflow/ into Vuejs/Nuxtjs?

[Aravinda93]

@jerosoler Hello,

I am trying to build a Vuejs/Nuxtjs application similar to your Drawflow application: https://jerosoler.github.io/Drawflow/. I am able to design but for some reason after the reload the design disappears with error:

client-hook-6.js:1 TypeError: Cannot read properties of undefined (reading 'classList')
    at i.start (drawflow.min.js:132:26)
    at _callee$ (index.js?!./node_modules/vue-loader/lib/index.js?!./pages/Drawflow.vue?vue&type=script&lang=js&:130:25)
    at tryCatch (runtime.js:63:40)
    at Generator.invoke [as _invoke] (runtime.js:294:22)
    at Generator.eval [as next] (runtime.js:119:21)
    at asyncGeneratorStep (asyncToGenerator.js:5:24)
    at _next (asyncToGenerator.js:27:9)

I have added my code in Codesandbox for your reference: https://codesandbox.io/s/charming-panini-wzcq57?file=/pages/Drawflow.vue

You can access the link: https://wzcq57.sse.codesandbox.io/Drawflow and observe that it's loading the page at first but after which it disappears.

I previously had the design something like this: webpage: https://wzcq57.sse.codesandbox.io/ code: https://codesandbox.io/s/charming-panini-wzcq57?file=/pages/index.vue but I liked your design in https://jerosoler.github.io/Drawflow/ so trying to incorporate that now, hence migrating my old code to your design.

Can you please let me know what am I missing? Since I am converting the normal HTML/JS application to Vuejs I may be messing something up? Looking forward to your response.

[jerosoler]

It seems that the ref is missing in the drawflow div.

ref="drawflow"

what does this.ref.drawflow return?

[Aravinda93]

@jerosoler Thanks a lot, I do not know how did I miss this, I should have known this. Thanks a lot again.

I have one small query regarding the beautification: I am unable to get the left pane as per your design. I have added the beautiful.css to my Vue component and also, I have added all classes according to your demo example. Still, the left pane design is a bit messed up. Can you please let me know what am I missing?

[jerosoler]

In the demo is a div:

And you project is a ul > li

Lists in html have their own css. And they don't have the same properties.

[Aravinda93]

@jerosoler Thanks a lot now it's working fine. I am really sorry to bother you with these style issues.

One small issue is associated with the dropping of the nodes. After dropping the nodes, I am unable to get the alignment of the information properly:

1. I would like to get the radio button in the same within my Node with options URN and WebUI.
2. I would like to have the label for my node with the text Identifier but that's going beyond the node.
3. I would like to have the curved node instead of the regular square edges on the node.

I was able to make this things in my old project but when I am migrating somethings are not working. I tried to fix but I am unable to achieve any of these. Can you please let me know in which file I need to fix these things because in my previous case my Drawflow was split in multiple pages such as index.vue, components/DrawflowSample.vue etc

[jerosoler]

1. change in beautiful css:

.drawflow-node input, 

to:

.drawflow-node .input,

2. I don't understand.

3. .drawflow .drawflow-node {
   border-radius: 20px;
   }

I see that the problems are CSS. You can use the theme builder. https://jerosoler.github.io/drawflow-theme-generator/

[Aravinda93]

@jerosoler Thanks a lot for the response. This is working as expected. Issue 2 I was able to fix it. Thanks a lot again 👍🏻

[Aravinda93]

@jerosoler @jerosoler I have one small doubt regarding the Zoom option. I have added the following Drawflow zoom option code:

          <div class="bar-zoom">
            <div
              class="fas fa-search-minus"
              @click="drawflowZoomOption('out')"
            ></div>
            <div
              class="fas fa-search"
              @click="drawflowZoomOption('reset')"
            ></div>
            <div
              class="fas fa-search-plus"
              @click="drawflowZoomOption('in')"
            ></div>
          </div>

and the method associated with it:

    //Zoom option for Drawflow
    drawflowZoomOption(type) {
      console.log(type);
      if (type === "out") {
        this.$df.zoom_out();
      } else if (type === "reset") {
        this.$df.zoom_reset();
      } else if (type === "in") {
        this.$df.zoom_in();
      }
    },

When I click on any of the zoom buttons I expect the function to trigger and accordingly zoom the drawflow but for some reason this is not working for me.

Can you please once have a look and let me know what am I doing wrong here: https://codesandbox.io/s/charming-panini-wzcq57?file=/pages/Drawflow.vue:7462-7750

[jerosoler]

Remove:

 @click="drawflowZoomOption('TEST')"

You are clicking on the parent element and not on the children.

[Aravinda93]

Hi @jerosoler Thanks for your response. Actually, I was trying without this @click="drawflowZoomOption('TEST')" but that was not working so I added this to test if the parent click is working or not, and seems like the parent click is working.

Now I have removed this line of code but if you check now you can see that zoom option is not triggering the method at all on click of any of the Zoom options: https://codesandbox.io/s/charming-panini-wzcq57?file=/pages/Drawflow.vue

[jerosoler]

Try without icon. Or click, change to "onclick"

[Aravinda93]

@jerosoler Thanks a lot for the response. Seems like some issue with Font-awesome icons so I replaced with Bootstrap icons and everything is working perfectly:

<div class="bar-zoom">
        <button class="btn btn-light" title="Zoom-in Design" @click="zoomDesignInfo('in')">
          <em class="bi bi-zoom-in" />
        </button>
        <button class="btn btn-light" title="Reset Zoom" @click="zoomDesignInfo('reset')">
          <em class="bi bi-search" />
        </button>
        <button class="btn btn-light" title="Zoom-out Design" @click="zoomDesignInfo('out')">
          <em class="bi bi-zoom-out" />
        </button>
      </div>