Adding controls to connection line

[shidcordero]

I am planning to add a control when selecting a connection line. I tried it first by adding it in the child of the parent drawflow like:

<div
      id="drawflow"
      ref="drawflow"
      class="parent-drawflow mt-1"
      :class="{ 'is-fullscreen': isFullScreen }"
      @dragover="allowDrop"
      @drop="drop"
    >
      <div ref="drawflowLineControls" class="drawflow-line-controls">
        <b-button-group size="sm">
          <b-button
            variant="primary"
            :title="$t('drawflow.label.settings')"
            @click.prevent="onModeClick"
          >
            <FeatherIcon icon="SettingsIcon" size="12" />
          </b-button>
          <b-button
            variant="primary"
            :title="$t('drawflow.label.remove')"
            @click.prevent="onZoomInClick"
          >
            <FeatherIcon icon="TrashIcon" size="12" />
          </b-button>
        </b-button-group>
      </div>
    </div>

and I bind on every click of user in the line, the problem is, this was rendered outside of the drawflow container so it was hard to get the absolute coordinate to align it in the clicked connection line.

Are there any ways to make this simpler? I'm thinking if in Vue we could add it as slot.

[jerosoler]

I do not understand.

What do you want to align the menu?

Do you want to create a context menu? View: https://github.com/jerosoler/Drawflow/issues/187

[shidcordero]

I'm sorry for not being clear, so basically this is what I want

That controls will show when the user selected a connection line

[jerosoler]

If it is a context menu. You can do it with # 187.

Change event contextmenu for clickend

and get position: showConextMenu(event.clientX, event.clientY)

   editor.on('clickEnd', function(event) {
showConextMenu(event.clientX, event.clientY)
}

function showConextMenu(x,y) {
            var pos_x = x * ( editor.precanvas.clientWidth / (editor.precanvas.clientWidth * editor.zoom)) - (editor.precanvas.getBoundingClientRect().x *  ( editor.precanvas.clientWidth / (editor.precanvas.clientWidth * editor.zoom)) ) ;
            var pos_y = y * ( editor.precanvas.clientHeight / (editor.precanvas.clientHeight * editor.zoom)) - (editor.precanvas.getBoundingClientRect().y *  ( editor.precanvas.clientHeight / (editor.precanvas.clientHeight * editor.zoom)) ) ;

....

[shidcordero]

works great, thanks