Implemented editor
This commit is contained in:
parent
6ea50532cc
commit
5676ec38d2
@ -9,6 +9,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"core-js": "^3.6.5",
|
||||
"lodash": "^4.17.20",
|
||||
"node-sass": "^5.0.0",
|
||||
"sass-loader": "^10.1.0",
|
||||
"vue": "^2.6.12",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div>
|
||||
<md-tabs>
|
||||
<md-tabs md-dynamic-height>
|
||||
<md-tab id="tab-login" md-label="Login" exact>
|
||||
<login/>
|
||||
</md-tab>
|
||||
|
||||
@ -1,36 +1,106 @@
|
||||
<template>
|
||||
<div class="flowchart-node" :style="nodeStyle"
|
||||
@mousedown.prevent="handleMousedown"
|
||||
@mouseover.prevent="handleMouseOver"
|
||||
@mouseleave.prevent="handleMouseLeave"
|
||||
@dblclick.prevent="editProperties"
|
||||
v-bind:class="{selected: options.selected === id}">
|
||||
<div>
|
||||
|
||||
<md-dialog :md-active.sync="show.editor">
|
||||
<md-dialog-title>{{ capitalizedType }} preferences</md-dialog-title>
|
||||
|
||||
<form class="editor-form">
|
||||
|
||||
<div v-if="type === 'ingest'">
|
||||
|
||||
<md-field>
|
||||
<label>Url</label>
|
||||
<md-input readonly="true" v-model="editorData.url"></md-input>
|
||||
</md-field>
|
||||
|
||||
</div>
|
||||
<div v-else-if="type === 'encoder'">
|
||||
|
||||
<md-field>
|
||||
<label>Width</label>
|
||||
<md-input type="number" v-model="editorData.width"></md-input>
|
||||
</md-field>
|
||||
|
||||
<md-field>
|
||||
<label>Height</label>
|
||||
<md-input type="number" v-model="editorData.height"></md-input>
|
||||
</md-field>
|
||||
|
||||
<md-field>
|
||||
<label>Bitrate</label>
|
||||
<md-input type="number" v-model="editorData.bitrate"></md-input>
|
||||
</md-field>
|
||||
|
||||
|
||||
</div>
|
||||
<div v-else-if="type === 'restreamer'">
|
||||
|
||||
<md-field>
|
||||
<label>Url</label>
|
||||
<md-input v-model="editorData.url"></md-input>
|
||||
</md-field>
|
||||
|
||||
<md-field>
|
||||
<label>Stream Key</label>
|
||||
<md-input type="password" v-model="editorData.streamkey"></md-input>
|
||||
</md-field>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
|
||||
<md-dialog-actions>
|
||||
<md-button @click="show.editor = false">Discard</md-button>
|
||||
<md-button class="md-primary" @click="saveEdit">Save</md-button>
|
||||
</md-dialog-actions>
|
||||
</md-dialog>
|
||||
|
||||
<div class="flowchart-node" :style="nodeStyle"
|
||||
@mousedown.prevent="handleMousedown"
|
||||
@mouseover.prevent="handleMouseOver"
|
||||
@mouseleave.prevent="handleMouseLeave"
|
||||
@dblclick.prevent="editProperties"
|
||||
v-bind:class="{selected: options.selected === id}">
|
||||
|
||||
<!--- Input port --->
|
||||
<div class="node-port node-input"
|
||||
v-if="haveInput"
|
||||
@mousedown.prevent
|
||||
@mouseup.prevent="inputMouseUp">
|
||||
</div>
|
||||
|
||||
<!--- The box itself --->
|
||||
<div class="node-main">
|
||||
<div v-text="capitalizedType" class="node-type"></div>
|
||||
<div class="node-content">
|
||||
<table>
|
||||
<tr :key="k" v-for="(v, k) in data">
|
||||
<th>{{ k }}</th>
|
||||
<td>{{ v }}</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--- Output port --->
|
||||
<div class="node-port node-output"
|
||||
v-if="haveOutput"
|
||||
@mousedown.prevent="outputMouseDown">
|
||||
</div>
|
||||
|
||||
<div v-show="show.delete" class="node-delete">×</div>
|
||||
|
||||
<!--- Input port --->
|
||||
<div class="node-port node-input"
|
||||
v-if="haveInput"
|
||||
@mousedown.prevent
|
||||
@mouseup.prevent="inputMouseUp">
|
||||
</div>
|
||||
|
||||
<!--- The box itself --->
|
||||
<div class="node-main">
|
||||
<div v-text="type" class="node-type"></div>
|
||||
<div class="node-label">Content</div>
|
||||
</div>
|
||||
|
||||
<!--- Output port --->
|
||||
<div class="node-port node-output"
|
||||
v-if="haveOutput"
|
||||
@mousedown.prevent="outputMouseDown">
|
||||
</div>
|
||||
|
||||
<div v-show="show.delete" class="node-delete">×</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import {cloneDeep, capitalize} from 'lodash';
|
||||
|
||||
export default {
|
||||
name: 'FlowchartNode',
|
||||
props: {
|
||||
@ -79,7 +149,9 @@ export default {
|
||||
return {
|
||||
show: {
|
||||
delete: false,
|
||||
}
|
||||
editor: false
|
||||
},
|
||||
editorData: {}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
@ -97,6 +169,9 @@ export default {
|
||||
},
|
||||
haveOutput() {
|
||||
return this.type !== "restreamer"
|
||||
},
|
||||
capitalizedType() {
|
||||
return capitalize(this.type);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@ -121,7 +196,12 @@ export default {
|
||||
this.$emit('linkingStop')
|
||||
},
|
||||
editProperties() {
|
||||
this.$emit('update:data', {"text": "asd"});
|
||||
this.editorData = cloneDeep(this.data);
|
||||
this.show.editor = true;
|
||||
},
|
||||
saveEdit() {
|
||||
this.show.editor = false;
|
||||
this.$emit('update:data', this.editorData);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -146,17 +226,24 @@ $portSize: 14;
|
||||
transform-origin: top left;
|
||||
|
||||
.node-main {
|
||||
text-align: center;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
.node-type {
|
||||
background: $themeColor;
|
||||
color: white;
|
||||
font-size: 13px;
|
||||
padding: 6px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.node-label {
|
||||
.node-content {
|
||||
font-size: 13px;
|
||||
|
||||
th {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@ -206,6 +293,10 @@ $portSize: 14;
|
||||
}
|
||||
}
|
||||
|
||||
.editor-form {
|
||||
padding: 1.5em;
|
||||
}
|
||||
|
||||
.selected {
|
||||
box-shadow: 0 0 0 2px $themeColor;
|
||||
}
|
||||
|
||||
@ -116,7 +116,6 @@ export default {
|
||||
mounted() {
|
||||
this.rootDivOffset.top = this.$el ? this.$el.offsetTop : 0;
|
||||
this.rootDivOffset.left = this.$el ? this.$el.offsetLeft : 0;
|
||||
// console.log(22222, this.rootDivOffset);
|
||||
},
|
||||
methods: {
|
||||
findNodeWithID(id) {
|
||||
|
||||
@ -5,14 +5,22 @@
|
||||
<md-dialog-title>Select the type of the new element</md-dialog-title>
|
||||
|
||||
|
||||
<md-button @click="newElement('ingest')"><md-icon>vertical_align_bottom</md-icon> Ingest</md-button>
|
||||
<md-button @click="newElement('ingest')">
|
||||
<md-icon>vertical_align_bottom</md-icon>
|
||||
Ingest
|
||||
</md-button>
|
||||
<i></i> <!-- This is to prevent margin collapse -->
|
||||
|
||||
<md-button @click="newElement('encoder')"><md-icon>gradient</md-icon> Encoder</md-button>
|
||||
<md-button @click="newElement('encoder')">
|
||||
<md-icon>gradient</md-icon>
|
||||
Encoder
|
||||
</md-button>
|
||||
<i></i>
|
||||
|
||||
<md-button @click="newElement('restreamer')"><md-icon>publish</md-icon> Restreamer</md-button>
|
||||
|
||||
<md-button @click="newElement('restreamer')">
|
||||
<md-icon>publish</md-icon>
|
||||
Restreamer
|
||||
</md-button>
|
||||
|
||||
|
||||
</md-dialog>
|
||||
@ -64,11 +72,11 @@
|
||||
<md-icon>publish</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button @click="newElement('encoder')" class="md-icon-button">
|
||||
<md-button @click="newElement('encoder')" class="md-icon-button">
|
||||
<md-icon>gradient</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button @click="newElement('ingest')" class="md-icon-button">
|
||||
<md-button @click="newElement('ingest')" class="md-icon-button">
|
||||
<md-icon>vertical_align_bottom</md-icon>
|
||||
</md-button>
|
||||
|
||||
@ -101,21 +109,21 @@ export default {
|
||||
x: 100,
|
||||
y: 110,
|
||||
type: 'ingest',
|
||||
data: {"text": "as"},
|
||||
data: {"url": "rtmp://videon.test.kmlabz.com/test:6554"},
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
x: 357,
|
||||
y: 80,
|
||||
type: 'restreamer',
|
||||
data: {"text": "asd"},
|
||||
data: {"url": "rtmp://youtube.com/live/stream/ysos:55223", "streamkey": "asdjnao9gj9833tjkq389fjae9jf"},
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
x: 557,
|
||||
y: 80,
|
||||
type: 'encoder',
|
||||
data: {"text": "asdasd"}
|
||||
data: {"bitrate": 8000, "width": 600, "height": 800}
|
||||
}
|
||||
],
|
||||
links: [
|
||||
|
||||
Loading…
Reference in New Issue
Block a user