Flow/browser/vue-flow/src/components/panel-inspector.vue

<template>
  <div class="flow-inspector">
    <template v-if="nodeInspect">
      <!-- VIEWER -->
      <div class="flow-inspector__container">
        <!--<svg
          class="flow-view preview activity flow-node--detail flow-node--activity flow-linking flow-inspector__area flow-inspector--view "
          width="100%"
          height="100%"
          viewBox="0 0 300 200">
          <flow-panzoom>
            <flow-node
              style="pointer-events:none"
              ref="modalPreviewNode"
              :id="nodeInspect.id"
              transform="translate(150,100)"
              :match="{}"
              :label="nodeInspect.label"
              :inputs= "registry[nodeInspect.src].inputs"
              :output= "registry[nodeInspect.src].output"
              :activity= "activity[nodeInspect.id]"
              :nodeStyle= "registry[nodeInspect.src].style"
            />
          </flow-panzoom>
        </svg>-->

        <!-- DESCRIPTIONS -->
        <div class="flow-inspector__area flow-inspector--properties ">
          <label>ID</label>
          <div class="property">[{{ nodeInspect.id }}]</div>
          <label>src</label>
          <div class="property">{{ nodeInspect.src }}</div>
          <!--
          <label>Description</label>
          <div class="property">Bogus description</div>
          <label>Help</label>
          <div class="property">Connect to input a thing and goes to output another thing</div>
          -->
        </div>
        <div class="flow-inspector__area flow-inspector--inputs">
          <h3>Inputs defaults:</h3>
          <div
            class="flow-inspector__param"
            v-for="(n,i) in registry[nodeInspect.src].inputs"
            :key="i">
            <label>{{ n.name }}:{{ n.type }}</label>
            <input
              ref="inputs"
              type="text"
              v-model="nodeInspect.defaultInputs[i]"
              @input="localChange"
            >
          </div>
        </div>

        <div class="flow-inspector__area flow-inspector--activity ">
          <div
            v-if="activity && activity[nodeInspect.id] && activity[nodeInspect.id].data"
            class="flow-inspector--properties-result">
            <label>Result</label>
            <div class="property">{{ activity && activity[nodeInspect.id] && activity[nodeInspect.id].data }}</div>
          </div>
          <div
            v-if="activity && activity[nodeInspect.id] && activity[nodeInspect.id].error"
            class="flow-inspector--properties-error">
            <label>Error</label>
            <div class="property">{{ activity && activity[nodeInspect.id] && activity[nodeInspect.id].error }}</div>
          </div>
        </div>
        <!-- PARAMETERS -->
        <div class="flow-inspector--params flow-inspector__area" v-if="nodeInspect.prop" >
          <div class="flow-inspector__param" v-for="(v,k) in nodeInspect.prop">
            <label>{{ k }}</label>
            <input
              ref="props"
              type="text"
              v-model="nodeInspect.prop[k]" @input="localChange">
          </div>

        </div>

        <!-- STATIC PARAM -->
        <div class="flow-inspector__area  flow-inspector--static">
          <label>label</label>
          <input ref="label" type="text" v-model="nodeInspect.label" @input="localChange">
        </div>
      </div><!-- /container -->

      <div class="flow-inspector__area flow-inspector--control">
        <button
          class="primary-inverse"
          @click="NODE_PROCESS(nodeInspect.id)">Run</button>
      </div>
    </template>
    <template v-else>
      Select a node
    </template>
  </div>
</template>
<script>
import {mapGetters, mapActions} from 'vuex'
import FlowPanzoom from '@/components/flow/panzoom'
import FlowNode from '@/components/flow/node'
import HxCollapsible from '@/components/shared/hx-collapsible'

export default {
  name: 'FlowInspector',
  components: {FlowPanzoom, FlowNode, HxCollapsible},
  data () {
    return {
      nodeInspect: null
    }
  },
  computed: {
    ...mapGetters('flow', ['registry', 'activity'])
  },
  watch: {
    '$store.state.flow.nodeInspect' (node) {
      this.nodeInspect = JSON.parse(JSON.stringify(node))
    }
  },
  methods: {
    ...mapActions('flow', ['NODE_UPDATE', 'DOCUMENT_SYNC', 'NODE_PROCESS']),
    localChange () {
      this.NODE_UPDATE([JSON.parse(JSON.stringify(this.nodeInspect))])
      this.DOCUMENT_SYNC()
      // Seems that there might be browsers triggering the input before the v-model
      // so we defer the execution until we have nodeInspect updated
    }
  }
}
</script>
<style>
.flow-inspector {
  font-size:12px;
  flex:1;
  width:100%;
  overflow:hidden;
  height: available;
  display:flex;
  flex-flow:column;
  color: var(--normal);
}

.flow-inspector__container {
  padding:10px;
  display:flex;
  flex-flow:column;
  width:100%;
  flex-basis:100%;
  transition: all var(--transition-speed);
  overflow-x:hidden;
  overflow-y:auto;
}

.flow-inspector input {
  background: var(--background);
  color: var(--normal);
}

.flow-inspector__area{
  flex:1;
  padding: 10px 0;
  border-bottom: solid 1px rgba(150,150,150,0.3);
}

.flow-inspector__area h3{
  font-size:14px;
  color: var(--primary-lighter);
  padding-bottom:4px;
}

.flow-inspector__area label{
  display:block;
  font-weight:bold;
  padding:5px 0;
  margin:0;
  color: var(--primary-darker);
}

.flow-inspector--view {
  flex-basis:150px;
  flex-shrink: 0;
}

.flow-inspector__area .property {
  white-space: normal;
  word-wrap: break-word;

}

.flow-inspector--properties-error {
  color: red;
}

.flow-inspector--parameters {
  padding:20px;
}

.flow-inspector--control {
  flex:0;
  padding-top:10px;
}

.flow-inspector--control button {
  width: 100%;
  height:50px;
}
</style>