Skip to content

Z
zeroing-editor
Commit 3127303a authored by rockyl's avatar rockyl
Browse files
Options

修复图片素材尺寸错误的问题 

修复过程节点连线如果移出没有取消标记的问题
修复没有入口的节点连线问题
增加过程列表
完善增加env数据
parent 2b7b390c
Hide whitespace changes
Inline Side-by-side
Showing with 490 additions and 238 deletions
mock/api/editor/info.json deleted 100644 → 0
View file @ 2b7b390c
{
"success": true,
"data": {
"name": "Zeroing Editor",
"version": "1.0.0",
"templates": {
"builtin": ["blank"],
"custom": []
},
"components": [
],
"processes": [
]
}
}
\ No newline at end of file
mock/api/editor/info/index.js 0 → 100644
View file @ 3127303a
const data = {
success: true,
data: {
name: "Zeroing Editor",
version: "1.0.0",
templates: {
builtin: ["blank"],
custom: []
},
processes: [
{
id: 'entry',
name: 'Entry',
group: 'base',
options: {},
output: ['success'],
},
{
id: 'wait',
name: 'Wait',
group: 'base',
options: {
duration: {type: 'number', default: 1000},
},
output: ['complete'],
},
{
id: 'test',
name: 'Test',
group: 'test',
options: {
duration: {type: 'number', default: 1000},
},
output: ['complete'],
},
{
id: 'prefab1',
name: 'Prefab1',
isPrefab: true,
sub: {
1: {
uuid: '1',
alias: '入口',
meta: 'entry',
output: {
success: ['2'],
},
},
2: {
uuid: '2',
meta: 'wait',
alias: '等待',
options: {
duration: 500,
},
},
}
}
],
scripts: [
{
id: 'wave',
name: 'Wave',
options: {
duration: {type: 'number', default: 1000},
type: {type: 'string', default: 'yoyo'},
ease: {type: 'string', default: 'linear'},
autoPlay: {type: 'boolean', default: false},
}
}
]
},
};
module.exports = function () {
return data;
};
mock/api/project/query/data/index.js
View file @ 3127303a
...@@ -4,59 +4,7 @@ ...@@ -4,59 +4,7 @@
const data = { const data = {
"views": [ "views": [
{
"name": "view1",
"children": [
{
name: 'node1',
type: 'node',
uuid: 'aaa',
properties: {
x: 0,
y: 0,
width: 0,
height: 0,
rotation: 0,
scaleX: 1,
scaleY: 1,
alpha: 1,
visible: true,
}
},
{
name: 'node2',
type: 'label',
uuid: 'bbb',
properties: {
text: '',
color: 'black',
size: 12,
align: 'left',
}
},
{
"name": "node3",
type: 'image',
uuid: 'ccc',
properties: {
source: '',
}
},
{
"name": "node4",
type: 'rect',
uuid: 'ddd',
properties: {
fillColor: 'white',
strokeColor: 'black',
strokeWidth: 1,
}
},
]
},
{
"name": "view2"
}
], ],
"assets": [ "assets": [
{ {
......
src/locales/en.json
View file @ 3127303a
...@@ -21,6 +21,7 @@ ...@@ -21,6 +21,7 @@
"Project does not exist": "Project does not exist", "Project does not exist": "Project does not exist",
"Project name": "Project name", "Project name": "Project name",
"Data mapping": "Data mapping", "Data mapping": "Data mapping",
"Behavior Editor": "Behavior Editor",
"Template": "Template", "Template": "Template",
"Preparing": "Preparing…", "Preparing": "Preparing…",
"Deleting": "Deleting…", "Deleting": "Deleting…",
...@@ -36,6 +37,7 @@ ...@@ -36,6 +37,7 @@
"Duplicate project success": "Duplicate project success", "Duplicate project success": "Duplicate project success",
"Project name cannot be empty": "Project name cannot be empty", "Project name cannot be empty": "Project name cannot be empty",
"This action will permanently delete project": "This action will permanently delete project[{projectName}], continue?", "This action will permanently delete project": "This action will permanently delete project[{projectName}], continue?",
"Fetching projects": "Fetching projects…",
"Failed to fetch env": "Failed to fetch env", "Failed to fetch env": "Failed to fetch env",
"Failed to fetch projects": "Failed to fetch projects", "Failed to fetch projects": "Failed to fetch projects",
"Failed to fetch project": "Failed to fetch project", "Failed to fetch project": "Failed to fetch project",
......
src/store/modules/env.js
View file @ 3127303a
...@@ -8,24 +8,52 @@ import {envApi} from "../../api"; ...@@ -8,24 +8,52 @@ import {envApi} from "../../api";
export const envStore = { export const envStore = {
state: { state: {
initialized: false,
name: 'Zeroing Editor', name: 'Zeroing Editor',
version: '1.0.0', version: '1.0.0',
templates: { templates: {
builtin: ['blank'], builtin: ['blank'],
custom: [], custom: [],
}, },
components: [],
processes: [], processes: [],
scripts: [],
}, },
mutations: { mutations: {
updateEnv(state, env) { updateEnv(state, env) {
Object.assign(state, env); Object.assign(state, env);
state.initialized = true;
}, },
}, },
getters: {
prefabProcessTree: state => {
return groupProcesses(state.processes, process => process.isPrefab);
},
normalProcessTree: state => {
return groupProcesses(state.processes, process => !process.isPrefab);
}
},
actions: { actions: {
async updateEnv({commit}) { async updateEnv({state, commit}) {
const env = await envApi.fetchEnv(); if(!state.initialized){
commit('updateEnv', env); const env = await envApi.fetchEnv();
commit('updateEnv', env);
}
} }
} }
}; };
function groupProcesses(processes, filterFunc) {
const result = [];
processes
.filter(filterFunc)
.forEach(process => {
const groupName = process.group || 'others';
let group = result.find(group => group.name === groupName);
if (!group) {
group = {name: groupName, children: []};
result.push(group);
}
group.children.push(process);
});
return result;
}
src/themes/light/base.scss
View file @ 3127303a
...@@ -22,3 +22,8 @@ html, body, #app { ...@@ -22,3 +22,8 @@ html, body, #app {
background-color: rgba(0,0,0,0.7); background-color: rgba(0,0,0,0.7);
z-index: 2000; z-index: 2000;
} }
.full-size{
width: 100%;
height: 100%;
}
src/themes/light/behavior.scss
View file @ 3127303a
...@@ -2,136 +2,152 @@ ...@@ -2,136 +2,152 @@
$dock-point-width: 9px; $dock-point-width: 9px;
.behavior {
width: 100%;
height: 100%;
.svg-board { .behavior-editor-dialog {
width: 100%; display: flex;
height: 100%; flex-direction: column;
.line { .el-dialog__body {
stroke: #979797; flex: 1;
padding: 5px;
}
&.hover, &:hover { .process-pane {
stroke: $--color-primary;
stroke-dasharray: 5, 1;
}
}
} .behavior {
border: 1px solid $--border-color-base;
.node { .background{
display: flex;
flex-direction: column;
min-width: 100px;
background-color: $--background-color-base; background-color: $--background-color-base;
border: 1px solid $block-border-blur-background-color;
position: relative;
border-radius: 5px;
outline: none;
user-select: none;
margin: 0 $dock-point-width;
&:hover {
border-color: $block-border-hover-background-color;
& > .header {
background-color: $block-border-hover-background-color;
}
}
&:focus { }
border-color: $block-border-focus-background-color;
& > .header { .board {
background-color: $block-border-focus-background-color; .svg-board {
} .line {
} stroke: #979797;
.header { &.hover, &:hover {
min-height: 12px; stroke: $--color-primary;
background-color: $block-border-blur-background-color; stroke-dasharray: 5, 1;
border-top-left-radius: 3px; }
border-top-right-radius: 3px;
padding: 3px;
font-size: 12px;
color: white;
}
.body {
display: flex;
flex-direction: column;
padding: 3px;
font-size: 12px;
color: $--color-text-primary;
.field-item { }
.node {
display: flex; display: flex;
flex-direction: column;
min-width: 100px;
background-color: $--background-color-base;
border: 1px solid $block-border-blur-background-color;
position: relative;
border-radius: 5px;
outline: none;
user-select: none;
margin: 0 $dock-point-width;
.key { &:hover {
flex: 1; border-color: $block-border-hover-background-color;
width: 0;
overflow: hidden;
}
.value { & > .header {
flex: 1; background-color: $block-border-hover-background-color;
text-align: right; }
} }
}
} &:focus {
border-color: $block-border-focus-background-color;
.dock { & > .header {
position: absolute; background-color: $block-border-focus-background-color;
top: 50%; }
transform: translateY(-50%); }
display: flex;
flex-direction: column;
.point { .header {
border: 1px solid $block-border-blur-background-color; min-height: 12px;
padding: 1px; background-color: $block-border-blur-background-color;
margin-bottom: 5px; border-top-left-radius: 3px;
background-color: white; border-top-right-radius: 3px;
padding: 3px;
div { font-size: 12px;
width: 3px; color: white;
height: 3px;
border: 1px solid $block-border-blur-background-color;
border-radius: 3px;
} }
&:hover { .body {
border-color: $--color-primary; display: flex;
flex-direction: column;
padding: 3px;
font-size: 12px;
color: $--color-text-primary;
.field-item {
display: flex;
.key {
flex: 1;
width: 0;
overflow: hidden;
}
.value {
flex: 1;
text-align: right;
}
}
}
& > div { .dock {
border-color: $--color-primary; position: absolute;
top: 50%;
transform: translateY(-50%);
display: flex;
flex-direction: column;
.point {
border: 1px solid $block-border-blur-background-color;
padding: 1px;
margin-bottom: 5px;
background-color: white;
div {
width: 3px;
height: 3px;
border: 1px solid $block-border-blur-background-color;
border-radius: 3px;
}
&:hover {
border-color: $--color-primary;
& > div {
border-color: $--color-primary;
}
}
&:last-child {
margin-bottom: 0;
}
} }
} }
&:last-child { .input {
margin-bottom: 0; @extend .dock;
left: -$dock-point-width;
}
.output {
@extend .dock;
right: -$dock-point-width;
} }
} }
} }
}
.input { .properties {
@extend .dock;
left: -$dock-point-width;
}
.output {
@extend .dock;
right: -$dock-point-width;
}
} }
} }
}
.properties { \ No newline at end of file
width: 100%;
height: 100%;
background-color: #5396da;
}
}
src/themes/light/inspector.scss
View file @ 3127303a
.zero-inspector-form{ .inspector-tabs {
.el-input-number.el-input-number--mini,.el-select.el-select--mini{ flex: 1;
width: 100%; border: 0 !important;
}
.el-slider.zero-slider { .el-tabs__item {
width: 180px; height: 25px;
} line-height: 25px;
.zero-slider .el-slider__runway.show-input { }
width: 100px;
} .zero-inspector-form {
.zero-slider > .el-slider__input { .el-input-number.el-input-number--mini, .el-select.el-select--mini {
width: 60px; width: 100%;
} }
}
\ No newline at end of file .el-slider.zero-slider {
width: 180px;
}
.zero-slider .el-slider__runway.show-input {
width: 100px;
}
.zero-slider > .el-slider__input {
width: 60px;
}
}
}
src/views/Editor.vue
View file @ 3127303a
...@@ -60,10 +60,31 @@ ...@@ -60,10 +60,31 @@
computed: { computed: {
...mapGetters([]), ...mapGetters([]),
}, },
mounted() { async mounted() {
document.addEventListener('keydown', this.onKeyPress);
await playWaiting(this.prepare(), this.$t('Preparing')).catch(e => {});
this.loadProject(); this.loadProject();
}, },
destroyed(){
document.removeEventListener('keydown', this.onKeyPress)
},
methods: { methods: {
prepare(){
return Promise.all([
this.updateEnv(),
])
},
onKeyPress(e){
if(e.key === 's' && (e.ctrlKey||e.metaKey)){
e.preventDefault();
this.saveProject();
return false;
}
},
async loadProject(){ async loadProject(){
const {projectID} = this.$route.params; const {projectID} = this.$route.params;
if (await this.localVersionExist(projectID)) { if (await this.localVersionExist(projectID)) {
...@@ -170,6 +191,7 @@ ...@@ -170,6 +191,7 @@
'loadFromRemote', 'loadFromRemote',
"saveToLocal", "saveToLocal",
"saveToRemote", "saveToRemote",
'updateEnv',
]) ])
} }
} }
......
src/views/Editor/Assets/AssetsShow.vue
View file @ 3127303a
<template> <template>
<div <div
v-show="visible" v-if="visible"
class="modal-layer"> class="modal-layer">
<transition <transition
name="el-fade-in" name="el-fade-in"
...@@ -12,12 +12,13 @@ ...@@ -12,12 +12,13 @@
<div class="wrapper"> <div class="wrapper">
<el-button class="close-button" size="mini" circle icon="el-icon-close" @click="hide"></el-button> <el-button class="close-button" size="mini" circle icon="el-icon-close" @click="hide"></el-button>
<div class="name-bar"> <div class="name-bar">
<el-input v-for="(field, index) in showFields" :key="index" size="mini" class="item" v-model="file[field]" readonly> <el-input v-for="(field, index) in showFields" :key="index" size="mini" class="item" v-model="file[field]"
readonly>
<template slot="prepend"><span class="field">{{field}}</span></template> <template slot="prepend"><span class="field">{{field}}</span></template>
<el-button slot="append" icon="el-icon-document-copy" @click="copyValue(field)"></el-button> <el-button slot="append" icon="el-icon-document-copy" @click="copyValue(field)"></el-button>
</el-input> </el-input>
</div> </div>
<el-image class="big-image" :src="imageUrl" fit="contain" @load="onImageLoaded"/> <el-image class="big-image" :src="imageUrl" fit="contain"/>
<div class="image-info"> <div class="image-info">
<span class="size">{{size}}</span> <span class="size">{{size}}</span>
</div> </div>
...@@ -45,7 +46,7 @@ ...@@ -45,7 +46,7 @@
} }
}, },
watch: { watch: {
file(){ file() {
this.size = ''; this.size = '';
} }
}, },
...@@ -59,6 +60,13 @@ ...@@ -59,6 +60,13 @@
this.visible = true; this.visible = true;
this.file = file; this.file = file;
document.body.appendChild(this.$el); document.body.appendChild(this.$el);
let img = new Image();
img.onload = () => {
const {width, height} = img;
this.size = width + ' x ' + height;
};
img.src = this.imageUrl;
}, },
hide() { hide() {
if (this.$el && this.$el.parentNode) { if (this.$el && this.$el.parentNode) {
...@@ -83,10 +91,6 @@ ...@@ -83,10 +91,6 @@
duration: 700, duration: 700,
}); });
}, },
onImageLoaded(e) {
const {width, height} = e.target;
this.size = width + ' x ' + height;
}
} }
} }
</script> </script>
......
src/views/Editor/Inspector.vue
View file @ 3127303a
<template> <template>
<pane icon="el-icon-s-operation" :title="$t('panes.Inspector')"> <pane icon="el-icon-s-operation" :title="$t('panes.Inspector')">
<div class="zero-inspector-form"> <el-tabs v-model="tab" type="border-card" class="inspector-tabs">
<el-form ref="form" size="mini" v-if="activeComponent.uuid" :model="form" label-width="80px"> <el-tab-pane label="Props" name="properties">
<el-divider content-position="left">配置</el-divider> <div class="zero-inspector-form">
<el-form-item label="名称"> <el-form ref="form" size="mini" v-if="activeComponent.uuid" :model="form" label-width="80px">
<el-input v-model="form.name" @input="v => handleChange('name', v)"></el-input> <el-divider content-position="left">配置</el-divider>
</el-form-item> <el-form-item label="名称">
<el-form-item label="类型"> <el-input v-model="form.name" @input="v => handleChange('name', v)"></el-input>
<el-select v-model="form.type" @change="v => handleChange('type', v)" placeholder="请选择类型"> </el-form-item>
<el-option v-for="cmp in componentsMap" :key="cmp.value" :label="cmp.label" :value="cmp.value"></el-option> <el-form-item label="类型">
</el-select> <el-select v-model="form.type" @change="v => handleChange('type', v)" placeholder="请选择类型">
</el-form-item> <el-option v-for="cmp in componentsMap" :key="cmp.value" :label="cmp.label" :value="cmp.value"></el-option>
<template v-for="(p, key) in cmpProps"> </el-select>
<el-form-item v-if="key !== 'groupName'" :id="activeComponent.uuid + '-' + key" :key="activeComponent.uuid + key" :label="p.title"> </el-form-item>
<!-- {{key}} --> <template v-for="(p, key) in cmpProps">
<dynamic-component :label="key" :item="p" :properties="activeComponent.properties"></dynamic-component> <el-form-item v-if="key !== 'groupName'" :id="activeComponent.uuid + '-' + key" :key="activeComponent.uuid + key" :label="p.title">
</el-form-item> <!-- {{key}} -->
</template> <dynamic-component :label="key" :item="p" :properties="activeComponent.properties"></dynamic-component>
</el-form> </el-form-item>
</div> </template>
</el-form>
</div>
</el-tab-pane>
<el-tab-pane label="Behavior" name="behavior">
<behavior-tab/>
</el-tab-pane>
</el-tabs>
</pane> </pane>
</template> </template>
...@@ -28,12 +35,14 @@ import Pane from '../../components/Pane'; ...@@ -28,12 +35,14 @@ import Pane from '../../components/Pane';
import _ from 'lodash'; import _ from 'lodash';
import { componentsMap, getCmpProps } from '../../utils/common'; import { componentsMap, getCmpProps } from '../../utils/common';
import dynamicComponent from './components/dynamicComponent'; import dynamicComponent from './components/dynamicComponent';
import BehaviorTab from "./Inspector/BehaviorTab";
export default { export default {
name: 'Inspector', name: 'Inspector',
components: { Pane, 'dynamic-component': dynamicComponent }, components: {BehaviorTab, Pane, 'dynamic-component': dynamicComponent },
data() { data() {
return { return {
tab: 'properties',
componentsMap, componentsMap,
form: { form: {
name: '', name: '',
......
src/views/Editor/Inspector/BehaviorTab.vue 0 → 100644
View file @ 3127303a
<template>
<div>
<el-button @click="showBehaviorEditor">行为编辑器</el-button>
<behavior-editor-dialog ref="behaviorEditorDialog"></behavior-editor-dialog>
</div>
</template>
<script>
import BehaviorEditorDialog from "../dialogs/BehaviorEditorDialog";
export default {
name: "BehaviorTab",
components: {BehaviorEditorDialog},
methods: {
showBehaviorEditor() {
this.$refs.behaviorEditorDialog.show();
}
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
src/views/Editor/Views.vue
View file @ 3127303a
...@@ -121,7 +121,7 @@ export default { ...@@ -121,7 +121,7 @@ export default {
this.addNode({ this.addNode({
node: data, node: data,
type, type,
name: 'node' name: type,
}); });
} }
break; break;
......
src/views/Editor/behavior-editor/BehaviorEditor.vue
View file @ 3127303a
<template> <template>
<div class="behavior"> <div class="behavior">
<split-panes class="pane-container"> <split-panes>
<board :builtins="builtins" :mainProcess="mainProcess" splitpanes-min="20" :splitpanes-size="80"/> <split-panes splitpanes-min="20" :splitpanes-size="20" horizontal>
<div class="properties" splitpanes-min="20" :splitpanes-size="20"> <process-list :data="prefabProcessTree" class="background full-size" splitpanes-min="20" :splitpanes-size="50"/>
<process-list :data="normalProcessTree" class="background full-size" splitpanes-min="20" :splitpanes-size="50"/>
</div> </split-panes>
<board ref="board" class="background full-size" :builtins="builtins" :mainProcess="mainProcess"
splitpanes-min="20" :splitpanes-size="60"/>
<properties class="background full-size" splitpanes-min="20" :splitpanes-size="20"/>
</split-panes> </split-panes>
</div> </div>
</template> </template>
<script> <script>
import {mapState, mapMutations, mapGetters} from 'vuex'
import Board from "./Board"; import Board from "./Board";
import SplitPanes from 'splitpanes' import SplitPanes from 'splitpanes'
import ProcessList from "./ProcessList";
import Properties from "./Properties";
const builtins = { const builtins = {
entry: { entry: {
...@@ -165,17 +171,29 @@ resolve({type: result ? 'equal' : 'unequal'}); ...@@ -165,17 +171,29 @@ resolve({type: result ? 'equal' : 'unequal'});
export default { export default {
name: "BehaviorEditor", name: "BehaviorEditor",
components: {Board,SplitPanes,}, components: {Properties, ProcessList, Board, SplitPanes,},
data() { data() {
return { return {
builtins, builtins,
mainProcess, mainProcess,
} }
}, },
computed: {
...mapState({
processes: state => state.env.processes,
}),
...mapGetters([
'prefabProcessTree',
'normalProcessTree'
])
},
mounted() { mounted() {
}, },
methods: { methods: {
measure() {
this.$refs.board.measure();
}
} }
} }
</script> </script>
......
src/views/Editor/behavior-editor/Board.vue
View file @ 3127303a
<template> <template>
<div class="behavior"> <div class="board">
<svg class="svg-board" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <svg class="svg-board full-size" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="layer" stroke-width="2" fill="none" fill-rule="evenodd"> <g id="layer" stroke-width="2" fill="none" fill-rule="evenodd">
<link-line v-for="(line, key, index) in lines" :data="line" :key="index" @dblclick="onDeleteLine"></link-line> <link-line v-for="(line, key, index) in lines" :data="line" :key="index" @dblclick="onDeleteLine"></link-line>
<path v-show="lineDrawing.visible" class="line hover" :d="lineDrawing.path"></path> <path v-show="lineDrawing.visible" class="line hover" :d="lineDrawing.path"></path>
...@@ -24,6 +24,7 @@ ...@@ -24,6 +24,7 @@
import ToolTip from "./Board/ToolTip"; import ToolTip from "./Board/ToolTip";
import {DOCK_POINT_OFFSET} from "../../../config"; import {DOCK_POINT_OFFSET} from "../../../config";
import {state} from "./Board/state"; import {state} from "./Board/state";
import events from "../../../global-events";
export default { export default {
name: "Board", name: "Board",
...@@ -47,9 +48,19 @@ ...@@ -47,9 +48,19 @@
} }
}, },
mounted() { mounted() {
this.updateLines();
}, },
methods: { methods: {
measure(){
const {x, y} = this.$el.getBoundingClientRect();
console.log(x, y);
state.boardOffset.x = x;
state.boardOffset.y = y;
events.$emit('update-dock-point-pos');
this.updateLines();
},
updateLines() { updateLines() {
this.lines = {}; this.lines = {};
for (let id in this.processMap) { for (let id in this.processMap) {
...@@ -64,7 +75,6 @@ ...@@ -64,7 +75,6 @@
} }
} }
} }
console.log(this.lines);
}, },
addLine(process, outputID, outputType, outputIndex) { addLine(process, outputID, outputType, outputIndex) {
const nextProcess = this.processMap[outputID]; const nextProcess = this.processMap[outputID];
...@@ -99,7 +109,8 @@ ...@@ -99,7 +109,8 @@
this.onMouseMove(e); this.onMouseMove(e);
}, },
onMouseMove(e) { onMouseMove(e) {
const {x, y} = e; let x = e.x - state.boardOffset.x;
let y = e.y - state.boardOffset.y;
this.lineDrawing.path = this.drawingLineStart + `${x},${y} ${x},${y}`; this.lineDrawing.path = this.drawingLineStart + `${x},${y} ${x},${y}`;
}, },
onMouseUp(e) { onMouseUp(e) {
......
src/views/Editor/behavior-editor/Board/ProcessNode.vue
View file @ 3127303a
<template> <template>
<foreignObject :x="data.design.x" :y="data.design.y" :width="width" :height="height"> <foreignObject :x="data.design.x" :y="data.design.y" :width="width" :height="height">
<div ref="node" class="node" tabindex="0" @mousedown="onMouseDown" @mouseenter="onMouseEnter"> <div ref="node" class="node" tabindex="0" @mousedown="onMouseDown" @mouseenter="onMouseEnter" @mouseleave="onMouseLeave">
<div class="header"> <div class="header">
<span>{{data.alias || meta.name}}</span> <span>{{data.alias || meta.name}}</span>
</div> </div>
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
</div> </div>
</div> </div>
<div ref="inputDock" class="dock input"> <div ref="inputDock" class="dock input">
<dock-point v-if="meta.name !== 'Entry'" v-for="(point, key, index) in inputMeta" :key="index"></dock-point> <dock-point v-if="meta.id !== 'entry'" v-for="(point, key, index) in inputMeta" :key="index"></dock-point>
</div> </div>
<div ref="outputDock" class="dock output"> <div ref="outputDock" class="dock output">
<dock-point v-for="(point, key, index) in meta.output" :key="index" :data="point" <dock-point v-for="(point, key, index) in meta.output" :key="index" :data="point"
...@@ -27,6 +27,7 @@ ...@@ -27,6 +27,7 @@
<script> <script>
import DockPoint from "./DockPoint"; import DockPoint from "./DockPoint";
import {state} from "./state"; import {state} from "./state";
import events from "../../../../global-events";
export default { export default {
name: "ProcessNode", name: "ProcessNode",
...@@ -45,11 +46,11 @@ ...@@ -45,11 +46,11 @@
}, },
mounted() { mounted() {
this.updateDockPointPos();
let bounds = this.$refs.node.getBoundingClientRect(); let bounds = this.$refs.node.getBoundingClientRect();
this.width = bounds.width + 9; this.width = bounds.width + 9;
this.height = bounds.height; this.height = bounds.height;
events.$on('update-dock-point-pos', this.updateDockPointPos);
}, },
computed: { computed: {
meta() { meta() {
...@@ -83,10 +84,15 @@ ...@@ -83,10 +84,15 @@
} }
}, },
onMouseEnter(e) { onMouseEnter(e) {
if(state.drawing){ if (state.drawing && this.meta.id !== 'entry') {
state.targetUUID = this.data.uuid; state.targetUUID = this.data.uuid;
} }
}, },
onMouseLeave(e) {
if (state.drawing) {
state.targetUUID = null;
}
},
onMouseDown(e) { onMouseDown(e) {
const {x, y} = this.data.design; const {x, y} = this.data.design;
this.mouseDownPos = {x: e.screenX, y: e.screenY, dx: x, dy: y}; this.mouseDownPos = {x: e.screenX, y: e.screenY, dx: x, dy: y};
...@@ -117,6 +123,7 @@ ...@@ -117,6 +123,7 @@
}, },
updateDockPointPos() { updateDockPointPos() {
const {x: dx, y: dy} = this.process.data.design; const {x: dx, y: dy} = this.process.data.design;
const {x: offX, y: offY} = state.boardOffset;
for (let side of ['input', 'output']) { for (let side of ['input', 'output']) {
let container = this.$refs[side + 'Dock']; let container = this.$refs[side + 'Dock'];
let sideMeta = side === 'input' ? this.inputMeta : this.meta[side]; let sideMeta = side === 'input' ? this.inputMeta : this.meta[side];
...@@ -131,8 +138,8 @@ ...@@ -131,8 +138,8 @@
let dockPoint = container.children[i]; let dockPoint = container.children[i];
const {x, y} = dockPoint.getBoundingClientRect(); const {x, y} = dockPoint.getBoundingClientRect();
posArr.push({ posArr.push({
x: x - dx, x: x - dx - offX,
y: y - dy, y: y - dy - offY,
}); });
} }
} }
......
src/views/Editor/behavior-editor/Board/state.js
View file @ 3127303a
...@@ -6,4 +6,5 @@ export const state = { ...@@ -6,4 +6,5 @@ export const state = {
drawing: false, drawing: false,
targetUUID: '', targetUUID: '',
lineID: 0, lineID: 0,
boardOffset: {x: 0, y: 0},
}; };
src/views/Editor/behavior-editor/ProcessList.vue 0 → 100644
View file @ 3127303a
<template>
<div>
<el-tree
v-model="data"
>
</el-tree>
</div>
</template>
<script>
export default {
name: "ProcessList",
props: [
'data',
],
}
</script>
<style scoped>
</style>
\ No newline at end of file
src/views/Editor/behavior-editor/Properties.vue 0 → 100644
View file @ 3127303a
<template>
<div class="properties">
<span>Properties</span>
</div>
</template>
<script>
export default {
name: "Properties"
}
</script>
<style scoped>
</style>
\ No newline at end of file
src/views/Editor/dialogs/BehaviorEditorDialog.vue 0 → 100644
View file @ 3127303a
<template>
<el-dialog :title="$t('Behavior Editor')" :visible.sync="visible" @opened="onOpened" :fullscreen="true"
:append-to-body="true" :close-on-click-modal="false" custom-class="behavior-editor-dialog">
<behavior-editor ref="behaviorEditor" class="full-size"></behavior-editor>
<div slot="footer" class="dialog-footer">
<el-button size="mini" type="primary" @click="onSave">{{$t('Save')}}</el-button>
</div>
</el-dialog>
</template>
<script>
import {mapState, mapMutations} from 'vuex'
import BehaviorEditor from "../behavior-editor/BehaviorEditor";
export default {
name: "BehaviorEditorDialog",
components: {BehaviorEditor},
data() {
return {
visible: false,
}
},
computed: {
...mapState({
}),
},
methods: {
show() {
this.visible = true;
},
onSave() {
this.visible = false;
},
onOpened() {
this.$refs.behaviorEditor.measure();
},
...mapMutations([
]),
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
src/views/Home.vue
View file @ 3127303a
...@@ -78,8 +78,8 @@ ...@@ -78,8 +78,8 @@
methods: { methods: {
prepare(){ prepare(){
return Promise.all([ return Promise.all([
this.updateProjects(),
this.updateEnv(), this.updateEnv(),
this.updateProjects(),
]) ])
}, },
moment(time) { moment(time) {
...@@ -117,8 +117,8 @@ ...@@ -117,8 +117,8 @@
}, },
...mapActions([ ...mapActions([
'updateProjects', 'updateProjects',
'deleteProject',
'updateEnv', 'updateEnv',
'deleteProject'
]), ]),
}, },
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment