Flow/browser/vue-flow/src/components/flow/modal-info.vue

<template>
  <div class="app-info markdown-body" v-html="content">

    <!--<section class="app-info__section app-info--view">
      <h4>Editor</h4>
      <ul>
        <li><b>Collaboration</b>: Using the same url address, others can join the session</li>
        <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>Reset</b>: Reset view by pressing on the reset button</li>
      </ul>
    </section>
    <section class="app-info__section app-info--flow">
      <h4>Flow:</h4>
      <p>
        A flow works by requesting the previous nodes the results of its operation, so the starting node will
        be the node we want the result of, unattached nodes wont be executed
      </p>
      <p>

        All nodes are Go functions.
        here's an example of a Flow app with a node with a single output:
        <a target="_blank" :href="'http://'+ location.host +'/c1.html'">sample1</a><br>
        Every function can be registered including from external packages as shown in
        <a target="_blank" :href="'http://'+ location.host +'/c2.html'">sample2</a><br>
        Describing functions:
        <a target="_blank" :href="'http://'+ location.host +'/c3.html'">sample3</a><br>

      </p>
      <ul>
        <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>
    </section>
    <div class="app-info__section app-info__triggers">
      <h4>Triggers</h4>
      <p>
        Triggers works when a node changes its status it will call the linked node, triggers will have filters
        such as (finish, error, start), this will be useful to create CI pipelines by triggering different processes
        (i.e: running a container to send an email informing the status of the build)
      </p>
    </div>

    <h4>TODO:</h4>
    <ul>
      <li>UX/UI: create undoer</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>Collaboration: Better concurrent editing/message passing (testing)</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>
</template>
<script>
import md from '@/assets/doc/appinfo.md'
import 'github-markdown-css'
import 'highlight.js/styles/monokai.css'

export default {

  data () {
    return {
      content: md
    }
  }
}
</script>
<style>
.app-info {
  flex:1;
  padding-top:20px;
}

.hx-modal__container {
  width:70%;
}

.markdown-body a {
  color: var(--primary);
  text-decoration: none;
}

/*
.app-info--info {
  font-size:14px;
}

.app-info__section h4 {
  margin-top:20px;
  margin-bottom:5px;
  color: var(--primary);
}

.app-info__section p {
  font-size:14px;
  margin:5px 15px 15px 4px;
  padding:20px 10px;
  background: var(--background-secondary);
}

.app-info__section li {
  padding:4px;
}*/

</style>