Skip to content

Z
zeroing-editor
Commit 8f3347d3 authored by rockyl's avatar rockyl
Browse files
Options

内联过程实现

parent 0ae1e8b9
Hide whitespace changes
Inline Side-by-side
Showing with 180 additions and 218 deletions
mock/api/editor/info/index.js
View file @ 8f3347d3
const data = {
success: true,
data: {
name: "Zeroing Editor",
version: "1.0.0",
templates: {
builtin: ["blank"],
custom: []
},
processes: [
JSON.stringify({
id: 'entry',
name: 'Entry',
desc: '入口',
group: 'base',
type: 'builtin',
props: {},
output: ['success'],
}),
JSON.stringify({
id: 'wait',
name: 'Wait',
desc: '等待执行',
group: 'base',
type: 'builtin',
props: {
duration: {type: 'number', default: 1000},
},
output: ['complete'],
}),
JSON.stringify({
id: 'hehe',
name: 'Hehe',
desc: '呵呵',
type: 'builtin',
subEntry: '1',
sub: {
1: {
uuid: '1',
alias: '入口',
meta: 'entry',
output: {
success: ['2'],
},
},
2: {
uuid: '2',
meta: 'wait',
alias: '等待',
props: {
duration: 500,
},
},
}
}),
JSON.stringify({
id: 'prefab1',
name: 'Prefab1',
desc: '转盘预设',
type: 'builtin',
isPrefab: true,
subEntry: '1',
sub: {
1: {
uuid: '1',
alias: '入口',
meta: 'entry',
output: {
success: ['2'],
},
},
2: {
uuid: '2',
meta: 'wait',
alias: '等待',
props: {
duration: 500,
},
},
}
}),
],
scripts: [
JSON.stringify({
id: 'wave',
name: 'Wave',
props: {
duration: {type: 'number', default: 1000},
name: {type: 'string', default: 'hello'},
color: {type: 'color', default: '#123456'},
type: {type: ['rotate', 'jump', 'breath'], default: 'rotate'},
ease: {type: ['linear', 'cubic', 'back'], default: 'linear'},
autoPlay: {type: 'boolean', default: false},
},
script: `"use strict";
exports.__esModule = true;
var Wave = (function () {
function Wave() {
}
Wave.prototype.mounted = function () {
console.log('mounted', this.duration);
this.host.anchorX = this.host.width / 2;
this.host.anchorY = this.host.height / 2;
};
Wave.prototype.destroy = function () {
console.log('destroy');
};
Wave.prototype.update = function (t) {
this.host.rotation = t * 0.1;
};
Wave.prototype.awake = function () {
console.log('awake');
};
Wave.prototype.sleep = function () {
console.log('sleep');
};
Wave.id = 'wave';
return Wave;
}());
exports["default"] = Wave;`
}),
JSON.stringify({
id: 'zoom-button',
name: 'ZoomButton',
props: {
zoomTo: {type: 'number', default: 1.1},
},
script: `"use strict";
exports.__esModule = true;
var ZoomButton = (function () {
function ZoomButton() {
this.zoomTo = 1.1;
}
ZoomButton.prototype.mounted = function () {
this.host.anchorX = this.host.width / 2;
this.host.anchorY = this.host.height / 2;
this.host.addEventListener(engine.MouseEvent.MOUSE_DOWN, this._onMouseDown, this);
this.host.addEventListener(engine.MouseEvent.MOUSE_UP, this._onMouseUp, this);
};
ZoomButton.prototype._onMouseDown = function (e) {
this.host.scaleX = this.host.scaleY = this.zoomTo;
};
ZoomButton.prototype._onMouseUp = function (e) {
this.host.scaleX = this.host.scaleY = 1;
};
ZoomButton.id = 'zoom-button';
return ZoomButton;
}());
exports["default"] = ZoomButton;`
}),
]
},
};
const data = {"data":{"components":[],"name":"Zeroing Editor","processes":[{"behavior_id":"duiba-api","id":11,"data":"{\n \"name\": \"兑吧接口\",\n \"desc\": \"通用兑吧接口\",\n \"props\": {\n \"url\": {\n \"type\": \"string\",\n \"alias\": \"链接\"\n },\n \"method\": {\n \"type\": \"enum\",\n \"enum\": [\n \"get\",\n \"post\"\n ],\n \"alias\": \"方法\",\n \"default\": \"get\"\n },\n \"name\": {\n \"type\": \"string\",\n \"alias\": \"数据名\"\n }\n },\n \"output\": [\n \"success\",\n \"failed\"\n ],\n \"sub\": {\n \"5fc7ba4d-6afa-4eab-82d8-f25cbcb79d56\": {\n \"uuid\": \"5fc7ba4d-6afa-4eab-82d8-f25cbcb79d56\",\n \"meta\": \"entry\",\n \"design\": {\n \"x\": 10,\n \"y\": 10,\n \"input\": {},\n \"output\": {\n \"success\": [\n {\n \"x\": 124.5,\n \"y\": 31\n }\n ]\n }\n },\n \"props\": {},\n \"output\": {\n \"success\": [\n \"69e28053-dfb3-459e-a9e5-4964c6e35193\"\n ]\n }\n },\n \"69e28053-dfb3-459e-a9e5-4964c6e35193\": {\n \"uuid\": \"69e28053-dfb3-459e-a9e5-4964c6e35193\",\n \"meta\": \"http-request\",\n \"design\": {\n \"x\": 67,\n \"y\": 139,\n \"input\": {\n \"default\": [\n {\n \"x\": 5.5,\n \"y\": 47.5\n }\n ]\n },\n \"output\": {\n \"success\": [\n {\n \"x\": 124.5,\n \"y\": 33.5\n }\n ],\n \"failed\": [\n {\n \"x\": 124.5,\n \"y\": 47.5\n }\n ],\n \"exception\": [\n {\n \"x\": 124.5,\n \"y\": 61.5\n }\n ]\n }\n },\n \"props\": {\n \"url\": {\n \"type\": \"link\"\n },\n \"method\": {\n \"type\": \"link\"\n }\n },\n \"output\": {\n \"success\": [\n \"39dce565-539b-44b6-901c-0344467795a8\"\n ]\n }\n },\n \"39dce565-539b-44b6-901c-0344467795a8\": {\n \"uuid\": \"39dce565-539b-44b6-901c-0344467795a8\",\n \"meta\": \"duiba-api-transform\",\n \"design\": {\n \"x\": 184,\n \"y\": 275,\n \"input\": {\n \"default\": [\n {\n \"x\": 5.5,\n \"y\": 30.5\n }\n ]\n },\n \"output\": {\n \"success\": [\n {\n \"x\": 124.5,\n \"y\": 23.5\n }\n ],\n \"failed\": [\n {\n \"x\": 124.5,\n \"y\": 37.5\n }\n ]\n }\n },\n \"props\": {},\n \"output\": {\n \"success\": [\n \"e95e7bbc-b592-4f87-b433-77fd03a9ef51\"\n ]\n }\n },\n \"e95e7bbc-b592-4f87-b433-77fd03a9ef51\": {\n \"uuid\": \"e95e7bbc-b592-4f87-b433-77fd03a9ef51\",\n \"meta\": \"put-data\",\n \"design\": {\n \"x\": 280,\n \"y\": 367,\n \"input\": {\n \"default\": [\n {\n \"x\": 5.5,\n \"y\": 47.5\n }\n ]\n },\n \"output\": {\n \"success\": [\n {\n \"x\": 124.5,\n \"y\": 47.5\n }\n ]\n }\n },\n \"props\": {\n \"name\": {\n \"type\": \"link\"\n }\n },\n \"output\": {}\n }\n },\n \"subEntry\": \"5fc7ba4d-6afa-4eab-82d8-f25cbcb79d56\",\n \"metas\": [\n {\n \"id\": \"duiba-api-transform\",\n \"script\": \"if (args.success) {\\n next('success', args.data);\\n}\\nelse {\\n next('failed');\\n}\\n\",\n \"props\": {},\n \"isInline\": true,\n \"name\": \"兑吧接口转换\",\n \"output\": [\n \"success\",\n \"failed\"\n ],\n \"desc\": \"将http请求返回成兑吧接口的解析\"\n }\n ],\n \"id\": \"duiba-api\",\n \"script\": \"next('success');\\n\",\n \"group\": \"duiba\",\n \"type\": \"builtin\"\n}\n","update_time":"2019-11-19T06:24:44.000Z"},{"behavior_id":"get-data","id":15,"data":"{\n \"name\": \"获取数据\",\n \"desc\": \"从数据中心获取数据，优先判断名称\",\n \"props\": {\n \"name\": {\n \"type\": \"string\",\n \"alias\": \"名称\"\n },\n \"path\": {\n \"type\": \"string\",\n \"alias\": \"路径\"\n }\n },\n \"output\": [\n \"success\"\n ],\n \"id\": \"get-data\",\n \"script\": \"var data;\\nif (props.path) {\\n data = engine.gameStage.dataCenter.getDataByPath(props.path);\\n}\\nelse {\\n data = engine.gameStage.dataCenter.getGroup(props.name);\\n}\\nnext('success', data);\\n\",\n \"group\": \"base\",\n \"type\": \"builtin\"\n}\n","update_time":"2019-11-18T07:43:01.000Z"},{"behavior_id":"log","id":4,"data":"{\n \"name\": \"日志\",\n \"desc\": \"打印日志\",\n \"props\": {\n \"content\": {\n \"alias\": \"内容\",\n \"type\": \"string\",\n \"default\": \"\"\n },\n \"error\": {\n \"alias\": \"是否错误模式\",\n \"type\": \"boolean\",\n \"default\": false\n }\n },\n \"output\": [\n \"success\"\n ],\n \"id\": \"log\",\n \"script\": \"console.log(props ? props.content : (args ? args.content : ''));\\nnext('success');\\n\",\n \"group\": \"base\",\n \"type\": \"builtin\"\n}\n","update_time":"2019-11-18T06:35:22.000Z"},{"behavior_id":"goto-record","id":8,"data":"{\n \"name\": \"跳转到中奖记录\",\n \"desc\": \"跳转到中奖记录页面\",\n \"props\": {},\n \"output\": [\n \"success\"\n ],\n \"id\": \"goto-record\",\n \"script\": \"location.href = '/record';\\nnext('success');\\n\",\n \"group\": \"duiba\",\n \"type\": \"builtin\"\n}\n","update_time":"2019-11-18T06:31:33.000Z"},{"behavior_id":"compare","id":3,"data":"{\n \"name\": \"比较\",\n \"desc\": \"比较两个值\",\n \"props\": {\n \"left\": {\n \"alias\": \"左值\",\n \"type\": \"any\",\n \"default\": \"\"\n },\n \"right\": {\n \"alias\": \"右值\",\n \"type\": \"any\",\n \"default\": \"\"\n },\n \"strict\": {\n \"alias\": \"严格模式\",\n \"type\": \"any\",\n \"default\": \"\"\n },\n \"operator\": {\n \"alias\": \"操作符\",\n \"type\": \"enum\",\n \"enum\": [\n \"==\",\n \">\",\n \">=\",\n \"<\",\n \"<=\",\n \"!=\"\n ],\n \"default\": \"==\"\n }\n },\n \"output\": [\n \"equal\",\n \"unequal\"\n ],\n \"id\": \"compare\",\n \"script\": \"setTimeout(function () {\\n next('complete');\\n}, args ? args.duration : (props.duration || 0));\\n\",\n \"group\": \"base\",\n \"type\": \"builtin\"\n}\n","update_time":"2019-11-18T06:30:52.000Z"},{"behavior_id":"entry","id":1,"data":"{\n \"name\": \"入口\",\n \"desc\": \"入口节点，每个行为的入口\",\n \"props\": {},\n \"output\": [\n \"success\"\n ],\n \"id\": \"entry\",\n \"script\": \"next('success');\\n\",\n \"group\": \"base\",\n \"type\": \"builtin\"\n}\n","update_time":"2019-11-18T06:30:44.000Z"},{"behavior_id":"push-dialog","id":6,"data":"{\n \"name\": \"弹出弹窗\",\n \"desc\": \"根据视图名弹出弹窗\",\n \"props\": {\n \"viewName\": {\n \"alias\": \"目标视图名\",\n \"type\": \"string\"\n },\n \"center\": {\n \"alias\": \"是否居中展示\",\n \"type\": \"boolean\",\n \"default\": true\n }\n },\n \"output\": [\n \"complete\"\n ],\n \"id\": \"push-dialog\",\n \"script\": \"if (!props.viewName) {\\n console.log('没有设置视图名');\\n next('exception', '没有设置视图名');\\n}\\nelse {\\n var gameStage = engine.gameStage;\\n var viewConfig = gameStage.getViewConfigByName(props.viewName);\\n if (viewConfig) {\\n var view = engine.instantiate(viewConfig);\\n gameStage.popupContainer.push(view, { center: props.center || true });\\n }\\n else {\\n console.error('view config not exists');\\n }\\n}\\n\",\n \"group\": \"base\",\n \"type\": \"builtin\"\n}\n","update_time":"2019-11-18T06:30:35.000Z"},{"behavior_id":"pop-dialog","id":7,"data":"{\n \"name\": \"关闭弹窗\",\n \"desc\": \"关闭弹窗\",\n \"props\": {\n \"closeAll\": {\n \"alias\": \"是否关闭全部弹窗\",\n \"type\": \"boolean\",\n \"default\": false\n }\n },\n \"output\": [\n \"complete\"\n ],\n \"id\": \"pop-dialog\",\n \"script\": \"if (props.closeAll) {\\n engine.gameStage.popupContainer.popAll();\\n}\\nelse {\\n engine.gameStage.popupContainer.pop();\\n}\\n\",\n \"group\": \"base\",\n \"type\": \"builtin\"\n}\n","update_time":"2019-11-18T06:30:27.000Z"},{"behavior_id":"put-data","id":10,"data":"{\n \"name\": \"放置数据\",\n \"desc\": \"在数据中心放置数据\",\n \"props\": {\n \"name\": {\n \"type\": \"string\",\n \"alias\": \"名称\"\n },\n \"path\": {\n \"type\": \"string\",\n \"alias\": \"路径\"\n }\n },\n \"output\": [\n \"success\"\n ],\n \"id\": \"put-data\",\n \"script\": \"engine.gameStage.dataCenter.mutate(props.name, args, props.path);\\nnext('success', args);\\n\",\n \"group\": \"base\",\n \"type\": \"builtin\"\n}\n","update_time":"2019-11-18T06:23:56.000Z"},{"behavior_id":"wait","id":2,"data":"{\n \"name\": \"等待\",\n \"desc\": \"等待一段时间后继续\",\n \"props\": {\n \"duration\": {\n \"alias\": \"时间(毫秒)\",\n \"type\": \"number\",\n \"default\": 1000\n }\n },\n \"output\": [\n \"complete\"\n ],\n \"id\": \"wait\",\n \"script\": \"setTimeout(function () {\\n next('complete');\\n}, args ? args.duration : (props.duration || 0));\\n\",\n \"group\": \"base\",\n \"type\": \"builtin\"\n}\n","update_time":"2019-11-18T06:23:47.000Z"},{"behavior_id":"set-mouse-enabled","id":14,"data":"{\n \"name\": \"设置可否交互\",\n \"desc\": \"设置可否交互\",\n \"props\": {\n \"target\": {\n \"type\": \"node\",\n \"alias\": \"目标节点\"\n },\n \"enabled\": {\n \"type\": \"boolean\",\n \"alias\": \"可否交互\",\n \"default\": false\n }\n },\n \"output\": [\n \"success\"\n ],\n \"id\": \"set-mouse-enabled\",\n \"script\": \"var targetNode = target || props.target;\\nif (targetNode) {\\n targetNode.mouseEnabled = props.enabled;\\n next('success');\\n}\\n\",\n \"group\": \"base\",\n \"type\": \"builtin\"\n}\n","update_time":"2019-11-18T06:23:34.000Z"},{"behavior_id":"http-request","id":5,"data":"{\n \"name\": \"HttpRequest\",\n \"desc\": \"http请求\",\n \"props\": {\n \"url\": {\n \"type\": \"string\",\n \"alias\": \"地址\"\n },\n \"method\": {\n \"type\": \"enum\",\n \"enum\": [\n \"get\",\n \"post\"\n ],\n \"alias\": \"方法\",\n \"default\": \"get\"\n }\n },\n \"output\": [\n \"success\",\n \"failed\",\n \"exception\"\n ],\n \"id\": \"http-request\",\n \"script\": \"if (!props.url) {\\n console.log('url is empty');\\n next('exception', '\\\\'url is empty\\\\'');\\n}\\nelse {\\n engine.globalLoader.httpRequest(function (s, payload) {\\n if (s) {\\n next('success', payload);\\n }\\n else {\\n next('failed', payload);\\n }\\n }, props.url, props.method || 'get', 'json');\\n}\\n\",\n \"group\": \"net\",\n \"type\": \"builtin\"\n}\n","update_time":"2019-11-18T06:21:30.000Z"}],"scripts":[{"script_id":"zoom-button","id":2,"data":"{\"id\":\"zoom-button\",\"name\":\"ZoomButton\",\"props\":{\"zoomTo\":{\"type\":\"number\",\"default\":1.1}},\"code\":\"\\\"use strict\\\";\\nexports.__esModule = true;\\nvar ZoomButton = (function () {\\n function ZoomButton() {\\n this.zoomTo = 1.1;\\n }\\n ZoomButton.prototype.mounted = function () {\\n this.host.anchorX = this.host.width / 2;\\n this.host.anchorY = this.host.height / 2;\\n this.host.addEventListener(engine.MouseEvent.MOUSE_DOWN, this._onMouseDown, this);\\n this.host.addEventListener(engine.MouseEvent.MOUSE_UP, this._onMouseUp, this);\\n };\\n ZoomButton.prototype._onMouseDown = function (e) {\\n this.host.scaleX = this.host.scaleY = this.zoomTo;\\n };\\n ZoomButton.prototype._onMouseUp = function (e) {\\n this.host.scaleX = this.host.scaleY = 1;\\n };\\n ZoomButton.id = 'zoom-button';\\n return ZoomButton;\\n}());\\nexports[\\\"default\\\"] = ZoomButton;\"}","update_time":"2019-11-14T10:32:12.000Z"},{"script_id":"wave","id":1,"data":"{\"id\":\"wave\",\"name\":\"Wave\",\"props\":{\"duration\":{\"type\":\"number\",\"default\":1000},\"name\":{\"type\":\"string\",\"default\":\"hello\"},\"color\":{\"type\":\"color\",\"default\":\"#123456\"},\"type\":{\"type\":[\"rotate\",\"jump\",\"breath\"],\"default\":\"rotate\"},\"ease\":{\"type\":[\"linear\",\"cubic\",\"back\"],\"default\":\"linear\"},\"autoPlay\":{\"type\":\"boolean\",\"default\":false}},\"code\":\"\\\"use strict\\\";\\nexports.__esModule = true;\\nvar Wave = (function () {\\n function Wave() {\\n }\\n Wave.prototype.mounted = function () {\\n console.log('mounted', this.duration);\\n this.host.anchorX = this.host.width / 2;\\n this.host.anchorY = this.host.height / 2;\\n };\\n Wave.prototype.destroy = function () {\\n console.log('destroy');\\n };\\n Wave.prototype.update = function (t) {\\n this.host.rotation = t * 0.1;\\n };\\n Wave.prototype.awake = function () {\\n console.log('awake');\\n };\\n Wave.prototype.sleep = function () {\\n console.log('sleep');\\n };\\n Wave.id = 'wave';\\n return Wave;\\n}());\\nexports[\\\"default\\\"] = Wave;\"}","update_time":"2019-11-14T10:31:55.000Z"}],"templates":{"builtin":["blank"],"custom":[]},"version":"1.0.0"},"success":true};
module.exports = function () {
return data;
......
mock/api/project/query/data/index.js
View file @ 8f3347d3
......@@ -228,7 +228,7 @@ const data = {
alias: 'test',
meta: 'test',
props: {
text: '$_linked_$',
},
output: {
success: [],
......
src/config.js
View file @ 8f3347d3
......@@ -5,7 +5,8 @@
export let API_HOST;
if(process.env.NODE_ENV === 'development'){
//API_HOST = 'http://10.10.95.74:7777';
API_HOST = 'http://localhost:3002';
//API_HOST = 'http://localhost:3002';
API_HOST = 'http://beacon.duibadev.com.cn'
}else{
API_HOST = 'http://beacon.duibadev.com.cn'
}
......
src/locales/en.json
View file @ 8f3347d3
......@@ -64,6 +64,7 @@
"Edit Behavior": "Edit Behavior",
"Trigger once": "Trigger once",
"Meta Editor": "Meta Editor",
"As inline": "As inline",
"Link to parent": "Link to parent",
"Input project name": "Input project name",
"Invalid project name": "Invalid project name",
......
src/store/modules/behavior.js
View file @ 8f3347d3
......@@ -4,6 +4,7 @@
* 行为编辑
*/
import Vue from "vue";
import i18n from "../../i18n";
import generateUUID from "uuid/v4";
import {metaInUse, updateProcesses} from "../../utils";
......@@ -75,13 +76,21 @@ export const behaviorStore = {
updateProcesses(process, targetMetaID, replaceMetaID);
}
},
deleteProcessMeta(state, metaID) {
for (let i = 0, li = state.data.processes.length; i < li; i++) {
const process = state.data.processes[i];
deleteProcessMeta(state, {meta, process}) {
let container;
if(meta.isInline){
container = process.meta.metas;
}else{
container = state.data.processes;
}
if(container){
for (let i = 0, li = container.length; i < li; i++) {
const process = container[i];
if (process.id === metaID) {
state.data.processes.splice(i, 1);
break;
if (process.id === meta.id) {
container.splice(i, 1);
break;
}
}
}
},
......@@ -134,25 +143,32 @@ export const behaviorStore = {
}
},
actions: {
addCustomProcessMeta({commit, state}) {
addCustomProcessMeta({commit, state}, {process, isInline, processId}) {
let meta = {
id: generateUUID(),
name: i18n.t('Custom'),
script: '',
props: {},
output: ['success', 'failed'],
};
commit('addProcessMeta', meta);
return meta;
},
addDividerProcessMeta({commit, state}) {
let meta = {
id: generateUUID(),
name: i18n.t('Divider'),
isDivider: true,
output: ['p0'],
isInline,
};
commit('addProcessMeta', meta);
switch (processId) {
case 'custom':
meta.name = i18n.t('Custom');
meta.output = ['success', 'failed'];
break;
case 'divider':
meta.name = i18n.t('Divider');
meta.output = ['p0'];
meta.isDivider = true;
break;
}
if (isInline) {
if (!process.meta.metas) {
Vue.set(process.meta, 'metas', []);
}
process.meta.metas.push(meta);
} else {
commit('addProcessMeta', meta);
}
return meta;
},
}
......
src/themes/light/behavior.scss
View file @ 8f3347d3
......@@ -75,8 +75,6 @@ $dock-pin-width: 9px;
stroke: $--color-primary;
stroke-dasharray: 5, 1;
}
}
.node {
......@@ -91,6 +89,11 @@ $dock-pin-width: 9px;
user-select: none;
margin: 0 $dock-pin-width;
&:hover {
& > .top-bar {
visibility: visible;
}
}
/*&:hover {
border-color: $block-border-hover-background-color;
......@@ -107,6 +110,21 @@ $dock-pin-width: 9px;
}
}*/
.top-bar {
height: 19px;
padding: 0 3px;
margin: -20px 5px 0;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
background-color: rgba(0, 0, 0, 0.1);
align-self: flex-end;
visibility: hidden;
.el-link + .el-link {
margin-left: 5px;
}
}
.header {
min-height: 12px;
background-color: $block-border-blur-background-color;
......@@ -117,17 +135,14 @@ $dock-pin-width: 9px;
color: white;
display: flex;
.title {
flex: 1;
i{
display: block;
//color: $--color-warning;
margin-right: 3px;
}
.delete-button {
padding: 2px;
color: $--border-color-lighter;
&:hover {
color: white;
}
.title {
flex: 1;
}
}
......@@ -162,7 +177,7 @@ $dock-pin-width: 9px;
.string-value {
text-align: right;
.tag{
.tag {
color: $--color-success;
}
}
......@@ -229,6 +244,10 @@ $dock-pin-width: 9px;
& > .header {
background-color: $block-border-focus-background-color;
}
/*& > .top-bar {
visibility: visible;
}*/
}
}
}
......
src/views/Editor/behavior-editor/BehaviorEditor.vue
View file @ 8f3347d3
......@@ -11,7 +11,7 @@
</split-panes>
<div class="center full-size background" splitpanes-min="20" :splitpanes-size="70">
<edit-path :processStack="processStack" @pop="onPop"/>
<board ref="board" @select-process-node="onSelectProcessNode" @edit-process="editProcess"/>
<board ref="board" @select-process-node="onSelectProcessNode" @edit-process="editProcess" @edit-meta="onEditMeta"/>
</div>
<div class="properties background full-size" splitpanes-min="20" :splitpanes-size="20">
<properties-editor ref="properties"/>
......
src/views/Editor/behavior-editor/Board.vue
View file @ 8f3347d3
......@@ -13,12 +13,14 @@
@leave-pin="onPinLeave"
@down-pin="onPintDown"
@delete="onProcessNodeDelete"
@edit-meta="onEditMeta"
@dblclick="editSubProcess(process)"
@meta-modified="onProcessMetaModified"
/>
</g>
</svg>
<tool-tip ref="toolTip"/>
<inline-choose-dialog ref="inlineChooseDialog"/>
</div>
</template>
......@@ -31,10 +33,13 @@
import {DOCK_POINT_OFFSET} from "../../../config";
import events from "../../../global-events";
import generateUUID from "uuid/v4";
//todo 缩放功能
import InlineChooseDialog from "./InlineChooseDialog";
const customs = ['custom', 'divider'];
//todo 缩放功能
export default {
name: "Board",
components: {ToolTip, LinkLine, ProcessNode,},
components: {InlineChooseDialog, ToolTip, LinkLine, ProcessNode,},
props: [],
data() {
return {
......@@ -46,7 +51,7 @@
visible: false,
path: '',
process: null,
}
},
}
},
mounted() {
......@@ -54,7 +59,8 @@
},
computed: {
...mapState({
drawState: state=>state.behavior.drawState
drawState: state => state.behavior.drawState,
editable: state => state.behavior.editable,
})
},
methods: {
......@@ -90,20 +96,21 @@
this.$set(this.subProcessMap, uuid, process);
},
async addSubProcessData(processId, pos) {
let process, processMeta;
let process, processMeta, isInline;
switch(processId){
case 'custom':
processMeta = await this.addCustomProcessMeta();
processId = processMeta.id;
break;
case 'divider':
processMeta = await this.addDividerProcessMeta();
processId = processMeta.id;
break;
if (customs.includes(processId)) {
try {
const result = await this.$refs.inlineChooseDialog.show();
isInline = result.isInline;
} catch (e) {
return;
}
processMeta = await this.addCustomProcessMeta({process: this.process, isInline, processId});
processId = processMeta.id;
}
process = this.resolveProcess(processId);
process = this.process.resolveMeta(processId);
let data = {
uuid: generateUUID(),
......@@ -136,13 +143,16 @@
x: e.offsetX - 9,
y: e.offsetY,
});
if(!data){
return;
}
this.addSubProcess(data.uuid, data);
this.$nextTick(() => {
events.$emit('update-dock-pin-pos');
});
},
onResize(){
onResize() {
const {x, y} = this.$el.getBoundingClientRect();
this.drawState.boardOffset.x = x;
this.drawState.boardOffset.y = y;
......@@ -239,16 +249,22 @@
}
}
if(meta.isDivider){ //如果是分流器还要删除对应的meta
this.deleteProcessMeta(meta.id);
if (meta.isDivider || meta.isInline) { //如果是分流节点或者内联节点还要删除对应的meta
this.deleteProcessMeta({
meta,
process: this.process,
});
}
},
onEditMeta(data, meta){
this.$emit('edit-meta', meta);
},
editSubProcess(process) {
if (!process.meta.isDivider && (process.meta.type !== 'builtin' || process.meta.sub && Object.keys(process.meta.sub).length > 0)) {
if (!process.meta.isDivider && (this.editable || process.meta.sub && Object.keys(process.meta.sub).length > 0)) {
this.$emit('edit-process', process);
}
},
onProcessMetaModified(process, meta){
onProcessMetaModified(process, meta) {
let ids = Object.keys(this.lines);
for (let id of ids) {
const line = this.lines[id];
......@@ -256,7 +272,7 @@
if (prev === process) {
const {outputType} = line;
if(meta.output.indexOf(outputType) < 0){
if (meta.output.indexOf(outputType) < 0) {
this.onDeleteLine(line);
}
}
......@@ -279,7 +295,7 @@
}
},
updateProcessNode(metaID) {
this.$nextTick(()=>{
this.$nextTick(() => {
for (let key in this.$refs) {
if (key.startsWith('pn_')) {
......
src/views/Editor/behavior-editor/Board/Process.js
View file @ 8f3347d3
......@@ -15,7 +15,7 @@ export default class Process {
}
resolveMeta(id) {
let meta = this.meta && this.meta.metas ? this.meta.metas[id] : null;
let meta = this.meta && this.meta.metas ? this.meta.metas.find(meta=>meta.id === id) : null;
if (!meta && this._parent) {
meta = this._parent.resolveMeta(id);
}
......
src/views/Editor/behavior-editor/Board/ProcessNode.vue
View file @ 8f3347d3
<template>
<foreignObject :x="data.design.x" :y="data.design.y" :width="width" :height="height">
<div ref="node" :class="{active: active}" class="node" @mousedown="onMouseDown" @mouseenter="onMouseEnter"
<div ref="node" :class="{active: active}" class="node" style="margin-top: 20px;" @mousedown="onMouseDown" @mouseenter="onMouseEnter"
@mouseleave="onMouseLeave" @click="onClick" @dblclick="onDblclick">
<div class="top-bar" v-if="meta.id !== 'entry' && editable">
<el-link icon="el-icon-delete" :underline="false" @mousedown.stop.prevent @click.stop="onClickDelete"/>
<el-link icon="el-icon-edit" :underline="false" v-if="meta.type !== 'builtin'" @mousedown.stop.prevent @click.stop="onClickEdit"/>
</div>
<div class="header">
<i v-if="meta.isInline">i</i>
<span class="title">{{data.alias || meta.name}}</span>
<i v-if="meta.id !== 'entry'" class="delete-button el-icon-delete" @click.stop="onClickDelete"
@mousedown.stop.prevent></i>
</div>
<div class="body">
<div v-if="meta.isDivider">
......@@ -83,7 +86,8 @@
return this.process.data;
},
...mapState({
drawState: state => state.behavior.drawState
drawState: state => state.behavior.drawState,
editable: state => state.behavior.editable,
}),
},
watch: {
......@@ -176,7 +180,7 @@
this.$nextTick(() => {
let bounds = this.$refs.node.getBoundingClientRect();
this.width = bounds.width + 18;
this.height = bounds.height;
this.height = bounds.height + 20;
});
},
updateDockPointPos() {
......@@ -221,6 +225,9 @@
onClickDelete() {
this.$emit('delete', this.data, this.meta);
},
onClickEdit() {
this.$emit('edit-meta', this.data, this.meta);
},
outputPointModify(action) {
let output = this.meta.output;
let count = output.length;
......
src/views/Editor/behavior-editor/InlineChooseDialog.vue 0 → 100644
View file @ 8f3347d3
<template>
<el-dialog
:title="$t('Alert')"
:visible.sync="dialogVisible"
append-to-body
@close="onClose"
>
<el-checkbox v-model="asInline">{{$t('As inline')}}</el-checkbox>
<span slot="footer" class="dialog-footer">
<el-button size="mini" @click="dialogVisible = false">{{$t('Cancel')}}</el-button>
<el-button size="mini" type="primary" @click="onConfirm">{{$t('Confirm')}}</el-button>
</span>
</el-dialog>
</template>
<script>
export default {
name: "InlineChooseDialog",
data() {
return {
dialogVisible: false,
asInline: false,
}
},
methods: {
show() {
this.dialogVisible = true;
return new Promise((resolve, reject) => {
this.p = {resolve, reject};
});
},
onClose() {
if (this.p) {
this.p.reject();
this.p = null;
}
this.dialogVisible = false;
},
onConfirm() {
if (this.p) {
this.p.resolve({
isInline: this.asInline,
});
this.p = null;
}
this.dialogVisible = false;
},
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
src/views/Editor/behavior-editor/MetaEditorDialog.vue
View file @ 8f3347d3
......@@ -14,12 +14,12 @@
<el-form-item prop="desc" label="Desc">
<el-input v-model="meta.desc" :placeholder="$t('Description')" :readonly="!editable"/>
</el-form-item>
<el-form-item prop="type" label="Type">
<!--<el-form-item prop="type" label="Type">
<el-input v-model="meta.type" :placeholder="$t('Type')" :readonly="!editable"/>
</el-form-item>
<el-form-item prop="group" label="Group">
<el-input v-model="meta.group" :placeholder="$t('Group')" :readonly="!editable"/>
</el-form-item>
</el-form-item>-->
<el-form-item label="Props">
<el-link :underline="false" @click="onClickEditProps" :disabled="!editable">
<template v-if="Object.keys(meta.props).length">
......
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