Flow/browser/vue-flow/src/components/flow/editor.vue

<template>
  <div class="flow-container">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      ref="svg"
      class="flow-view view"
      :class="viewClasses"
      @dragover.prevent
      @drop="managerDrop"
      @mousedown="viewPointerDown"
      :width="width"
      :height="height">
      <svg-defs/>

      <flow-pan-zoom
        ref="panzoom"
        v-model="panzoom">

        <!-- links below nodes -->
        <flow-link
          v-for="(link,i) in nodeData.links"
          :key="'link' + i"
          v-bind="linkProps(link)"
          @click="linkPointerClick($event,link)"
        />
        <!-- trigger links -->
        <flow-trigger-link
          v-for="(trigger,i) in nodeData.triggers"
          :key="'trigger'+i"
          label="WIP"
          v-bind="triggerProps(trigger)"
          @click="TRIGGER_REMOVE(trigger)"
        />
        <!-- nodes -->
        <flow-node
          ref="nodes"
          v-for="(n,i) of nodeData.nodes"
          v-bind="nodeProps(n)"
          :key="'node' + n.id"
          :id="n.id"
          :selected="nodeSelection[n.id]?true:false"
          @nodePointerDown.prevent="nodePointerDown($event,i)"
          @socketPointerDown="socketPointerDown(n.id,...arguments)"
          @triggerPointerDown="triggerPointerDown(n.id,...arguments)"
          @nodeDoubleClick="$emit('nodeDblClick',n)"
          @nodeRightClick="$refs.menu.open($event,n)"

        />
        <!-- mouse link-->
        <flow-link
          :pointer="true"
          v-if="pointerLink.active"
          v-bind="pointerLink.props"
        />
        <flow-trigger-link
          :pointer="true"
          v-if="pointerTriggerLink.active"
          v-bind="pointerTriggerLink.props"
        />
        <rect
          class="flow-selector"
          :class="{'flow-selector--selecting':(selector)?true:false}"
          v-bind="selector"/>
      </flow-pan-zoom>
    </svg>
    <div class="flow-container__control">
      <button @click="stickySockets=!stickySockets"> {{ stickySockets? 'Hide':'Show' }} sockets </button>
      <button @click="stickyTriggers=!stickyTriggers"> {{ stickyTriggers? 'Hide':'Show' }} triggers </button>
      <button @click="nodeActivity=!nodeActivity"> {{ nodeActivity? 'Hide':'Show' }} activity </button>
      <button @click="$emit('documentSave', nodeData)"> Save </button> <!-- should disable until confirmation -->
      <button v-if="panzoom.x!=0 || panzoom.y!=0 || panzoom.zoom!=1" @click="panzoomReset">
        Reset view
      </button>
    </div>
    <div class="flow-container__info">
      x:{{ panzoom.x.toFixed(2) }} y:{{ panzoom.y.toFixed(2) }} scale:{{ panzoom.zoom.toFixed(2) }}
      nodes: {{ nodeData.nodes.length }}
      links: {{ nodeData.links.length }}
      triggers: {{ nodeData.triggers.length }}
    </div>
    <hx-context-menu ref="menu">
      <template slot-scope="d" >
        <div class="flow-node__context-menu">
          <div class="hover" @click="nodeProcess(d.userData)">Run</div>
          <div class="hover" tabindex="0" @click="nodeRemove(d.userData)">Delete</div>
          <hr>
          <div class="hover" @click="nodeInspect(d.userData,true)">Inspect</div>
        </div>
      </template>
    </hx-context-menu>
  </div>
</template>
<script src="./editor.js">
</script>
<style>
.flow-container {
  display:flex;
  flex-flow:row;
  position:relative;
}

.flow-container__control {
  position:absolute;
  top: 20px;
  left: 20px;
  display:flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}

.flow-container__control button {
  display:flex;
  justify-content: center;
  margin:0;
  padding:14px;
  color:#333;
}

.flow-container__info {
  position:absolute;
  bottom:10px;
  left:10px;
  padding:2px;
  font-size:9px;
}

.flow-view {
  border:none;
  position:relative;
  fill:transparent;
}

.flow-selector {
  pointer-events:none;
  opacity:0;
}

.flow-selector.flow-selector--selecting {
  opacity:1;
}

.flow-node__context-menu {
  box-shadow: 0 1px 4px  rgba(0,0,0,0.2);
  display:flex;
  flex-flow: column;
  justify-content: start;
  align-items: stretch;
  width:180px;
}

.flow-node__context-menu > div {
  padding:10px 20px;
  cursor: pointer;
}

.flow-node__context-menu > * {
  width:100%;
}

.flow-node__context-menu hr {
  width:90%;
  border:none;
  border-bottom: solid 1px rgba(150,150,150,0.2);
}

.flow-node__context-menu button {
  text-align:left;
}

</style>