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

<template>
  <div class="flow-main" :class="{dark:dark}">
    <div class="app-header">
      Flow
      <button @click="dark=!dark">{{ dark?'light':'dark' }}</button>
    </div>
    <div class="app-horizontal">
      <div class="app-flow-container">
        <div class="app-watermark">PROTOTYPE</div>
        <div class="app-info">
          <h4>HELP</h4>
          <ul>
            <li><b>Pan</b>: Drag with Middle Mouse or Ctrl+left mouse button</li>
            <li><b>Zoom</b>: Mouse wheel up and down to zoom in and out</li>
            <li><b>New Node</b>: Create a node by dragging a fn from left panel into area</li>
            <li><b>Remove Node</b>: Middle click in a node to remove a node</li>
            <li><b>Inspect node</b>: Double click on a node to get detailed information</li>
            <li><b>Move Node</b>: Mouse click and drag</li>
            <li><b>Links</b>: Press [shift] and Drag from a node/socket to a socket highlighted in green</li>
            <li><b>Links(alternative)</b>: Toggle socket visualisation in the panel and Drag from a socket to a socket highlighted in green</li>
            <li><b>Remove Link</b>: Simple click on the link when it turns red</li>
          </ul>

          <h4>TODO:</h4>
          <ul>
            <li>UX/UI: Undo changes</li>
            <li>UX/UI: Special nodes with display capabilities (images,datatables,...)</li>
            <li>UX/UI: Group nodes into a single box, exposing inputs and outputs</li>
            <li>UX/UI: Implement touch</li>
            <li>UX/UI: drop link in node to link to next compatible available input</li>
            <li>Registry: Synchronize registry with server(GET)</li>
            <li>Collaboration: Better concurrent editing/message passing (testing)</li>
            <li>Collaboration: Improve document synchronization</li>
            <li>FlowServer: Build the graph on the server and run</li>
            <li>FlowPkg: Create training mechanism</li>
            <li>FlowPkg: matrix pooling function example</li>
          </ul>
          <br>
          <small>&copy; Luis Figueiredo (luisf@hexasoftware.com)</small>
        </div>

        <!--:value="nodeData"
        @input="documentUpdate"-->
        <hx-split
          dir="horizontal"
          :resizeable="true"
          :split="funcsSize"
          @onSplitResize="funcsSizeUpdate"

        >
          <div class="flow-panel__container">
            <div class="flow-panel__selector">
              <button :class="{active:panel=='palette'}" @click="panel='palette'">Funcs</button>
              <button :class="{active:panel=='inspector'}" @click="panel='inspector';">Inspector</button>
            </div>
            <transition name="fade">
              <flow-funcs
                v-show="panel=='palette'"
                @toggleResizeable="funcsResizeable=!funcsResizeable"
                @toggleStickySockets="managerStickySockets=!managerStickySockets"
              />
            </transition>
            <transition name="fade">
              <flow-inspector
                ref="inspector"
                v-show="panel=='inspector'"
                @nodeProcess="nodeProcess($event)"
              />
            </transition>
          </div>
          <flow-editor
            ref="flowManager"
            @nodeInspect="nodeInspectStart(...arguments)"
            @nodeProcess="nodeProcess(...arguments)"
            @nodeDblClick="nodeInspectStart(...arguments,true)"
            @documentSave="documentSave"

            width="100%"
            height="100%"/>
        </hx-split>
      </div>
      <div class="app-chat">
        <app-chat/>
      </div>
      <flow-notifications/>
    </div>
  </div>
</template>
<script>
import {mapGetters, mapActions} from 'vuex'
import AppChat from '@/components/chat'
import FlowEditor from '@/components/flow/editor'
import FlowPanzoom from '@/components/flow/panzoom'
import FlowNotifications from '@/components/flow/notifications'
import FlowFuncs from './panel-funcs'
import FlowInspector from './panel-inspector'
import HxSplit from '@/components/shared/hx-split'
import HxModal from '@/components/shared/hx-modal'
import 'reset-css/reset.css'

import '@/assets/dark-theme.css'
import '@/assets/style.css'
// import nodeData from './nodedata'

