|
@@ -1,100 +1,83 @@
|
|
<template>
|
|
<template>
|
|
<div class="flow-main" :class="{dark:dark}">
|
|
<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>© Luis Figueiredo (luisf@hexasoftware.com)</small>
|
|
|
|
|
|
+ <div class="app-content" :class="{'app-content--blur':helpModal}">
|
|
|
|
+ <div class="app-header">
|
|
|
|
+ Flow
|
|
|
|
+ <div>
|
|
|
|
+ <button @click="helpModal=true">?</button>
|
|
|
|
+ <button @click="dark=!dark">{{ dark?'light':'dark' }}</button>
|
|
</div>
|
|
</div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="app-horizontal">
|
|
|
|
+ <div class="app-flow-container">
|
|
|
|
+ <div class="app-watermark">PROTOTYPE</div>
|
|
|
|
|
|
- <!--:value="nodeData"
|
|
|
|
|
|
+ <!--:value="nodeData"
|
|
@input="documentUpdate"-->
|
|
@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>
|
|
|
|
|
|
+ <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'"
|
|
|
|
+ />
|
|
|
|
+ </transition>
|
|
</div>
|
|
</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'"
|
|
|
|
- />
|
|
|
|
- </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/>
|
|
|
|
|
|
+ <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>
|
|
- <flow-notifications/>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
+ <hx-modal class="app-modal__info" v-if="helpModal" @close="helpModal=false">
|
|
|
|
+ <h4 slot="header">INFO</h4>
|
|
|
|
+ <app-info slot="body"/>
|
|
|
|
+ <div slot="footer">
|
|
|
|
+ <button class="primary-inverse" @click="helpModal=false">OK</button>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ </hx-modal>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
<script>
|
|
<script>
|
|
import {mapGetters, mapActions} from 'vuex'
|
|
import {mapGetters, mapActions} from 'vuex'
|
|
-import AppChat from '@/components/chat'
|
|
|
|
import FlowEditor from '@/components/flow/editor'
|
|
import FlowEditor from '@/components/flow/editor'
|
|
import FlowPanzoom from '@/components/flow/panzoom'
|
|
import FlowPanzoom from '@/components/flow/panzoom'
|
|
import FlowNotifications from '@/components/flow/notifications'
|
|
import FlowNotifications from '@/components/flow/notifications'
|
|
-import FlowFuncs from './panel-funcs'
|
|
|
|
import FlowInspector from './panel-inspector'
|
|
import FlowInspector from './panel-inspector'
|
|
|
|
+import FlowFuncs from './panel-funcs'
|
|
import HxSplit from '@/components/shared/hx-split'
|
|
import HxSplit from '@/components/shared/hx-split'
|
|
import HxModal from '@/components/shared/hx-modal'
|
|
import HxModal from '@/components/shared/hx-modal'
|
|
|
|
+import AppChat from '@/components/chat'
|
|
|
|
+import AppInfo from '@/components/app-info'
|
|
import 'reset-css/reset.css'
|
|
import 'reset-css/reset.css'
|
|
|
|
|
|
import '@/assets/dark-theme.css'
|
|
import '@/assets/dark-theme.css'
|
|
@@ -110,10 +93,12 @@ export default {
|
|
FlowFuncs,
|
|
FlowFuncs,
|
|
HxSplit,
|
|
HxSplit,
|
|
HxModal,
|
|
HxModal,
|
|
- AppChat
|
|
|
|
|
|
+ AppChat,
|
|
|
|
+ AppInfo
|
|
},
|
|
},
|
|
data () {
|
|
data () {
|
|
return {
|
|
return {
|
|
|
|
+ helpModal: false,
|
|
panel: 'palette',
|
|
panel: 'palette',
|
|
|
|
|
|
funcsSize: '250px',
|
|
funcsSize: '250px',
|
|
@@ -183,7 +168,19 @@ export default {
|
|
.flow-main {
|
|
.flow-main {
|
|
height:100%;
|
|
height:100%;
|
|
display:flex;
|
|
display:flex;
|
|
- flex-direction: column;
|
|
|
|
|
|
+ flex-flow: column;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.app-content {
|
|
|
|
+ display:flex;
|
|
|
|
+ flex-flow:column;
|
|
|
|
+ flex-basis:100%;
|
|
|
|
+ flex:1;
|
|
|
|
+ transition: all var(--transition-speed);
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.app-content--blur {
|
|
|
|
+ filter: blur(7px);
|
|
}
|
|
}
|
|
|
|
|
|
.app-flow-container {
|
|
.app-flow-container {
|
|
@@ -208,17 +205,6 @@ export default {
|
|
align-items: center;
|
|
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 {
|
|
.flow-main .app-watermark {
|
|
position:absolute;
|
|
position:absolute;
|
|
top:40%;
|
|
top:40%;
|