export default {
  components: {
    FlowEditor,
    FlowPanzoom,
    FlowNotifications,
    FlowInspector,
    FlowFuncs,
    HxSplit,
    HxModal,
    AppChat
  },
  data () {
    return {
      panel: 'palette',

      funcsSize: '250px',
      funcsResizeable: false,

      dark: false
    }
  },
  computed: {
    ...mapGetters(['registry', 'activity'])
  },

  created () {
    /* let ctx = this.$route.params.context
    let urlPath = [
      window.location.host,
      ctx,
      'conn'
    ]
    let targetws = 'ws://' + urlPath.join('/')
    if (window.location.protocol === 'https:') {
      targetws = 'wss://' + urlPath.join('/')
    }
    this.$flowService.connect(targetws) */
    // Vue.use(FlowService, {location: targetws})
  },

  mounted () {
    // Handle incoming things
    this.$flowService.on('sessionJoin', (v) => {
      if (v.id !== this.$route.params.sessId) {
        this.$router.push('/' + this.$route.params.context + '/' + v.id) // Swap to ID
      }
    })
    this.$flowService.on('sessionLog', (v) => {
      console.log(v.data) // Temporary
    })

    // Connected
    /* this.$flowService.connected(() => {
      this.NOTIFICATION_ADD('Connected')
      // Make this in a service
      if (this.$route.params.sessId === undefined) {
        console.log('Creating new session')
        this.$flowService.sessionNew()
        return
      }
      this.$flowService.sessionLoad(undefined, this.$route.params.sessId)
    }) */
  },
  methods: {
    ...mapActions('flow', ['NODE_INSPECT', 'NOTIFICATION_ADD']),
    nodeInspectStart (node, changePane) { // node
      this.NODE_INSPECT(node.id)
      if (changePane) {
        this.panel = 'inspector'
      }
      if (this.panel !== 'inspector') {
        return
      }
      // this.nodeInspect = node

      // if (!changePane) { return }
      this.$nextTick(() => {
        // panel input
        if (!this.$refs.inspector) { }
        const insp = this.$refs.inspector
        let targetInput = insp.$refs.label
        if (insp.$refs.inputs && insp.$refs.inputs.length > 0) {
          targetInput = insp.$refs.inputs[0]
        } else if (insp.$refs.propss && insp.$refs.props.length > 0) {
          targetInput = insp.$refs.props[0]
        }
        if (!targetInput) {
          return
        }
        targetInput.setSelectionRange(0, targetInput.value.length)
        targetInput.focus()
      })
    },
    nodeProcess (node) {
      this.$flowService.nodeProcess(node.id)
    },
    funcsSizeUpdate (ev, size) {
      this.funcsSize = size
    },
    documentSave (nodeData) {
      this.$flowService.documentSave(nodeData)
    }

    // Update individual nodes/links
  }
}

</script>
<style>
.flow-main {
  height:100%;
  display:flex;
  flex-direction: column;
}

.app-flow-container {
  width:100%;
  position:relative;
  flex:1;
}

.flow-main .flow-container {
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
}

.flow-main .app-header {
  padding:0 14px;
  height: 50px;
  display:flex;
  justify-content: space-between;
  align-items: center;
}

.app-info {
  opacity:0.5;
  color: #aaa;
  font-size:10px;
  margin:20px;
  padding:20px;
  position:absolute;
  right:0;
  bottom:3%;
}

.flow-main .app-watermark {
  position:absolute;
  top:40%;
  text-align:center;
  width:100%;
  font-size:100px;
  text-shadow: 1px 1px 1px rgba(255,255,255,0.5), -1px -1px 1px rgba(0,0,0,0.05);
}

.split .splitter{
  flex-basis:0;
  position:relative;
  background: rgba(208,208,208,0.9);
}

.split:not(.resizeable) .content:first-child {
  transition: all var(--transition-speed);
}

.split.resizeable.horizontal .splitter::after {
  opacity:0.4;
  display:flex;
  justify-content: center;
  align-items: center;
  z-index:100;
  content:" ";
  position:absolute;
  top:0%;
  bottom:0%;
  left:0;
  width:10px;
  background: rgba(0,0,0,0.5);
  transition: var(--transition-speed);
}

.app-horizontal {
  height:100%;
  max-height:100%;
  display:flex;
  position:relative;
  flex-flow:row;
  overflow:hidden;
}

.app-chat {
  position:absolute;
  top:0;
  right:0;
  height:100%;
}

.flow-panel__container {
  display:flex;
  flex-flow:column;
  flex:1;
  overflow:hidden;
}

.flow-panel__selector {
  color: var(--normal);
  display:flex;
  align-content: stretch;
  flex-shrink: 0;
  height:50px;
  border-bottom:solid 1px var(--primary);
}

.flow-panel__selector button{
  flex:1;
}

/*
.flow-modal__info {
  padding-bottom:20px;
  display:flex;
  flex-flow:row;
}

.flow-modal__info > * {
  margin-right:10px;
  flex:1;
}

.flow-modal__body label {
  font-size:14px;
  display:flex;
  flex-flow:row;
  font-weight:bold;
  padding-bottom:10px;
}

.flow-modal__info .property {
  padding-left:20px;
  font-size:12px;
}

.flow-modal__properties-error .property{
  color: red;
}

.flow-modal__button-run {
  align-self: flex-end;
  width:100%;
}

.flow-modal__footer {
}*/

</style>