Skip to content

Z
zeroing-editor
Commit 6985084a authored by 任建锋's avatar 任建锋
Browse files
Options

--

parent 0b3a1a94
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 13113 additions and 14 deletions
.history/src/locales/zh-CN_20191202160329.json 0 → 100644
View file @ 6985084a
{
"Alert": "提示",
"Confirm": "确认",
"Cancel": "取消",
"Close": "关闭",
"Still Close": "仍然关闭",
"Save": "保存",
"Reset": "重置",
"Copy": "复制",
"Exit": "退出",
"Props": "属性",
"Behavior": "行为",
"Add": "添加",
"Delete": "删除",
"Delete all": "删除全部",
"Import": "导入",
"Export": "导出",
"Upload": "上传",
"Uploading": "上传中",
"Edit": "编辑",
"EditEnv": "编辑环境",
"EditCustomModule": "编辑自定义模块",
"ID": "ID",
"Name": "名字",
"Alias": "别名",
"Output": "输出",
"Code": "代码",
"Desc": "描述",
"Empty": "空",
"Key": "属性名",
"Default": "默认值",
"Event": "事件",
"No desc": "无描述",
"Description": "描述",
"Failed to fetch": "网络错误!",
"In processing": "处理中……",
"Projects": "项目",
"copy": "副本",
"No projects": "无项目",
"Create": "创建",
"Project details": "项目详情",
"Project does not exist": "项目不存在",
"Project name": "项目名",
"Data mapping": "数据映射",
"Behavior Editor": "行为编辑器",
"Template": "模板",
"Preparing": "准备中…",
"Deleting": "删除中…",
"Saving": "保存中…",
"Divider": "分流节点",
"Custom": "自定义节点",
"Entry": "入口",
"Packing": "打包",
"Type": "类型",
"Group": "分组",
"Access denied": "无权限",
"Invalid router": "无效的页面",
"Jump after": "{cd}秒后跳转",
"Open in new tab": "新标签打开",
"Pack project successfully": "项目打包成功",
"Pack project failed": "项目打包失败",
"Create project": "创建项目",
"Rename project": "重命名项目",
"Entry scene view": "入口场景视图",
"Page title": "页面标题",
"Container ID": "容器ID",
"Design width": "设计宽度",
"Design height": "设计高度",
"Frame Rate": "帧率",
"Scale Mode": "缩放模式",
"Renderer Type": "渲染模式",
"Props Editor": "属性编辑器",
"Trigger once": "触发一次",
"Meta Editor": "过程元配置",
"Env editor": "环境编辑器",
"As inline": "作为内联",
"Project": "项目",
"Env constant": "自定义常量",
"Custom module": "自定义模块",
"Copy template to clipboard": "复制模板到粘贴板",
"Copied process to clipboard": "复制过程到粘贴板",
"Link to parent": "连接到父节点",
"Input project name": "输入项目名",
"Invalid project name": "无效的项目名",
"Creating project": "项目创建中…",
"Create project success": "项目创建成功",
"Duplicate project": "复制项目",
"Duplicating project": "项目复制中…",
"Duplicate project success": "项目复制成功",
"Project name cannot be empty": "项目名不能为空",
"This action will permanently delete project": "您将删除项目[{projectName}], 是否继续?",
"Fetching projects": "获取项目列表…",
"Failed to fetch env": "获取环境失败",
"Failed to fetch projects": "获取项目列表失败",
"Failed to fetch project": "获取项目失败",
"Failed to create project": "创建项目失败",
"Failed to duplicate project": "复制项目失败",
"Failed to delete project": "删除项目失败",
"Failed to get project": "获取项目失败",
"Failed to save project": "保存项目失败",
"Save project successfully": "保存项目成功",
"Input view name": "输入视图名",
"Invalid view name": "无效的视图名",
"Unsaved version found locally": "本地发现了未保存保本，请选择版本打开",
"Local Version": "本地版本",
"Remote Version": "远程版本",
"Confirm to exit the editor": "确定退出编辑器吗?",
"Confirm to publish": "确定发布吗?",
"Are you sure to delete this asset": "确定删除这个素材吗",
"Are you sure to delete all assets": "确定删除全部素材吗",
"Are you sure to delete this item": "确定删除这一项吗",
"Rename asset": "重命名素材",
"Input asset name": "输入素材名",
"Invalid asset name": "无效的素材名",
"Copied field to clipboard": "已复制 {field} 到剪切板",
"Unsaved Alert": "项目还未保存，是否保存?",
"Meta is in use, can not delete": "过程元正在使用中，不能删除!",
"Are you sure to delete this meta": "确定删除这个过程元吗?",
"This Meta ID is in use, can not save": "这个ID正在被使用，不能保存!",
"Custom node desc": "自定义节点",
"Divider node desc": "分流节点，出口会按顺序一次执行",
"Save this behavior before": "是否先保存这个行为?",
"Failed to import view": "导入视图失败",
"Failed to upload file": "上传文件失败",
"Single view": "单视图",
"Multi views": "多视图",
"Import single": "导入单",
"Import multi": "导入多",
"Import view success": "视图导入成功",
"menu": {
"save": "保存",
"details": "详情",
"preview": "预览",
"pack": "发布",
"exit": "退出",
"undo": "撤销",
"redo": "重做"
},
"view_node_menu": {
"node": "节点",
"image": "图片",
"label": "标签",
"rect": "矩形",
"scrollView": "滚动视图"
},
"panes": {
"Assets": "素材",
"Inspector": "属性",
"Playground": "画布",
"Views": "视图"
},
"dataTypes": {
"static": "静态",
"arguments": "入参",
"data-center": "数据中心",
"env": "自定义"
},
"prosTypes": {
"boolean": "布尔",
"string": "字符串",
"number": "数字",
"enum": "枚举",
"color": "颜色",
"asset": "素材",
"node": "节点",
"dynamic": "动态",
"map": "字典"
},
"events": {
"init": "初始化",
"awake": "激活",
"sleep": "入眠",
"data-center": "数据中心",
"click": "触摸点击",
"touchstart": "触摸按下",
"touchend": "触摸弹起",
"touchmove": "触摸移动"
},
"scaleMode": {
"exactFit": "精确适配",
"noBorder": "无边框",
"noScale": "不缩放",
"showAll": "全部展示",
"fixedWidth": "宽度锁定",
"fixedHeight": "高度锁定"
},
"rendererType": {
"webgl": "WEBGL",
"canvas": "CANVAS"
}
}
\ No newline at end of file
.history/src/locales/zh-CN_20191203194104.json 0 → 100644
View file @ 6985084a
{
"Alert": "提示",
"Confirm": "确认",
"Cancel": "取消",
"Close": "关闭",
"Still Close": "仍然关闭",
"Save": "保存",
"SaveAndPreview": "保存并预览",
"Reset": "重置",
"Copy": "复制",
"Exit": "退出",
"Props": "属性",
"Behavior": "行为",
"Add": "添加",
"Delete": "删除",
"Delete all": "删除全部",
"Import": "导入",
"Export": "导出",
"Upload": "上传",
"Uploading": "上传中",
"Edit": "编辑",
"EditEnv": "编辑环境",
"EditCustomModule": "编辑自定义模块",
"ID": "ID",
"Name": "名字",
"Alias": "别名",
"Output": "输出",
"Code": "代码",
"Desc": "描述",
"Empty": "空",
"Key": "属性名",
"Default": "默认值",
"Event": "事件",
"No desc": "无描述",
"Description": "描述",
"Failed to fetch": "网络错误!",
"In processing": "处理中……",
"Projects": "项目",
"copy": "副本",
"No projects": "无项目",
"Create": "创建",
"Project details": "项目详情",
"Project does not exist": "项目不存在",
"Project name": "项目名",
"Data mapping": "数据映射",
"Behavior Editor": "行为编辑器",
"Template": "模板",
"Preparing": "准备中…",
"Deleting": "删除中…",
"Saving": "保存中…",
"Divider": "分流节点",
"Custom": "自定义节点",
"Entry": "入口",
"Packing": "打包",
"Type": "类型",
"Group": "分组",
"Access denied": "无权限",
"Invalid router": "无效的页面",
"Jump after": "{cd}秒后跳转",
"Open in new tab": "新标签打开",
"Pack project successfully": "项目打包成功",
"Pack project failed": "项目打包失败",
"Create project": "创建项目",
"Rename project": "重命名项目",
"Entry scene view": "入口场景视图",
"Page title": "页面标题",
"Container ID": "容器ID",
"Design width": "设计宽度",
"Design height": "设计高度",
"Frame Rate": "帧率",
"Scale Mode": "缩放模式",
"Renderer Type": "渲染模式",
"Props Editor": "属性编辑器",
"Trigger once": "触发一次",
"Meta Editor": "过程元配置",
"Env editor": "环境编辑器",
"As inline": "作为内联",
"Project": "项目",
"Env constant": "自定义常量",
"Custom module": "自定义模块",
"Copy template to clipboard": "复制模板到粘贴板",
"Copied process to clipboard": "复制过程到粘贴板",
"Link to parent": "连接到父节点",
"Input project name": "输入项目名",
"Invalid project name": "无效的项目名",
"Creating project": "项目创建中…",
"Create project success": "项目创建成功",
"Duplicate project": "复制项目",
"Duplicating project": "项目复制中…",
"Duplicate project success": "项目复制成功",
"Project name cannot be empty": "项目名不能为空",
"This action will permanently delete project": "您将删除项目[{projectName}], 是否继续?",
"Fetching projects": "获取项目列表…",
"Failed to fetch env": "获取环境失败",
"Failed to fetch projects": "获取项目列表失败",
"Failed to fetch project": "获取项目失败",
"Failed to create project": "创建项目失败",
"Failed to duplicate project": "复制项目失败",
"Failed to delete project": "删除项目失败",
"Failed to get project": "获取项目失败",
"Failed to save project": "保存项目失败",
"Save project successfully": "保存项目成功",
"Input view name": "输入视图名",
"Invalid view name": "无效的视图名",
"Unsaved version found locally": "本地发现了未保存保本，请选择版本打开",
"Local Version": "本地版本",
"Remote Version": "远程版本",
"Confirm to exit the editor": "确定退出编辑器吗?",
"Confirm to publish": "确定发布吗?",
"Are you sure to delete this asset": "确定删除这个素材吗",
"Are you sure to delete all assets": "确定删除全部素材吗",
"Are you sure to delete this item": "确定删除这一项吗",
"Rename asset": "重命名素材",
"Input asset name": "输入素材名",
"Invalid asset name": "无效的素材名",
"Copied field to clipboard": "已复制 {field} 到剪切板",
"Unsaved Alert": "项目还未保存，是否保存?",
"Meta is in use, can not delete": "过程元正在使用中，不能删除!",
"Are you sure to delete this meta": "确定删除这个过程元吗?",
"This Meta ID is in use, can not save": "这个ID正在被使用，不能保存!",
"Custom node desc": "自定义节点",
"Divider node desc": "分流节点，出口会按顺序一次执行",
"Save this behavior before": "是否先保存这个行为?",
"Failed to import view": "导入视图失败",
"Failed to upload file": "上传文件失败",
"Single view": "单视图",
"Multi views": "多视图",
"Import single": "导入单",
"Import multi": "导入多",
"Import view success": "视图导入成功",
"menu": {
"save": "保存",
"details": "详情",
"preview": "预览",
"pack": "发布",
"exit": "退出",
"undo": "撤销",
"redo": "重做"
},
"view_node_menu": {
"node": "节点",
"image": "图片",
"label": "标签",
"rect": "矩形",
"scrollView": "滚动视图"
},
"panes": {
"Assets": "素材",
"Inspector": "属性",
"Playground": "画布",
"Views": "视图"
},
"dataTypes": {
"static": "静态",
"arguments": "入参",
"data-center": "数据中心",
"env": "自定义"
},
"prosTypes": {
"boolean": "布尔",
"string": "字符串",
"number": "数字",
"enum": "枚举",
"color": "颜色",
"asset": "素材",
"node": "节点",
"dynamic": "动态",
"map": "字典"
},
"events": {
"init": "初始化",
"awake": "激活",
"sleep": "入眠",
"data-center": "数据中心",
"click": "触摸点击",
"touchstart": "触摸按下",
"touchend": "触摸弹起",
"touchmove": "触摸移动"
},
"scaleMode": {
"exactFit": "精确适配",
"noBorder": "无边框",
"noScale": "不缩放",
"showAll": "全部展示",
"fixedWidth": "宽度锁定",
"fixedHeight": "高度锁定"
},
"rendererType": {
"webgl": "WEBGL",
"canvas": "CANVAS"
}
}
\ No newline at end of file
.history/src/locales/zh-CN_20191203194108.json 0 → 100644
View file @ 6985084a
{
"Alert": "提示",
"Confirm": "确认",
"Cancel": "取消",
"Close": "关闭",
"Still Close": "仍然关闭",
"Save": "保存",
"Save And Preview": "保存并预览",
"Reset": "重置",
"Copy": "复制",
"Exit": "退出",
"Props": "属性",
"Behavior": "行为",
"Add": "添加",
"Delete": "删除",
"Delete all": "删除全部",
"Import": "导入",
"Export": "导出",
"Upload": "上传",
"Uploading": "上传中",
"Edit": "编辑",
"EditEnv": "编辑环境",
"EditCustomModule": "编辑自定义模块",
"ID": "ID",
"Name": "名字",
"Alias": "别名",
"Output": "输出",
"Code": "代码",
"Desc": "描述",
"Empty": "空",
"Key": "属性名",
"Default": "默认值",
"Event": "事件",
"No desc": "无描述",
"Description": "描述",
"Failed to fetch": "网络错误!",
"In processing": "处理中……",
"Projects": "项目",
"copy": "副本",
"No projects": "无项目",
"Create": "创建",
"Project details": "项目详情",
"Project does not exist": "项目不存在",
"Project name": "项目名",
"Data mapping": "数据映射",
"Behavior Editor": "行为编辑器",
"Template": "模板",
"Preparing": "准备中…",
"Deleting": "删除中…",
"Saving": "保存中…",
"Divider": "分流节点",
"Custom": "自定义节点",
"Entry": "入口",
"Packing": "打包",
"Type": "类型",
"Group": "分组",
"Access denied": "无权限",
"Invalid router": "无效的页面",
"Jump after": "{cd}秒后跳转",
"Open in new tab": "新标签打开",
"Pack project successfully": "项目打包成功",
"Pack project failed": "项目打包失败",
"Create project": "创建项目",
"Rename project": "重命名项目",
"Entry scene view": "入口场景视图",
"Page title": "页面标题",
"Container ID": "容器ID",
"Design width": "设计宽度",
"Design height": "设计高度",
"Frame Rate": "帧率",
"Scale Mode": "缩放模式",
"Renderer Type": "渲染模式",
"Props Editor": "属性编辑器",
"Trigger once": "触发一次",
"Meta Editor": "过程元配置",
"Env editor": "环境编辑器",
"As inline": "作为内联",
"Project": "项目",
"Env constant": "自定义常量",
"Custom module": "自定义模块",
"Copy template to clipboard": "复制模板到粘贴板",
"Copied process to clipboard": "复制过程到粘贴板",
"Link to parent": "连接到父节点",
"Input project name": "输入项目名",
"Invalid project name": "无效的项目名",
"Creating project": "项目创建中…",
"Create project success": "项目创建成功",
"Duplicate project": "复制项目",
"Duplicating project": "项目复制中…",
"Duplicate project success": "项目复制成功",
"Project name cannot be empty": "项目名不能为空",
"This action will permanently delete project": "您将删除项目[{projectName}], 是否继续?",
"Fetching projects": "获取项目列表…",
"Failed to fetch env": "获取环境失败",
"Failed to fetch projects": "获取项目列表失败",
"Failed to fetch project": "获取项目失败",
"Failed to create project": "创建项目失败",
"Failed to duplicate project": "复制项目失败",
"Failed to delete project": "删除项目失败",
"Failed to get project": "获取项目失败",
"Failed to save project": "保存项目失败",
"Save project successfully": "保存项目成功",
"Input view name": "输入视图名",
"Invalid view name": "无效的视图名",
"Unsaved version found locally": "本地发现了未保存保本，请选择版本打开",
"Local Version": "本地版本",
"Remote Version": "远程版本",
"Confirm to exit the editor": "确定退出编辑器吗?",
"Confirm to publish": "确定发布吗?",
"Are you sure to delete this asset": "确定删除这个素材吗",
"Are you sure to delete all assets": "确定删除全部素材吗",
"Are you sure to delete this item": "确定删除这一项吗",
"Rename asset": "重命名素材",
"Input asset name": "输入素材名",
"Invalid asset name": "无效的素材名",
"Copied field to clipboard": "已复制 {field} 到剪切板",
"Unsaved Alert": "项目还未保存，是否保存?",
"Meta is in use, can not delete": "过程元正在使用中，不能删除!",
"Are you sure to delete this meta": "确定删除这个过程元吗?",
"This Meta ID is in use, can not save": "这个ID正在被使用，不能保存!",
"Custom node desc": "自定义节点",
"Divider node desc": "分流节点，出口会按顺序一次执行",
"Save this behavior before": "是否先保存这个行为?",
"Failed to import view": "导入视图失败",
"Failed to upload file": "上传文件失败",
"Single view": "单视图",
"Multi views": "多视图",
"Import single": "导入单",
"Import multi": "导入多",
"Import view success": "视图导入成功",
"menu": {
"save": "保存",
"details": "详情",
"preview": "预览",
"pack": "发布",
"exit": "退出",
"undo": "撤销",
"redo": "重做"
},
"view_node_menu": {
"node": "节点",
"image": "图片",
"label": "标签",
"rect": "矩形",
"scrollView": "滚动视图"
},
"panes": {
"Assets": "素材",
"Inspector": "属性",
"Playground": "画布",
"Views": "视图"
},
"dataTypes": {
"static": "静态",
"arguments": "入参",
"data-center": "数据中心",
"env": "自定义"
},
"prosTypes": {
"boolean": "布尔",
"string": "字符串",
"number": "数字",
"enum": "枚举",
"color": "颜色",
"asset": "素材",
"node": "节点",
"dynamic": "动态",
"map": "字典"
},
"events": {
"init": "初始化",
"awake": "激活",
"sleep": "入眠",
"data-center": "数据中心",
"click": "触摸点击",
"touchstart": "触摸按下",
"touchend": "触摸弹起",
"touchmove": "触摸移动"
},
"scaleMode": {
"exactFit": "精确适配",
"noBorder": "无边框",
"noScale": "不缩放",
"showAll": "全部展示",
"fixedWidth": "宽度锁定",
"fixedHeight": "高度锁定"
},
"rendererType": {
"webgl": "WEBGL",
"canvas": "CANVAS"
}
}
\ No newline at end of file
.history/src/views/Editor/Inspector/BehaviorTab_20191128104254.vue 0 → 100644
View file @ 6985084a
<template>
<div class="zero-inspector-behavior-form" v-if="activeComponent.uuid">
<el-scrollbar class="scrollbar" wrap-class="wrap-x-hidden">
<el-form ref="form" size="mini" label-width="60px">
<div v-for="(evn, key) in eventsObj" :key="key">
<el-form-item :label="$t('Event') + ':'">
<div>{{events[key]}}</div>
<div >
<!--<el-tooltip :content="$t('Trigger once')" placement="top">
<el-switch v-model="evn.once" @change="v => handleOnceChange(key, v)"></el-switch>
</el-tooltip>-->
<el-button size="mini" @click="showBehaviorEditor(evn, key)" style="margin-left: 20px;" icon="el-icon-edit">
<!--<i v-if="evn.behaviors && evn.behaviors.length" class="el-icon-check el-icon&#45;&#45;right"></i>-->
</el-button>
<el-button icon="el-icon-delete" size="mini" v-if="evn.behaviors && evn.behaviors.length" @click="deleteBehavior(key)">
</el-button>
</div>
</el-form-item>
</div>
</el-form>
</el-scrollbar>
<behavior-editor-dialog :behaviors="behaviors" @change="v => handleBehaviorsChange(v)" ref="behaviorEditorDialog"></behavior-editor-dialog>
</div>
</template>
<script>
import { mapGetters } from 'vuex';
import _ from 'lodash';
import BehaviorEditorDialog from '../dialogs/BehaviorEditorDialog';
export default {
name: 'BehaviorTab',
data() {
let eventsObj = {};
const events = this.$t('events');
Object.keys(events).forEach(event => {
eventsObj[event] = {
once: false,
behaviors: []
};
});
return {
events,
eventsObj,
behaviors: [],
currentEvent: ''
};
},
components: { BehaviorEditorDialog },
computed: {
...mapGetters(['activeComponent', 'componentList'])
},
methods: {
showBehaviorEditor(evn, key) {
this.currentEvent = key;
this.behaviors = evn.behaviors || [];
this.$refs.behaviorEditorDialog.show(this.behaviors, this.activeComponent.name + '_' + key);
},
/**
* 当前选中组件发生变化时，更新eventsObj的数据
*/
updateEventsObj() {
let _events = this.activeComponent.events || {};
_.forIn(this.eventsObj, (value, key) => {
if (_events[key]) {
this.$set(this.eventsObj, key, _.cloneDeep(_events[key]));
} else {
value.once = false;
value.behaviors = [];
}
});
},
/**
* 是否只执行一次
*/
handleOnceChange(key, v) {
let _event = this.eventsObj[key];
// 如果没有behavior，once没有用处，则不执行
if (_event.behaviors && _event.behaviors.length) {
let event = {};
event[key] = {
once: v,
behaviors: _event.behaviors
};
let events = this.activeComponent.events;
this.$store.dispatch('modifyActiveView', {
events: _.merge({}, events, event)
});
}
},
/**
* 行为发生变化，同步数据
*/
handleBehaviorsChange(v) {
if (this.currentEvent /* && v && v.length*/) {
let event = {};
let currentEvent = this.eventsObj[this.currentEvent];
event[this.currentEvent] = Object.assign(currentEvent /*, { behaviors: v }*/);
let events = this.activeComponent.events;
this.$store.dispatch('modifyActiveView', {
events: _.merge({}, events, event)
});
this.updateEventsObj();
}
},
/**
* 删除行为
*/
deleteBehavior(key) {
let _events = this.activeComponent.events || {};
delete _events[key];
this.$store.dispatch('modifyActiveView', {
events: _events
});
this.updateEventsObj();
}
},
watch: {
'activeComponent.uuid': function() {
this.updateEventsObj();
console.log('activeComponent.uuid change');
}
}
};
</script>
<style scoped>
</style>
\ No newline at end of file
.history/src/views/Editor/Inspector/BehaviorTab_20191203192306.vue 0 → 100644
View file @ 6985084a
<template>
<div class="zero-inspector-behavior-form" v-if="activeComponent.uuid">
<el-scrollbar class="scrollbar" wrap-class="wrap-x-hidden">
<el-form ref="form" size="mini" label-width="60px">
<div v-for="(evn, key) in eventsObj" :key="key">
<el-form-item :label="$t('Event') + ':'">
<div>{{events[key]}}</div>
<div >
<!--<el-tooltip :content="$t('Trigger once')" placement="top">
<el-switch v-model="evn.once" @change="v => handleOnceChange(key, v)"></el-switch>
</el-tooltip>-->
<el-button size="mini" @click="showBehaviorEditor(evn, key)" style="margin-left: 20px;" icon="el-icon-edit">
<!--<i v-if="evn.behaviors && evn.behaviors.length" class="el-icon-check el-icon&#45;&#45;right"></i>-->
</el-button>
<el-button icon="el-icon-delete" size="mini" v-if="evn.behaviors && evn.behaviors.length" @click="deleteBehavior(key)">
</el-button>
</div>
</el-form-item>
</div>
</el-form>
</el-scrollbar>
<behavior-editor-dialog :behaviors="behaviors" @change="v => handleBehaviorsChange(v)" ref="behaviorEditorDialog"></behavior-editor-dialog>
</div>
</template>
<script>
import { mapGetters } from 'vuex';
import _ from 'lodash';
import BehaviorEditorDialog from '../dialogs/BehaviorEditorDialog';
import events from "@/global-events.js"
export default {
name: 'BehaviorTab',
data() {
let eventsObj = {};
const events = this.$t('events');
Object.keys(events).forEach(event => {
eventsObj[event] = {
once: false,
behaviors: []
};
});
return {
events,
eventsObj,
behaviors: [],
currentEvent: ''
};
},
components: { BehaviorEditorDialog },
computed: {
...mapGetters(['activeComponent', 'componentList'])
},
methods: {
showBehaviorEditor(evn, key) {
this.currentEvent = key;
this.behaviors = evn.behaviors || [];
this.$refs.behaviorEditorDialog.show(this.behaviors, this.activeComponent.name + '_' + key);
},
/**
* 当前选中组件发生变化时，更新eventsObj的数据
*/
updateEventsObj() {
let _events = this.activeComponent.events || {};
_.forIn(this.eventsObj, (value, key) => {
if (_events[key]) {
this.$set(this.eventsObj, key, _.cloneDeep(_events[key]));
} else {
value.once = false;
value.behaviors = [];
}
});
},
/**
* 是否只执行一次
*/
handleOnceChange(key, v) {
let _event = this.eventsObj[key];
// 如果没有behavior，once没有用处，则不执行
if (_event.behaviors && _event.behaviors.length) {
let event = {};
event[key] = {
once: v,
behaviors: _event.behaviors
};
let events = this.activeComponent.events;
this.$store.dispatch('modifyActiveView', {
events: _.merge({}, events, event)
});
}
},
/**
* 行为发生变化，同步数据
*/
handleBehaviorsChange(v) {
if (this.currentEvent /* && v && v.length*/) {
let event = {};
let currentEvent = this.eventsObj[this.currentEvent];
event[this.currentEvent] = Object.assign(currentEvent /*, { behaviors: v }*/);
let events = this.activeComponent.events;
this.$store.dispatch('modifyActiveView', {
events: _.merge({}, events, event)
});
this.updateEventsObj();
}
events.$emit('saveAndPreview')
},
/**
* 删除行为
*/
deleteBehavior(key) {
let _events = this.activeComponent.events || {};
delete _events[key];
this.$store.dispatch('modifyActiveView', {
events: _events
});
this.updateEventsObj();
}
},
watch: {
'activeComponent.uuid': function() {
this.updateEventsObj();
console.log('activeComponent.uuid change');
}
}
};
</script>
<style scoped>
</style>
\ No newline at end of file
.history/src/views/Editor/Inspector/BehaviorTab_20191203194753.vue 0 → 100644
View file @ 6985084a
<template>
<div class="zero-inspector-behavior-form" v-if="activeComponent.uuid">
<el-scrollbar class="scrollbar" wrap-class="wrap-x-hidden">
<el-form ref="form" size="mini" label-width="60px">
<div v-for="(evn, key) in eventsObj" :key="key">
<el-form-item :label="$t('Event') + ':'">
<div>{{events[key]}}</div>
<div >
<!--<el-tooltip :content="$t('Trigger once')" placement="top">
<el-switch v-model="evn.once" @change="v => handleOnceChange(key, v)"></el-switch>
</el-tooltip>-->
<el-button size="mini" @click="showBehaviorEditor(evn, key)" style="margin-left: 20px;" icon="el-icon-edit">
<!--<i v-if="evn.behaviors && evn.behaviors.length" class="el-icon-check el-icon&#45;&#45;right"></i>-->
</el-button>
<el-button icon="el-icon-delete" size="mini" v-if="evn.behaviors && evn.behaviors.length" @click="deleteBehavior(key)">
</el-button>
</div>
</el-form-item>
</div>
</el-form>
</el-scrollbar>
<behavior-editor-dialog :behaviors="behaviors" @change="v => handleBehaviorsChange(v)" ref="behaviorEditorDialog"></behavior-editor-dialog>
</div>
</template>
<script>
import { mapGetters } from 'vuex';
import _ from 'lodash';
import BehaviorEditorDialog from '../dialogs/BehaviorEditorDialog';
import events from "@/global-events.js"
export default {
name: 'BehaviorTab',
data() {
let eventsObj = {};
const events = this.$t('events');
Object.keys(events).forEach(event => {
eventsObj[event] = {
once: false,
behaviors: []
};
});
return {
events,
eventsObj,
behaviors: [],
currentEvent: ''
};
},
components: { BehaviorEditorDialog },
computed: {
...mapGetters(['activeComponent', 'componentList'])
},
methods: {
showBehaviorEditor(evn, key) {
this.currentEvent = key;
this.behaviors = evn.behaviors || [];
this.$refs.behaviorEditorDialog.show(this.behaviors, this.activeComponent.name + '_' + key);
},
/**
* 当前选中组件发生变化时，更新eventsObj的数据
*/
updateEventsObj() {
let _events = this.activeComponent.events || {};
_.forIn(this.eventsObj, (value, key) => {
if (_events[key]) {
this.$set(this.eventsObj, key, _.cloneDeep(_events[key]));
} else {
value.once = false;
value.behaviors = [];
}
});
},
/**
* 是否只执行一次
*/
handleOnceChange(key, v) {
let _event = this.eventsObj[key];
// 如果没有behavior，once没有用处，则不执行
if (_event.behaviors && _event.behaviors.length) {
let event = {};
event[key] = {
once: v,
behaviors: _event.behaviors
};
let events = this.activeComponent.events;
this.$store.dispatch('modifyActiveView', {
events: _.merge({}, events, event)
});
}
},
/**
* 行为发生变化，同步数据
*/
handleBehaviorsChange(v,isPreview) {
if (this.currentEvent /* && v && v.length*/) {
let event = {};
let currentEvent = this.eventsObj[this.currentEvent];
event[this.currentEvent] = Object.assign(currentEvent /*, { behaviors: v }*/);
let events = this.activeComponent.events;
this.$store.dispatch('modifyActiveView', {
events: _.merge({}, events, event)
});
this.updateEventsObj();
}
if(isPreview){
events.$emit('saveAndPreview')
}
},
/**
* 删除行为
*/
deleteBehavior(key) {
let _events = this.activeComponent.events || {};
delete _events[key];
this.$store.dispatch('modifyActiveView', {
events: _events
});
this.updateEventsObj();
}
},
watch: {
'activeComponent.uuid': function() {
this.updateEventsObj();
console.log('activeComponent.uuid change');
}
}
};
</script>
<style scoped>
</style>
\ No newline at end of file
.history/src/views/Editor/Inspector/BehaviorTab_20191203194842.vue 0 → 100644
View file @ 6985084a
<template>
<div class="zero-inspector-behavior-form" v-if="activeComponent.uuid">
<el-scrollbar class="scrollbar" wrap-class="wrap-x-hidden">
<el-form ref="form" size="mini" label-width="60px">
<div v-for="(evn, key) in eventsObj" :key="key">
<el-form-item :label="$t('Event') + ':'">
<div>{{events[key]}}</div>
<div >
<!--<el-tooltip :content="$t('Trigger once')" placement="top">
<el-switch v-model="evn.once" @change="v => handleOnceChange(key, v)"></el-switch>
</el-tooltip>-->
<el-button size="mini" @click="showBehaviorEditor(evn, key)" style="margin-left: 20px;" icon="el-icon-edit">
<!--<i v-if="evn.behaviors && evn.behaviors.length" class="el-icon-check el-icon&#45;&#45;right"></i>-->
</el-button>
<el-button icon="el-icon-delete" size="mini" v-if="evn.behaviors && evn.behaviors.length" @click="deleteBehavior(key)">
</el-button>
</div>
</el-form-item>
</div>
</el-form>
</el-scrollbar>
<behavior-editor-dialog :behaviors="behaviors" @change="v => handleBehaviorsChange(v)" ref="behaviorEditorDialog"></behavior-editor-dialog>
</div>
</template>
<script>
import { mapGetters } from 'vuex';
import _ from 'lodash';
import BehaviorEditorDialog from '../dialogs/BehaviorEditorDialog';
import events from "@/global-events.js"
export default {
name: 'BehaviorTab',
data() {
let eventsObj = {};
const events = this.$t('events');
Object.keys(events).forEach(event => {
eventsObj[event] = {
once: false,
behaviors: []
};
});
return {
events,
eventsObj,
behaviors: [],
currentEvent: ''
};
},
components: { BehaviorEditorDialog },
computed: {
...mapGetters(['activeComponent', 'componentList'])
},
methods: {
showBehaviorEditor(evn, key) {
this.currentEvent = key;
this.behaviors = evn.behaviors || [];
this.$refs.behaviorEditorDialog.show(this.behaviors, this.activeComponent.name + '_' + key);
},
/**
* 当前选中组件发生变化时，更新eventsObj的数据
*/
updateEventsObj() {
let _events = this.activeComponent.events || {};
_.forIn(this.eventsObj, (value, key) => {
if (_events[key]) {
this.$set(this.eventsObj, key, _.cloneDeep(_events[key]));
} else {
value.once = false;
value.behaviors = [];
}
});
},
/**
* 是否只执行一次
*/
handleOnceChange(key, v) {
let _event = this.eventsObj[key];
// 如果没有behavior，once没有用处，则不执行
if (_event.behaviors && _event.behaviors.length) {
let event = {};
event[key] = {
once: v,
behaviors: _event.behaviors
};
let events = this.activeComponent.events;
this.$store.dispatch('modifyActiveView', {
events: _.merge({}, events, event)
});
}
},
/**
* 行为发生变化，同步数据
*/
handleBehaviorsChange(v,isPreview) {
if (this.currentEvent /* && v && v.length*/) {
let event = {};
let currentEvent = this.eventsObj[this.currentEvent];
event[this.currentEvent] = Object.assign(currentEvent /*, { behaviors: v }*/);
let events = this.activeComponent.events;
this.$store.dispatch('modifyActiveView', {
events: _.merge({}, events, event)
});
this.updateEventsObj();
}
},
/**
* 删除行为
*/
deleteBehavior(key) {
let _events = this.activeComponent.events || {};
delete _events[key];
this.$store.dispatch('modifyActiveView', {
events: _events
});
this.updateEventsObj();
}
},
watch: {
'activeComponent.uuid': function() {
this.updateEventsObj();
console.log('activeComponent.uuid change');
}
}
};
</script>
<style scoped>
</style>
\ No newline at end of file
.history/src/views/Editor/Inspector/BehaviorTab_20191203195230.vue 0 → 100644
View file @ 6985084a
<template>
<div class="zero-inspector-behavior-form" v-if="activeComponent.uuid">
<el-scrollbar class="scrollbar" wrap-class="wrap-x-hidden">
<el-form ref="form" size="mini" label-width="60px">
<div v-for="(evn, key) in eventsObj" :key="key">
<el-form-item :label="$t('Event') + ':'">
<div>{{events[key]}}</div>
<div >
<!--<el-tooltip :content="$t('Trigger once')" placement="top">
<el-switch v-model="evn.once" @change="v => handleOnceChange(key, v)"></el-switch>
</el-tooltip>-->
<el-button size="mini" @click="showBehaviorEditor(evn, key)" style="margin-left: 20px;" icon="el-icon-edit">
<!--<i v-if="evn.behaviors && evn.behaviors.length" class="el-icon-check el-icon&#45;&#45;right"></i>-->
</el-button>
<el-button icon="el-icon-delete" size="mini" v-if="evn.behaviors && evn.behaviors.length" @click="deleteBehavior(key)">
</el-button>
</div>
</el-form-item>
</div>
</el-form>
</el-scrollbar>
<behavior-editor-dialog :behaviors="behaviors" @change="v => handleBehaviorsChange(v)" ref="behaviorEditorDialog"></behavior-editor-dialog>
</div>
</template>
<script>
import { mapGetters } from 'vuex';
import _ from 'lodash';
import BehaviorEditorDialog from '../dialogs/BehaviorEditorDialog';
import events from "@/global-events.js"
export default {
name: 'BehaviorTab',
data() {
let eventsObj = {};
const events = this.$t('events');
Object.keys(events).forEach(event => {
eventsObj[event] = {
once: false,
behaviors: []
};
});
return {
events,
eventsObj,
behaviors: [],
currentEvent: ''
};
},
components: { BehaviorEditorDialog },
computed: {
...mapGetters(['activeComponent', 'componentList'])
},
methods: {
showBehaviorEditor(evn, key) {
this.currentEvent = key;
this.behaviors = evn.behaviors || [];
this.$refs.behaviorEditorDialog.show(this.behaviors, this.activeComponent.name + '_' + key);
},
/**
* 当前选中组件发生变化时，更新eventsObj的数据
*/
updateEventsObj() {
let _events = this.activeComponent.events || {};
_.forIn(this.eventsObj, (value, key) => {
if (_events[key]) {
this.$set(this.eventsObj, key, _.cloneDeep(_events[key]));
} else {
value.once = false;
value.behaviors = [];
}
});
},
/**
* 是否只执行一次
*/
handleOnceChange(key, v) {
let _event = this.eventsObj[key];
// 如果没有behavior，once没有用处，则不执行
if (_event.behaviors && _event.behaviors.length) {
let event = {};
event[key] = {
once: v,
behaviors: _event.behaviors
};
let events = this.activeComponent.events;
this.$store.dispatch('modifyActiveView', {
events: _.merge({}, events, event)
});
}
},
/**
* 行为发生变化，同步数据
*/
handleBehaviorsChange(v,isPreview) {
if (this.currentEvent /* && v && v.length*/) {
let event = {};
let currentEvent = this.eventsObj[this.currentEvent];
event[this.currentEvent] = Object.assign(currentEvent /*, { behaviors: v }*/);
let events = this.activeComponent.events;
this.$store.dispatch('modifyActiveView', {
events: _.merge({}, events, event)
});
this.updateEventsObj();
}
},
/**
* 删除行为
*/
deleteBehavior(key) {
let _events = this.activeComponent.events || {};
delete _events[key];
this.$store.dispatch('modifyActiveView', {
events: _events
});
this.updateEventsObj();
}
},
watch: {
'activeComponent.uuid': function() {
this.updateEventsObj();
console.log('activeComponent.uuid change');
}
}
};
</script>
<style scoped>
</style>
\ No newline at end of file
.history/src/views/Editor/Inspector/BehaviorTab_20191203195242.vue 0 → 100644
View file @ 6985084a
<template>
<div class="zero-inspector-behavior-form" v-if="activeComponent.uuid">
<el-scrollbar class="scrollbar" wrap-class="wrap-x-hidden">
<el-form ref="form" size="mini" label-width="60px">
<div v-for="(evn, key) in eventsObj" :key="key">
<el-form-item :label="$t('Event') + ':'">
<div>{{events[key]}}</div>
<div >
<!--<el-tooltip :content="$t('Trigger once')" placement="top">
<el-switch v-model="evn.once" @change="v => handleOnceChange(key, v)"></el-switch>
</el-tooltip>-->
<el-button size="mini" @click="showBehaviorEditor(evn, key)" style="margin-left: 20px;" icon="el-icon-edit">
<!--<i v-if="evn.behaviors && evn.behaviors.length" class="el-icon-check el-icon&#45;&#45;right"></i>-->
</el-button>
<el-button icon="el-icon-delete" size="mini" v-if="evn.behaviors && evn.behaviors.length" @click="deleteBehavior(key)">
</el-button>
</div>
</el-form-item>
</div>
</el-form>
</el-scrollbar>
<behavior-editor-dialog :behaviors="behaviors" @change="v => handleBehaviorsChange(v)" ref="behaviorEditorDialog"></behavior-editor-dialog>
</div>
</template>
<script>
import { mapGetters } from 'vuex';
import _ from 'lodash';
import BehaviorEditorDialog from '../dialogs/BehaviorEditorDialog';
import events from "@/global-events.js"
export default {
name: 'BehaviorTab',
data() {
let eventsObj = {};
const events = this.$t('events');
Object.keys(events).forEach(event => {
eventsObj[event] = {
once: false,
behaviors: []
};
});
return {
events,
eventsObj,
behaviors: [],
currentEvent: ''
};
},
components: { BehaviorEditorDialog },
computed: {
...mapGetters(['activeComponent', 'componentList'])
},
methods: {
showBehaviorEditor(evn, key) {
this.currentEvent = key;
this.behaviors = evn.behaviors || [];
this.$refs.behaviorEditorDialog.show(this.behaviors, this.activeComponent.name + '_' + key);
},
/**
* 当前选中组件发生变化时，更新eventsObj的数据
*/
updateEventsObj() {
let _events = this.activeComponent.events || {};
_.forIn(this.eventsObj, (value, key) => {
if (_events[key]) {
this.$set(this.eventsObj, key, _.cloneDeep(_events[key]));
} else {
value.once = false;
value.behaviors = [];
}
});
},
/**
* 是否只执行一次
*/
handleOnceChange(key, v) {
let _event = this.eventsObj[key];
// 如果没有behavior，once没有用处，则不执行
if (_event.behaviors && _event.behaviors.length) {
let event = {};
event[key] = {
once: v,
behaviors: _event.behaviors
};
let events = this.activeComponent.events;
this.$store.dispatch('modifyActiveView', {
events: _.merge({}, events, event)
});
}
},
/**
* 行为发生变化，同步数据
*/
handleBehaviorsChange(v,isPreview) {
if (this.currentEvent /* && v && v.length*/) {
let event = {};
let currentEvent = this.eventsObj[this.currentEvent];
event[this.currentEvent] = Object.assign(currentEvent /*, { behaviors: v }*/);
let events = this.activeComponent.events;
this.$store.dispatch('modifyActiveView', {
events: _.merge({}, events, event)
});
this.updateEventsObj();
}
if(isPreview){
events.$emit('saveAndPreview')
}
},
/**
* 删除行为
*/
deleteBehavior(key) {
let _events = this.activeComponent.events || {};
delete _events[key];
this.$store.dispatch('modifyActiveView', {
events: _events
});
this.updateEventsObj();
}
},
watch: {
'activeComponent.uuid': function() {
this.updateEventsObj();
console.log('activeComponent.uuid change');
}
}
};
</script>
<style scoped>
</style>
\ No newline at end of file
.history/src/views/Editor/Inspector/BehaviorTab_20191203195343.vue 0 → 100644
View file @ 6985084a
<template>
<div class="zero-inspector-behavior-form" v-if="activeComponent.uuid">
<el-scrollbar class="scrollbar" wrap-class="wrap-x-hidden">
<el-form ref="form" size="mini" label-width="60px">
<div v-for="(evn, key) in eventsObj" :key="key">
<el-form-item :label="$t('Event') + ':'">
<div>{{events[key]}}</div>
<div >
<!--<el-tooltip :content="$t('Trigger once')" placement="top">
<el-switch v-model="evn.once" @change="v => handleOnceChange(key, v)"></el-switch>
</el-tooltip>-->
<el-button size="mini" @click="showBehaviorEditor(evn, key)" style="margin-left: 20px;" icon="el-icon-edit">
<!--<i v-if="evn.behaviors && evn.behaviors.length" class="el-icon-check el-icon&#45;&#45;right"></i>-->
</el-button>
<el-button icon="el-icon-delete" size="mini" v-if="evn.behaviors && evn.behaviors.length" @click="deleteBehavior(key)">
</el-button>
</div>
</el-form-item>
</div>
</el-form>
</el-scrollbar>
<behavior-editor-dialog :behaviors="behaviors" @change="v => handleBehaviorsChange(v,isPreview)" ref="behaviorEditorDialog"></behavior-editor-dialog>
</div>
</template>
<script>
import { mapGetters } from 'vuex';
import _ from 'lodash';
import BehaviorEditorDialog from '../dialogs/BehaviorEditorDialog';
import events from "@/global-events.js"
export default {
name: 'BehaviorTab',
data() {
let eventsObj = {};
const events = this.$t('events');
Object.keys(events).forEach(event => {
eventsObj[event] = {
once: false,
behaviors: []
};
});
return {
events,
eventsObj,
behaviors: [],
currentEvent: ''
};
},
components: { BehaviorEditorDialog },
computed: {
...mapGetters(['activeComponent', 'componentList'])
},
methods: {
showBehaviorEditor(evn, key) {
this.currentEvent = key;
this.behaviors = evn.behaviors || [];
this.$refs.behaviorEditorDialog.show(this.behaviors, this.activeComponent.name + '_' + key);
},
/**
* 当前选中组件发生变化时，更新eventsObj的数据
*/
updateEventsObj() {
let _events = this.activeComponent.events || {};
_.forIn(this.eventsObj, (value, key) => {
if (_events[key]) {
this.$set(this.eventsObj, key, _.cloneDeep(_events[key]));
} else {
value.once = false;
value.behaviors = [];
}
});
},
/**
* 是否只执行一次
*/
handleOnceChange(key, v) {
let _event = this.eventsObj[key];
// 如果没有behavior，once没有用处，则不执行
if (_event.behaviors && _event.behaviors.length) {
let event = {};
event[key] = {
once: v,
behaviors: _event.behaviors
};
let events = this.activeComponent.events;
this.$store.dispatch('modifyActiveView', {
events: _.merge({}, events, event)
});
}
},
/**
* 行为发生变化，同步数据
*/
handleBehaviorsChange(v,isPreview) {
if (this.currentEvent /* && v && v.length*/) {
let event = {};
let currentEvent = this.eventsObj[this.currentEvent];
event[this.currentEvent] = Object.assign(currentEvent /*, { behaviors: v }*/);
let events = this.activeComponent.events;
this.$store.dispatch('modifyActiveView', {
events: _.merge({}, events, event)
});
this.updateEventsObj();
}
if(isPreview){
events.$emit('saveAndPreview')
}
},
/**
* 删除行为
*/
deleteBehavior(key) {
let _events = this.activeComponent.events || {};
delete _events[key];
this.$store.dispatch('modifyActiveView', {
events: _events
});
this.updateEventsObj();
}
},
watch: {
'activeComponent.uuid': function() {
this.updateEventsObj();
console.log('activeComponent.uuid change');
}
}
};
</script>
<style scoped>
</style>
\ No newline at end of file
.history/src/views/Editor/Inspector/BehaviorTab_20191203195424.vue 0 → 100644
View file @ 6985084a
<template>
<div class="zero-inspector-behavior-form" v-if="activeComponent.uuid">
<el-scrollbar class="scrollbar" wrap-class="wrap-x-hidden">
<el-form ref="form" size="mini" label-width="60px">
<div v-for="(evn, key) in eventsObj" :key="key">
<el-form-item :label="$t('Event') + ':'">
<div>{{events[key]}}</div>
<div >
<!--<el-tooltip :content="$t('Trigger once')" placement="top">
<el-switch v-model="evn.once" @change="v => handleOnceChange(key, v)"></el-switch>
</el-tooltip>-->
<el-button size="mini" @click="showBehaviorEditor(evn, key)" style="margin-left: 20px;" icon="el-icon-edit">
<!--<i v-if="evn.behaviors && evn.behaviors.length" class="el-icon-check el-icon&#45;&#45;right"></i>-->
</el-button>
<el-button icon="el-icon-delete" size="mini" v-if="evn.behaviors && evn.behaviors.length" @click="deleteBehavior(key)">
</el-button>
</div>
</el-form-item>
</div>
</el-form>
</el-scrollbar>
<behavior-editor-dialog :behaviors="behaviors" @change="v => handleBehaviorsChange" ref="behaviorEditorDialog"></behavior-editor-dialog>
</div>
</template>
<script>
import { mapGetters } from 'vuex';
import _ from 'lodash';
import BehaviorEditorDialog from '../dialogs/BehaviorEditorDialog';
import events from "@/global-events.js"
export default {
name: 'BehaviorTab',
data() {
let eventsObj = {};
const events = this.$t('events');
Object.keys(events).forEach(event => {
eventsObj[event] = {
once: false,
behaviors: []
};
});
return {
events,
eventsObj,
behaviors: [],
currentEvent: ''
};
},
components: { BehaviorEditorDialog },
computed: {
...mapGetters(['activeComponent', 'componentList'])
},
methods: {
showBehaviorEditor(evn, key) {
this.currentEvent = key;
this.behaviors = evn.behaviors || [];
this.$refs.behaviorEditorDialog.show(this.behaviors, this.activeComponent.name + '_' + key);
},
/**
* 当前选中组件发生变化时，更新eventsObj的数据
*/
updateEventsObj() {
let _events = this.activeComponent.events || {};
_.forIn(this.eventsObj, (value, key) => {
if (_events[key]) {
this.$set(this.eventsObj, key, _.cloneDeep(_events[key]));
} else {
value.once = false;
value.behaviors = [];
}
});
},
/**
* 是否只执行一次
*/
handleOnceChange(key, v) {
let _event = this.eventsObj[key];
// 如果没有behavior，once没有用处，则不执行
if (_event.behaviors && _event.behaviors.length) {
let event = {};
event[key] = {
once: v,
behaviors: _event.behaviors
};
let events = this.activeComponent.events;
this.$store.dispatch('modifyActiveView', {
events: _.merge({}, events, event)
});
}
},
/**
* 行为发生变化，同步数据
*/
handleBehaviorsChange(v,isPreview) {
if (this.currentEvent /* && v && v.length*/) {
let event = {};
let currentEvent = this.eventsObj[this.currentEvent];
event[this.currentEvent] = Object.assign(currentEvent /*, { behaviors: v }*/);
let events = this.activeComponent.events;
this.$store.dispatch('modifyActiveView', {
events: _.merge({}, events, event)
});
this.updateEventsObj();
}
if(isPreview){
events.$emit('saveAndPreview')
}
},
/**
* 删除行为
*/
deleteBehavior(key) {
let _events = this.activeComponent.events || {};
delete _events[key];
this.$store.dispatch('modifyActiveView', {
events: _events
});
this.updateEventsObj();
}
},
watch: {
'activeComponent.uuid': function() {
this.updateEventsObj();
console.log('activeComponent.uuid change');
}
}
};
</script>
<style scoped>
</style>
\ No newline at end of file
.history/src/views/Editor/Inspector/BehaviorTab_20191203195515.vue 0 → 100644
View file @ 6985084a
<template>
<div class="zero-inspector-behavior-form" v-if="activeComponent.uuid">
<el-scrollbar class="scrollbar" wrap-class="wrap-x-hidden">
<el-form ref="form" size="mini" label-width="60px">
<div v-for="(evn, key) in eventsObj" :key="key">
<el-form-item :label="$t('Event') + ':'">
<div>{{events[key]}}</div>
<div >
<!--<el-tooltip :content="$t('Trigger once')" placement="top">
<el-switch v-model="evn.once" @change="v => handleOnceChange(key, v)"></el-switch>
</el-tooltip>-->
<el-button size="mini" @click="showBehaviorEditor(evn, key)" style="margin-left: 20px;" icon="el-icon-edit">
<!--<i v-if="evn.behaviors && evn.behaviors.length" class="el-icon-check el-icon&#45;&#45;right"></i>-->
</el-button>
<el-button icon="el-icon-delete" size="mini" v-if="evn.behaviors && evn.behaviors.length" @click="deleteBehavior(key)">
</el-button>
</div>
</el-form-item>
</div>
</el-form>
</el-scrollbar>
<behavior-editor-dialog :behaviors="behaviors" @change="v => handleBehaviorsChange(v)" ref="behaviorEditorDialog"></behavior-editor-dialog>
</div>
</template>
<script>
import { mapGetters } from 'vuex';
import _ from 'lodash';
import BehaviorEditorDialog from '../dialogs/BehaviorEditorDialog';
import events from "@/global-events.js"
export default {
name: 'BehaviorTab',
data() {
let eventsObj = {};
const events = this.$t('events');
Object.keys(events).forEach(event => {
eventsObj[event] = {
once: false,
behaviors: []
};
});
return {
events,
eventsObj,
behaviors: [],
currentEvent: ''
};
},
components: { BehaviorEditorDialog },
computed: {
...mapGetters(['activeComponent', 'componentList'])
},
methods: {
showBehaviorEditor(evn, key) {
this.currentEvent = key;
this.behaviors = evn.behaviors || [];
this.$refs.behaviorEditorDialog.show(this.behaviors, this.activeComponent.name + '_' + key);
},
/**
* 当前选中组件发生变化时，更新eventsObj的数据
*/
updateEventsObj() {
let _events = this.activeComponent.events || {};
_.forIn(this.eventsObj, (value, key) => {
if (_events[key]) {
this.$set(this.eventsObj, key, _.cloneDeep(_events[key]));
} else {
value.once = false;
value.behaviors = [];
}
});
},
/**
* 是否只执行一次
*/
handleOnceChange(key, v) {
let _event = this.eventsObj[key];
// 如果没有behavior，once没有用处，则不执行
if (_event.behaviors && _event.behaviors.length) {
let event = {};
event[key] = {
once: v,
behaviors: _event.behaviors
};
let events = this.activeComponent.events;
this.$store.dispatch('modifyActiveView', {
events: _.merge({}, events, event)
});
}
},
/**
* 行为发生变化，同步数据
*/
handleBehaviorsChange(v,isPreview) {
if (this.currentEvent /* && v && v.length*/) {
let event = {};
let currentEvent = this.eventsObj[this.currentEvent];
event[this.currentEvent] = Object.assign(currentEvent /*, { behaviors: v }*/);
let events = this.activeComponent.events;
this.$store.dispatch('modifyActiveView', {
events: _.merge({}, events, event)
});
this.updateEventsObj();
}
if(isPreview){
events.$emit('saveAndPreview')
}
},
/**
* 删除行为
*/
deleteBehavior(key) {
let _events = this.activeComponent.events || {};
delete _events[key];
this.$store.dispatch('modifyActiveView', {
events: _events
});
this.updateEventsObj();
}
},
watch: {
'activeComponent.uuid': function() {
this.updateEventsObj();
console.log('activeComponent.uuid change');
}
}
};
</script>
<style scoped>
</style>
\ No newline at end of file
.history/src/views/Editor/Inspector/BehaviorTab_20191203195835.vue 0 → 100644
View file @ 6985084a
<template>
<div class="zero-inspector-behavior-form" v-if="activeComponent.uuid">
<el-scrollbar class="scrollbar" wrap-class="wrap-x-hidden">
<el-form ref="form" size="mini" label-width="60px">
<div v-for="(evn, key) in eventsObj" :key="key">
<el-form-item :label="$t('Event') + ':'">
<div>{{events[key]}}</div>
<div >
<!--<el-tooltip :content="$t('Trigger once')" placement="top">
<el-switch v-model="evn.once" @change="v => handleOnceChange(key, v)"></el-switch>
</el-tooltip>-->
<el-button size="mini" @click="showBehaviorEditor(evn, key)" style="margin-left: 20px;" icon="el-icon-edit">
<!--<i v-if="evn.behaviors && evn.behaviors.length" class="el-icon-check el-icon&#45;&#45;right"></i>-->
</el-button>
<el-button icon="el-icon-delete" size="mini" v-if="evn.behaviors && evn.behaviors.length" @click="deleteBehavior(key)">
</el-button>
</div>
</el-form-item>
</div>
</el-form>
</el-scrollbar>
<behavior-editor-dialog :behaviors="behaviors" @change="v => handleBehaviorsChange(v)" ref="behaviorEditorDialog"></behavior-editor-dialog>
</div>
</template>
<script>
import { mapGetters } from 'vuex';
import _ from 'lodash';
import BehaviorEditorDialog from '../dialogs/BehaviorEditorDialog';
import events from "@/global-events.js"
export default {
name: 'BehaviorTab',
data() {
let eventsObj = {};
const events = this.$t('events');
Object.keys(events).forEach(event => {
eventsObj[event] = {
once: false,
behaviors: []
};
});
return {
events,
eventsObj,
behaviors: [],
currentEvent: ''
};
},
components: { BehaviorEditorDialog },
computed: {
...mapGetters(['activeComponent', 'componentList'])
},
methods: {
showBehaviorEditor(evn, key) {
this.currentEvent = key;
this.behaviors = evn.behaviors || [];
this.$refs.behaviorEditorDialog.show(this.behaviors, this.activeComponent.name + '_' + key);
},
/**
* 当前选中组件发生变化时，更新eventsObj的数据
*/
updateEventsObj() {
let _events = this.activeComponent.events || {};
_.forIn(this.eventsObj, (value, key) => {
if (_events[key]) {
this.$set(this.eventsObj, key, _.cloneDeep(_events[key]));
} else {
value.once = false;
value.behaviors = [];
}
});
},
/**
* 是否只执行一次
*/
handleOnceChange(key, v) {
let _event = this.eventsObj[key];
// 如果没有behavior，once没有用处，则不执行
if (_event.behaviors && _event.behaviors.length) {
let event = {};
event[key] = {
once: v,
behaviors: _event.behaviors
};
let events = this.activeComponent.events;
this.$store.dispatch('modifyActiveView', {
events: _.merge({}, events, event)
});
}
},
/**
* 行为发生变化，同步数据
*/
handleBehaviorsChange(v,isPreview) {
if (this.currentEvent /* && v && v.length*/) {
let event = {};
let currentEvent = this.eventsObj[this.currentEvent];
event[this.currentEvent] = Object.assign(currentEvent /*, { behaviors: v }*/);
let events = this.activeComponent.events;
this.$store.dispatch('modifyActiveView', {
events: _.merge({}, events, event)
});
this.updateEventsObj();
}
if(isPreview){
events.$emit('saveAndPreview')
}
},
/**
* 删除行为
*/
deleteBehavior(key) {
let _events = this.activeComponent.events || {};
delete _events[key];
this.$store.dispatch('modifyActiveView', {
events: _events
});
this.updateEventsObj();
}
},
watch: {
'activeComponent.uuid': function() {
this.updateEventsObj();
console.log('activeComponent.uuid change');
}
}
};
</script>
<style scoped>
</style>
\ No newline at end of file
.history/src/views/Editor/Inspector/BehaviorTab_20191203200122.vue 0 → 100644
View file @ 6985084a
<template>
<div class="zero-inspector-behavior-form" v-if="activeComponent.uuid">
<el-scrollbar class="scrollbar" wrap-class="wrap-x-hidden">
<el-form ref="form" size="mini" label-width="60px">
<div v-for="(evn, key) in eventsObj" :key="key">
<el-form-item :label="$t('Event') + ':'">
<div>{{events[key]}}</div>
<div >
<!--<el-tooltip :content="$t('Trigger once')" placement="top">
<el-switch v-model="evn.once" @change="v => handleOnceChange(key, v)"></el-switch>
</el-tooltip>-->
<el-button size="mini" @click="showBehaviorEditor(evn, key)" style="margin-left: 20px;" icon="el-icon-edit">
<!--<i v-if="evn.behaviors && evn.behaviors.length" class="el-icon-check el-icon&#45;&#45;right"></i>-->
</el-button>
<el-button icon="el-icon-delete" size="mini" v-if="evn.behaviors && evn.behaviors.length" @click="deleteBehavior(key)">
</el-button>
</div>
</el-form-item>
</div>
</el-form>
</el-scrollbar>
<behavior-editor-dialog :behaviors="behaviors" @change="v => handleBehaviorsChange(v)" ref="behaviorEditorDialog"></behavior-editor-dialog>
</div>
</template>
<script>
import { mapGetters } from 'vuex';
import _ from 'lodash';
import BehaviorEditorDialog from '../dialogs/BehaviorEditorDialog';
import events from "@/global-events.js"
export default {
name: 'BehaviorTab',
data() {
let eventsObj = {};
const events = this.$t('events');
Object.keys(events).forEach(event => {
eventsObj[event] = {
once: false,
behaviors: []
};
});
return {
events,
eventsObj,
behaviors: [],
currentEvent: ''
};
},
components: { BehaviorEditorDialog },
computed: {
...mapGetters(['activeComponent', 'componentList'])
},
methods: {
showBehaviorEditor(evn, key) {
this.currentEvent = key;
this.behaviors = evn.behaviors || [];
this.$refs.behaviorEditorDialog.show(this.behaviors, this.activeComponent.name + '_' + key);
},
/**
* 当前选中组件发生变化时，更新eventsObj的数据
*/
updateEventsObj() {
let _events = this.activeComponent.events || {};
_.forIn(this.eventsObj, (value, key) => {
if (_events[key]) {
this.$set(this.eventsObj, key, _.cloneDeep(_events[key]));
} else {
value.once = false;
value.behaviors = [];
}
});
},
/**
* 是否只执行一次
*/
handleOnceChange(key, v) {
let _event = this.eventsObj[key];
// 如果没有behavior，once没有用处，则不执行
if (_event.behaviors && _event.behaviors.length) {
let event = {};
event[key] = {
once: v,
behaviors: _event.behaviors
};
let events = this.activeComponent.events;
this.$store.dispatch('modifyActiveView', {
events: _.merge({}, events, event)
});
}
},
/**
* 行为发生变化，同步数据
*/
handleBehaviorsChange(v) {
if (this.currentEvent /* && v && v.length*/) {
let event = {};
let currentEvent = this.eventsObj[this.currentEvent];
event[this.currentEvent] = Object.assign(currentEvent /*, { behaviors: v }*/);
let events = this.activeComponent.events;
this.$store.dispatch('modifyActiveView', {
events: _.merge({}, events, event)
});
this.updateEventsObj();
}
if(isPreview){
events.$emit('saveAndPreview')
}
},
/**
* 删除行为
*/
deleteBehavior(key) {
let _events = this.activeComponent.events || {};
delete _events[key];
this.$store.dispatch('modifyActiveView', {
events: _events
});
this.updateEventsObj();
}
},
watch: {
'activeComponent.uuid': function() {
this.updateEventsObj();
console.log('activeComponent.uuid change');
}
}
};
</script>
<style scoped>
</style>
\ No newline at end of file
.history/src/views/Editor/Inspector/BehaviorTab_20191203200140.vue 0 → 100644
View file @ 6985084a
<template>
<div class="zero-inspector-behavior-form" v-if="activeComponent.uuid">
<el-scrollbar class="scrollbar" wrap-class="wrap-x-hidden">
<el-form ref="form" size="mini" label-width="60px">
<div v-for="(evn, key) in eventsObj" :key="key">
<el-form-item :label="$t('Event') + ':'">
<div>{{events[key]}}</div>
<div >
<!--<el-tooltip :content="$t('Trigger once')" placement="top">
<el-switch v-model="evn.once" @change="v => handleOnceChange(key, v)"></el-switch>
</el-tooltip>-->
<el-button size="mini" @click="showBehaviorEditor(evn, key)" style="margin-left: 20px;" icon="el-icon-edit">
<!--<i v-if="evn.behaviors && evn.behaviors.length" class="el-icon-check el-icon&#45;&#45;right"></i>-->
</el-button>
<el-button icon="el-icon-delete" size="mini" v-if="evn.behaviors && evn.behaviors.length" @click="deleteBehavior(key)">
</el-button>
</div>
</el-form-item>
</div>
</el-form>
</el-scrollbar>
<behavior-editor-dialog :behaviors="behaviors" @change="isPreview => handleBehaviorsChange(isPreview)" ref="behaviorEditorDialog"></behavior-editor-dialog>
</div>
</template>
<script>
import { mapGetters } from 'vuex';
import _ from 'lodash';
import BehaviorEditorDialog from '../dialogs/BehaviorEditorDialog';
import events from "@/global-events.js"
export default {
name: 'BehaviorTab',
data() {
let eventsObj = {};
const events = this.$t('events');
Object.keys(events).forEach(event => {
eventsObj[event] = {
once: false,
behaviors: []
};
});
return {
events,
eventsObj,
behaviors: [],
currentEvent: ''
};
},
components: { BehaviorEditorDialog },
computed: {
...mapGetters(['activeComponent', 'componentList'])
},
methods: {
showBehaviorEditor(evn, key) {
this.currentEvent = key;
this.behaviors = evn.behaviors || [];
this.$refs.behaviorEditorDialog.show(this.behaviors, this.activeComponent.name + '_' + key);
},
/**
* 当前选中组件发生变化时，更新eventsObj的数据
*/
updateEventsObj() {
let _events = this.activeComponent.events || {};
_.forIn(this.eventsObj, (value, key) => {
if (_events[key]) {
this.$set(this.eventsObj, key, _.cloneDeep(_events[key]));
} else {
value.once = false;
value.behaviors = [];
}
});
},
/**
* 是否只执行一次
*/
handleOnceChange(key, v) {
let _event = this.eventsObj[key];
// 如果没有behavior，once没有用处，则不执行
if (_event.behaviors && _event.behaviors.length) {
let event = {};
event[key] = {
once: v,
behaviors: _event.behaviors
};
let events = this.activeComponent.events;
this.$store.dispatch('modifyActiveView', {
events: _.merge({}, events, event)
});
}
},
/**
* 行为发生变化，同步数据
*/
handleBehaviorsChange(isPreview) {
if (this.currentEvent /* && v && v.length*/) {
let event = {};
let currentEvent = this.eventsObj[this.currentEvent];
event[this.currentEvent] = Object.assign(currentEvent /*, { behaviors: v }*/);
let events = this.activeComponent.events;
this.$store.dispatch('modifyActiveView', {
events: _.merge({}, events, event)
});
this.updateEventsObj();
}
if(isPreview){
events.$emit('saveAndPreview')
}
},
/**
* 删除行为
*/
deleteBehavior(key) {
let _events = this.activeComponent.events || {};
delete _events[key];
this.$store.dispatch('modifyActiveView', {
events: _events
});
this.updateEventsObj();
}
},
watch: {
'activeComponent.uuid': function() {
this.updateEventsObj();
console.log('activeComponent.uuid change');
}
}
};
</script>
<style scoped>
</style>
\ No newline at end of file
.history/src/views/Editor/Inspector/PropsTab_20191128104254.vue 0 → 100644
View file @ 6985084a
<template>
<div class="zero-inspector-props-form" v-if="activeComponent.uuid">
<el-scrollbar class="scrollbar" wrap-class="wrap-x-hidden">
<el-form ref="form" size="mini" :model="form" label-width="80px" @submit.native.prevent>
<el-collapse v-model="configColl">
<el-collapse-item title="配置" name="properties">
<div class="zero-inspector-props-group">
<el-form-item label="名称">
<el-input v-model="form.name" @input="v => handleChange('name', v)"></el-input>
</el-form-item>
<el-form-item label="类型">
<el-select v-model="form.type" @change="v => handleChange('type', v)" placeholder="请选择类型">
<el-option v-for="cmp in componentsMap" :key="cmp.value" :label="cmp.label" :value="cmp.value"></el-option>
</el-select>
</el-form-item>
<template v-for="(p, key) in cmpProps">
<el-form-item v-if="key !== 'groupName'" :id="activeComponent.uuid + '-' + key" :key="activeComponent.uuid + key" :label="p.title">
<!-- {{key}} -->
<el-tooltip :disabled="!p.desc" placement="top-start">
<div slot="content">{{p.desc}}</div>
<div>
<dynamic-component :component-value="getPropValue(p, key)" :component-props="getPropProps(p)" :component-type="getPropCmpType(p)" @onChange="v => handlePropertiesChange(key, v)"></dynamic-component>
</div>
</el-tooltip>
</el-form-item>
</template>
</div>
</el-collapse-item>
<el-collapse-item title="脚本" name="scripts">
<el-collapse accordion v-if="activeComponent.scripts && activeComponent.scripts.length">
<template v-for="(script, index) in activeComponent.scripts">
<el-collapse-item :title="getScriptName(script.script)" :key="script + index">
<template v-for="(p, key) in getScriptOptions(script.script)">
<el-form-item :key="activeComponent.uuid + index + key" :label="p.alias|| key">
<dynamic-component :component-value="getScriptValue(p, key, index)" :component-props="getScriptProps(p, index)" :component-type="getScriptType(p, index)" @onChange="v => handleScriptChange(index, key, v)"></dynamic-component>
</el-form-item>
</template>
<el-form-item label="">
<el-button @click="deleteNodeScript(index)">删除</el-button>
</el-form-item>
</el-collapse-item>
</template>
</el-collapse>
<div style="padding-top: 15px;text-align: center;">
<el-popover
placement="top"
width="300"
v-model="scriptDialog"
trigger="manual">
<div class="script-config-dialog">
<el-tree :data="scripts" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
</div>
<el-button slot="reference" @click="scriptDialog = !scriptDialog" size="mini">add script</el-button>
</el-popover>
</div>
</el-collapse-item>
</el-collapse>
</el-form>
</el-scrollbar>
</div>
</template>
<script>
import { mapGetters } from 'vuex';
import _ from 'lodash';
import { componentsMap, getCmpProps } from '../../../utils/common';
import dynamicComponent from '../components/dynamicComponent';
const componentMapper = {
switch: {
component: 'el-switch',
props: {
width: 100
}
},
select: {
component: 'el-select',
props: {
slotComponent: 'el-option'
}
},
swSelect: {
component: 'sw-select' // 无需传入options
},
source: {
component: 'sw-source'
},
slider: {
component: 'sw-slider'
},
inputNumber: {
component: 'el-input-number',
props: {
size: 'mini',
'controls-position': 'right'
}
},
input: {
component: 'el-input'
},
colorPicker: {
component: 'el-color-picker',
props: {
'show-alpha': true
}
}
};
const scriptTypeMap = {
number: {
component: 'el-input-number',
props: {
size: 'mini'
}
},
string: {
component: 'el-input'
},
boolean: {
component: 'el-switch',
props: {
width: 40
}
},
color: {
component: 'el-color-picker',
props: {
'show-alpha': true
}
},
select: {
component: 'el-select',
props: {
slotComponent: 'el-option'
}
}
};
export default {
name: 'PropsTab',
components: { 'dynamic-component': dynamicComponent },
data() {
return {
componentsMap,
scriptDialog: false,
form: {
name: '',
type: '',
properties: {},
scripts: []
},
defaultProps: {
children: 'children',
label: 'name'
},
configColl: ['properties']
};
},
computed: {
...mapGetters(['activeComponent', 'activeComponentCopy', 'componentList']),
cmpProps: function() {
// 获取properties.js中的默认配置
return getCmpProps(this.activeComponent.type);
},
scripts: function() {
console.log('scripts', this.$store.state.env.scripts);
return _.filter(this.$store.state.env.scripts, s => {
return s !== null && s !== undefined;
});
}
},
watch: {
activeComponent: {
deep: true,
handler: function(val) {
this.form.name = val.name || '';
this.form.type = val.type || '';
this.form.properties = val.properties || {};
}
}
},
methods: {
handleChange(label, v) {
let _view = {};
_view[label] = v;
this.$store.dispatch('modifyActiveView', _view);
},
/**
* 脚本预设对象选中
*/
handleNodeClick(script) {
console.log('handleNodeClick', script);
this.$store.dispatch('addNodeScript', script.id);
this.scriptDialog = false;
},
/**
* 基础属性发生改变
*/
handlePropertiesChange(key, v) {
console.log('handlePropertiesChange', key, v);
let _prop = {};
_prop[key] = v;
this.$store.dispatch('modifyProperties', _prop);
},
/**
* 事件属性发生改变
*/
handleScriptChange(index, key, v) {
let _props = {};
_props[key] = v;
let _scripts = _.cloneDeep(this.activeComponent.scripts);
let _script = _scripts[index];
_script.props = _.assign(_script.props, _props);
_scripts[index] = _script;
this.$store.dispatch('modifyActiveView', {
scripts: _scripts
});
},
/**
* 获取动态组件的类型
*/
getPropCmpType(item) {
return componentMapper[item.type].component;
},
/**
* 获取动态组件的属性v-bind
*/
getPropProps(item) {
let _cmp = componentMapper[item.type];
return {
size: 'mini',
...(_cmp.props || {}),
...item.props,
options: item.options || {}
};
},
/**
* 获取当前选中节点对应的属性的值
*/
getPropValue(item, key) {
let _properties = this.activeComponentCopy.properties;
return _properties[key] === undefined || _properties[key] === null ? item.value : _properties[key];
},
getScriptValue(item, key, index) {
let _script = this.activeComponent.scripts[index];
// let result =
return _script.props[key] || item.default;
},
getScriptProps(item, index) {
let _type = item.type;
let _options = [];
if (_type === 'enum') {
// 如果脚本选项对应的类型是数组，说明是枚举类型
_options = item.enum.map(i => {
return {
label: i,
value: i
};
});
_type = 'select';
}
let _cmp = scriptTypeMap[_type];
return {
size: 'mini',
...(_cmp.props || {}),
options: _options
};
},
getScriptType(item, index) {
// 如果脚本选项对应的类型是数组，说明是枚举类型
let _type = item.type;
if (_type === 'enum') {
_type = 'select';
}
return scriptTypeMap[_type].component;
},
getScriptName(id) {
let _script = this.scripts.find(script => script.id === id);
return _script ? _script.name : '';
},
getScriptOptions(id) {
let _script = this.scripts.find(script => script.id === id);
return _script ? _script.props : {};
},
/**
* 删除节点脚本
*/
deleteNodeScript(index) {
let _scripts = _.cloneDeep(this.activeComponent.scripts);
_.remove(_scripts, (s, sindex) => {
return sindex === index;
});
this.$store.dispatch('modifyActiveView', {
scripts: _scripts
});
}
}
};
</script>
<style lang="scss">
.zero-inspector-props-form {
width: 100%;
padding-right: 10px;
.el-form-item--mini.el-form-item {
margin-bottom: 10px;
}
.el-divider__text {
background-color: #e9e9e9;
}
.zero-inspector-props-group {
width: 100%;
max-height: 600px;
overflow-x: hidden;
overflow-y: auto;
}
}
.script-config-dialog {
height: 350px;
}
</style>
\ No newline at end of file
.history/src/views/Editor/Inspector/PropsTab_20191203194908.vue 0 → 100644
View file @ 6985084a
<template>
<div class="zero-inspector-props-form" v-if="activeComponent.uuid">
<el-scrollbar class="scrollbar" wrap-class="wrap-x-hidden">
<el-form ref="form" size="mini" :model="form" label-width="80px" @submit.native.prevent>
<el-collapse v-model="configColl">
<el-collapse-item title="配置" name="properties">
<div class="zero-inspector-props-group">
<el-form-item label="名称">
<el-input v-model="form.name" @input="v => handleChange('name', v)"></el-input>
</el-form-item>
<el-form-item label="类型">
<el-select v-model="form.type" @change="v => handleChange('type', v)" placeholder="请选择类型">
<el-option v-for="cmp in componentsMap" :key="cmp.value" :label="cmp.label" :value="cmp.value"></el-option>
</el-select>
</el-form-item>
<template v-for="(p, key) in cmpProps">
<el-form-item v-if="key !== 'groupName'" :id="activeComponent.uuid + '-' + key" :key="activeComponent.uuid + key" :label="p.title">
<!-- {{key}} -->
<el-tooltip :disabled="!p.desc" placement="top-start">
<div slot="content">{{p.desc}}</div>
<div>
<dynamic-component :component-value="getPropValue(p, key)" :component-props="getPropProps(p)" :component-type="getPropCmpType(p)" @onChange="v => handlePropertiesChange(key, v)"></dynamic-component>
</div>
</el-tooltip>
</el-form-item>
</template>
</div>
</el-collapse-item>
<el-collapse-item title="脚本" name="scripts">
<el-collapse accordion v-if="activeComponent.scripts && activeComponent.scripts.length">
<template v-for="(script, index) in activeComponent.scripts">
<el-collapse-item :title="getScriptName(script.script)" :key="script + index">
<template v-for="(p, key) in getScriptOptions(script.script)">
<el-form-item :key="activeComponent.uuid + index + key" :label="p.alias|| key">
<dynamic-component :component-value="getScriptValue(p, key, index)" :component-props="getScriptProps(p, index)" :component-type="getScriptType(p, index)" @onChange="v => handleScriptChange(index, key, v)"></dynamic-component>
</el-form-item>
</template>
<el-form-item label="">
<el-button @click="deleteNodeScript(index)">删除</el-button>
</el-form-item>
</el-collapse-item>
</template>
</el-collapse>
<div style="padding-top: 15px;text-align: center;">
<el-popover
placement="top"
width="300"
v-model="scriptDialog"
trigger="manual">
<div class="script-config-dialog">
<el-tree :data="scripts" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
</div>
<el-button slot="reference" @click="scriptDialog = !scriptDialog" size="mini">add script</el-button>
</el-popover>
</div>
</el-collapse-item>
</el-collapse>
</el-form>
</el-scrollbar>
</div>
</template>
<script>
import { mapGetters } from 'vuex';
import _ from 'lodash';
import { componentsMap, getCmpProps } from '../../../utils/common';
import dynamicComponent from '../components/dynamicComponent';
const componentMapper = {
switch: {
component: 'el-switch',
props: {
width: 100
}
},
select: {
component: 'el-select',
props: {
slotComponent: 'el-option'
}
},
swSelect: {
component: 'sw-select' // 无需传入options
},
source: {
component: 'sw-source'
},
slider: {
component: 'sw-slider'
},
inputNumber: {
component: 'el-input-number',
props: {
size: 'mini',
'controls-position': 'right'
}
},
input: {
component: 'el-input'
},
colorPicker: {
component: 'el-color-picker',
props: {
'show-alpha': true
}
}
};
const scriptTypeMap = {
number: {
component: 'el-input-number',
props: {
size: 'mini'
}
},
string: {
component: 'el-input'
},
boolean: {
component: 'el-switch',
props: {
width: 40
}
},
color: {
component: 'el-color-picker',
props: {
'show-alpha': true
}
},
select: {
component: 'el-select',
props: {
slotComponent: 'el-option'
}
}
};
export default {
name: 'PropsTab',
components: { 'dynamic-component': dynamicComponent },
data() {
return {
componentsMap,
scriptDialog: false,
form: {
name: '',
type: '',
properties: {},
scripts: []
},
defaultProps: {
children: 'children',
label: 'name'
},
configColl: ['properties']
};
},
computed: {
...mapGetters(['activeComponent', 'activeComponentCopy', 'componentList']),
cmpProps: function() {
// 获取properties.js中的默认配置
return getCmpProps(this.activeComponent.type);
},
scripts: function() {
console.log('scripts', this.$store.state.env.scripts);
return _.filter(this.$store.state.env.scripts, s => {
return s !== null && s !== undefined;
});
}
},
watch: {
activeComponent: {
deep: true,
handler: function(val) {
this.form.name = val.name || '';
this.form.type = val.type || '';
this.form.properties = val.properties || {};
}
}
},
methods: {
handleChange(label, v) {
let _view = {};
_view[label] = v;
this.$store.dispatch('modifyActiveView', _view);
if(isPreview){
events.$emit('saveAndPreview')
}
},
/**
* 脚本预设对象选中
*/
handleNodeClick(script) {
console.log('handleNodeClick', script);
this.$store.dispatch('addNodeScript', script.id);
this.scriptDialog = false;
},
/**
* 基础属性发生改变
*/
handlePropertiesChange(key, v) {
console.log('handlePropertiesChange', key, v);
let _prop = {};
_prop[key] = v;
this.$store.dispatch('modifyProperties', _prop);
},
/**
* 事件属性发生改变
*/
handleScriptChange(index, key, v) {
let _props = {};
_props[key] = v;
let _scripts = _.cloneDeep(this.activeComponent.scripts);
let _script = _scripts[index];
_script.props = _.assign(_script.props, _props);
_scripts[index] = _script;
this.$store.dispatch('modifyActiveView', {
scripts: _scripts
});
},
/**
* 获取动态组件的类型
*/
getPropCmpType(item) {
return componentMapper[item.type].component;
},
/**
* 获取动态组件的属性v-bind
*/
getPropProps(item) {
let _cmp = componentMapper[item.type];
return {
size: 'mini',
...(_cmp.props || {}),
...item.props,
options: item.options || {}
};
},
/**
* 获取当前选中节点对应的属性的值
*/
getPropValue(item, key) {
let _properties = this.activeComponentCopy.properties;
return _properties[key] === undefined || _properties[key] === null ? item.value : _properties[key];
},
getScriptValue(item, key, index) {
let _script = this.activeComponent.scripts[index];
// let result =
return _script.props[key] || item.default;
},
getScriptProps(item, index) {
let _type = item.type;
let _options = [];
if (_type === 'enum') {
// 如果脚本选项对应的类型是数组，说明是枚举类型
_options = item.enum.map(i => {
return {
label: i,
value: i
};
});
_type = 'select';
}
let _cmp = scriptTypeMap[_type];
return {
size: 'mini',
...(_cmp.props || {}),
options: _options
};
},
getScriptType(item, index) {
// 如果脚本选项对应的类型是数组，说明是枚举类型
let _type = item.type;
if (_type === 'enum') {
_type = 'select';
}
return scriptTypeMap[_type].component;
},
getScriptName(id) {
let _script = this.scripts.find(script => script.id === id);
return _script ? _script.name : '';
},
getScriptOptions(id) {
let _script = this.scripts.find(script => script.id === id);
return _script ? _script.props : {};
},
/**
* 删除节点脚本
*/
deleteNodeScript(index) {
let _scripts = _.cloneDeep(this.activeComponent.scripts);
_.remove(_scripts, (s, sindex) => {
return sindex === index;
});
this.$store.dispatch('modifyActiveView', {
scripts: _scripts
});
}
}
};
</script>
<style lang="scss">
.zero-inspector-props-form {
width: 100%;
padding-right: 10px;
.el-form-item--mini.el-form-item {
margin-bottom: 10px;
}
.el-divider__text {
background-color: #e9e9e9;
}
.zero-inspector-props-group {
width: 100%;
max-height: 600px;
overflow-x: hidden;
overflow-y: auto;
}
}
.script-config-dialog {
height: 350px;
}
</style>
\ No newline at end of file
.history/src/views/Editor/Inspector/PropsTab_20191203195000.vue 0 → 100644
View file @ 6985084a
<template>
<div class="zero-inspector-props-form" v-if="activeComponent.uuid">
<el-scrollbar class="scrollbar" wrap-class="wrap-x-hidden">
<el-form ref="form" size="mini" :model="form" label-width="80px" @submit.native.prevent>
<el-collapse v-model="configColl">
<el-collapse-item title="配置" name="properties">
<div class="zero-inspector-props-group">
<el-form-item label="名称">
<el-input v-model="form.name" @input="v => handleChange('name', v)"></el-input>
</el-form-item>
<el-form-item label="类型">
<el-select v-model="form.type" @change="v => handleChange('type', v)" placeholder="请选择类型">
<el-option v-for="cmp in componentsMap" :key="cmp.value" :label="cmp.label" :value="cmp.value"></el-option>
</el-select>
</el-form-item>
<template v-for="(p, key) in cmpProps">
<el-form-item v-if="key !== 'groupName'" :id="activeComponent.uuid + '-' + key" :key="activeComponent.uuid + key" :label="p.title">
<!-- {{key}} -->
<el-tooltip :disabled="!p.desc" placement="top-start">
<div slot="content">{{p.desc}}</div>
<div>
<dynamic-component :component-value="getPropValue(p, key)" :component-props="getPropProps(p)" :component-type="getPropCmpType(p)" @onChange="v => handlePropertiesChange(key, v)"></dynamic-component>
</div>
</el-tooltip>
</el-form-item>
</template>
</div>
</el-collapse-item>
<el-collapse-item title="脚本" name="scripts">
<el-collapse accordion v-if="activeComponent.scripts && activeComponent.scripts.length">
<template v-for="(script, index) in activeComponent.scripts">
<el-collapse-item :title="getScriptName(script.script)" :key="script + index">
<template v-for="(p, key) in getScriptOptions(script.script)">
<el-form-item :key="activeComponent.uuid + index + key" :label="p.alias|| key">
<dynamic-component :component-value="getScriptValue(p, key, index)" :component-props="getScriptProps(p, index)" :component-type="getScriptType(p, index)" @onChange="v => handleScriptChange(index, key, v)"></dynamic-component>
</el-form-item>
</template>
<el-form-item label="">
<el-button @click="deleteNodeScript(index)">删除</el-button>
</el-form-item>
</el-collapse-item>
</template>
</el-collapse>
<div style="padding-top: 15px;text-align: center;">
<el-popover
placement="top"
width="300"
v-model="scriptDialog"
trigger="manual">
<div class="script-config-dialog">
<el-tree :data="scripts" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
</div>
<el-button slot="reference" @click="scriptDialog = !scriptDialog" size="mini">add script</el-button>
</el-popover>
</div>
</el-collapse-item>
</el-collapse>
</el-form>
</el-scrollbar>
</div>
</template>
<script>
import { mapGetters } from 'vuex';
import _ from 'lodash';
import { componentsMap, getCmpProps } from '../../../utils/common';
import dynamicComponent from '../components/dynamicComponent';
import events from "@/global-events.js"
const componentMapper = {
switch: {
component: 'el-switch',
props: {
width: 100
}
},
select: {
component: 'el-select',
props: {
slotComponent: 'el-option'
}
},
swSelect: {
component: 'sw-select' // 无需传入options
},
source: {
component: 'sw-source'
},
slider: {
component: 'sw-slider'
},
inputNumber: {
component: 'el-input-number',
props: {
size: 'mini',
'controls-position': 'right'
}
},
input: {
component: 'el-input'
},
colorPicker: {
component: 'el-color-picker',
props: {
'show-alpha': true
}
}
};
const scriptTypeMap = {
number: {
component: 'el-input-number',
props: {
size: 'mini'
}
},
string: {
component: 'el-input'
},
boolean: {
component: 'el-switch',
props: {
width: 40
}
},
color: {
component: 'el-color-picker',
props: {
'show-alpha': true
}
},
select: {
component: 'el-select',
props: {
slotComponent: 'el-option'
}
}
};
export default {
name: 'PropsTab',
components: { 'dynamic-component': dynamicComponent },
data() {
return {
componentsMap,
scriptDialog: false,
form: {
name: '',
type: '',
properties: {},
scripts: []
},
defaultProps: {
children: 'children',
label: 'name'
},
configColl: ['properties']
};
},
computed: {
...mapGetters(['activeComponent', 'activeComponentCopy', 'componentList']),
cmpProps: function() {
// 获取properties.js中的默认配置
return getCmpProps(this.activeComponent.type);
},
scripts: function() {
console.log('scripts', this.$store.state.env.scripts);
return _.filter(this.$store.state.env.scripts, s => {
return s !== null && s !== undefined;
});
}
},
watch: {
activeComponent: {
deep: true,
handler: function(val) {
this.form.name = val.name || '';
this.form.type = val.type || '';
this.form.properties = val.properties || {};
}
}
},
methods: {
handleChange(label, v) {
let _view = {};
_view[label] = v;
this.$store.dispatch('modifyActiveView', _view);
if(isPreview){
events.$emit('saveAndPreview')
}
},
/**
* 脚本预设对象选中
*/
handleNodeClick(script) {
console.log('handleNodeClick', script);
this.$store.dispatch('addNodeScript', script.id);
this.scriptDialog = false;
},
/**
* 基础属性发生改变
*/
handlePropertiesChange(key, v) {
console.log('handlePropertiesChange', key, v);
let _prop = {};
_prop[key] = v;
this.$store.dispatch('modifyProperties', _prop);
},
/**
* 事件属性发生改变
*/
handleScriptChange(index, key, v) {
let _props = {};
_props[key] = v;
let _scripts = _.cloneDeep(this.activeComponent.scripts);
let _script = _scripts[index];
_script.props = _.assign(_script.props, _props);
_scripts[index] = _script;
this.$store.dispatch('modifyActiveView', {
scripts: _scripts
});
},
/**
* 获取动态组件的类型
*/
getPropCmpType(item) {
return componentMapper[item.type].component;
},
/**
* 获取动态组件的属性v-bind
*/
getPropProps(item) {
let _cmp = componentMapper[item.type];
return {
size: 'mini',
...(_cmp.props || {}),
...item.props,
options: item.options || {}
};
},
/**
* 获取当前选中节点对应的属性的值
*/
getPropValue(item, key) {
let _properties = this.activeComponentCopy.properties;
return _properties[key] === undefined || _properties[key] === null ? item.value : _properties[key];
},
getScriptValue(item, key, index) {
let _script = this.activeComponent.scripts[index];
// let result =
return _script.props[key] || item.default;
},
getScriptProps(item, index) {
let _type = item.type;
let _options = [];
if (_type === 'enum') {
// 如果脚本选项对应的类型是数组，说明是枚举类型
_options = item.enum.map(i => {
return {
label: i,
value: i
};
});
_type = 'select';
}
let _cmp = scriptTypeMap[_type];
return {
size: 'mini',
...(_cmp.props || {}),
options: _options
};
},
getScriptType(item, index) {
// 如果脚本选项对应的类型是数组，说明是枚举类型
let _type = item.type;
if (_type === 'enum') {
_type = 'select';
}
return scriptTypeMap[_type].component;
},
getScriptName(id) {
let _script = this.scripts.find(script => script.id === id);
return _script ? _script.name : '';
},
getScriptOptions(id) {
let _script = this.scripts.find(script => script.id === id);
return _script ? _script.props : {};
},
/**
* 删除节点脚本
*/
deleteNodeScript(index) {
let _scripts = _.cloneDeep(this.activeComponent.scripts);
_.remove(_scripts, (s, sindex) => {
return sindex === index;
});
this.$store.dispatch('modifyActiveView', {
scripts: _scripts
});
}
}
};
</script>
<style lang="scss">
.zero-inspector-props-form {
width: 100%;
padding-right: 10px;
.el-form-item--mini.el-form-item {
margin-bottom: 10px;
}
.el-divider__text {
background-color: #e9e9e9;
}
.zero-inspector-props-group {
width: 100%;
max-height: 600px;
overflow-x: hidden;
overflow-y: auto;
}
}
.script-config-dialog {
height: 350px;
}
</style>
\ No newline at end of file
.history/src/views/Editor/Inspector/PropsTab_20191203195230.vue 0 → 100644
View file @ 6985084a
<template>
<div class="zero-inspector-props-form" v-if="activeComponent.uuid">
<el-scrollbar class="scrollbar" wrap-class="wrap-x-hidden">
<el-form ref="form" size="mini" :model="form" label-width="80px" @submit.native.prevent>
<el-collapse v-model="configColl">
<el-collapse-item title="配置" name="properties">
<div class="zero-inspector-props-group">
<el-form-item label="名称">
<el-input v-model="form.name" @input="v => handleChange('name', v)"></el-input>
</el-form-item>
<el-form-item label="类型">
<el-select v-model="form.type" @change="v => handleChange('type', v)" placeholder="请选择类型">
<el-option v-for="cmp in componentsMap" :key="cmp.value" :label="cmp.label" :value="cmp.value"></el-option>
</el-select>
</el-form-item>
<template v-for="(p, key) in cmpProps">
<el-form-item v-if="key !== 'groupName'" :id="activeComponent.uuid + '-' + key" :key="activeComponent.uuid + key" :label="p.title">
<!-- {{key}} -->
<el-tooltip :disabled="!p.desc" placement="top-start">
<div slot="content">{{p.desc}}</div>
<div>
<dynamic-component :component-value="getPropValue(p, key)" :component-props="getPropProps(p)" :component-type="getPropCmpType(p)" @onChange="v => handlePropertiesChange(key, v)"></dynamic-component>
</div>
</el-tooltip>
</el-form-item>
</template>
</div>
</el-collapse-item>
<el-collapse-item title="脚本" name="scripts">
<el-collapse accordion v-if="activeComponent.scripts && activeComponent.scripts.length">
<template v-for="(script, index) in activeComponent.scripts">
<el-collapse-item :title="getScriptName(script.script)" :key="script + index">
<template v-for="(p, key) in getScriptOptions(script.script)">
<el-form-item :key="activeComponent.uuid + index + key" :label="p.alias|| key">
<dynamic-component :component-value="getScriptValue(p, key, index)" :component-props="getScriptProps(p, index)" :component-type="getScriptType(p, index)" @onChange="v => handleScriptChange(index, key, v)"></dynamic-component>
</el-form-item>
</template>
<el-form-item label="">
<el-button @click="deleteNodeScript(index)">删除</el-button>
</el-form-item>
</el-collapse-item>
</template>
</el-collapse>
<div style="padding-top: 15px;text-align: center;">
<el-popover
placement="top"
width="300"
v-model="scriptDialog"
trigger="manual">
<div class="script-config-dialog">
<el-tree :data="scripts" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
</div>
<el-button slot="reference" @click="scriptDialog = !scriptDialog" size="mini">add script</el-button>
</el-popover>
</div>
</el-collapse-item>
</el-collapse>
</el-form>
</el-scrollbar>
</div>
</template>
<script>
import { mapGetters } from 'vuex';
import _ from 'lodash';
import { componentsMap, getCmpProps } from '../../../utils/common';
import dynamicComponent from '../components/dynamicComponent';
import events from "@/global-events.js"
const componentMapper = {
switch: {
component: 'el-switch',
props: {
width: 100
}
},
select: {
component: 'el-select',
props: {
slotComponent: 'el-option'
}
},
swSelect: {
component: 'sw-select' // 无需传入options
},
source: {
component: 'sw-source'
},
slider: {
component: 'sw-slider'
},
inputNumber: {
component: 'el-input-number',
props: {
size: 'mini',
'controls-position': 'right'
}
},
input: {
component: 'el-input'
},
colorPicker: {
component: 'el-color-picker',
props: {
'show-alpha': true
}
}
};
const scriptTypeMap = {
number: {
component: 'el-input-number',
props: {
size: 'mini'
}
},
string: {
component: 'el-input'
},
boolean: {
component: 'el-switch',
props: {
width: 40
}
},
color: {
component: 'el-color-picker',
props: {
'show-alpha': true
}
},
select: {
component: 'el-select',
props: {
slotComponent: 'el-option'
}
}
};
export default {
name: 'PropsTab',
components: { 'dynamic-component': dynamicComponent },
data() {
return {
componentsMap,
scriptDialog: false,
form: {
name: '',
type: '',
properties: {},
scripts: []
},
defaultProps: {
children: 'children',
label: 'name'
},
configColl: ['properties']
};
},
computed: {
...mapGetters(['activeComponent', 'activeComponentCopy', 'componentList']),
cmpProps: function() {
// 获取properties.js中的默认配置
return getCmpProps(this.activeComponent.type);
},
scripts: function() {
console.log('scripts', this.$store.state.env.scripts);
return _.filter(this.$store.state.env.scripts, s => {
return s !== null && s !== undefined;
});
}
},
watch: {
activeComponent: {
deep: true,
handler: function(val) {
this.form.name = val.name || '';
this.form.type = val.type || '';
this.form.properties = val.properties || {};
}
}
},
methods: {
handleChange(label, v,isPreview) {
let _view = {};
_view[label] = v;
this.$store.dispatch('modifyActiveView', _view);
if(isPreview){
events.$emit('saveAndPreview')
}
},
/**
* 脚本预设对象选中
*/
handleNodeClick(script) {
console.log('handleNodeClick', script);
this.$store.dispatch('addNodeScript', script.id);
this.scriptDialog = false;
},
/**
* 基础属性发生改变
*/
handlePropertiesChange(key, v) {
console.log('handlePropertiesChange', key, v);
let _prop = {};
_prop[key] = v;
this.$store.dispatch('modifyProperties', _prop);
},
/**
* 事件属性发生改变
*/
handleScriptChange(index, key, v) {
let _props = {};
_props[key] = v;
let _scripts = _.cloneDeep(this.activeComponent.scripts);
let _script = _scripts[index];
_script.props = _.assign(_script.props, _props);
_scripts[index] = _script;
this.$store.dispatch('modifyActiveView', {
scripts: _scripts
});
},
/**
* 获取动态组件的类型
*/
getPropCmpType(item) {
return componentMapper[item.type].component;
},
/**
* 获取动态组件的属性v-bind
*/
getPropProps(item) {
let _cmp = componentMapper[item.type];
return {
size: 'mini',
...(_cmp.props || {}),
...item.props,
options: item.options || {}
};
},
/**
* 获取当前选中节点对应的属性的值
*/
getPropValue(item, key) {
let _properties = this.activeComponentCopy.properties;
return _properties[key] === undefined || _properties[key] === null ? item.value : _properties[key];
},
getScriptValue(item, key, index) {
let _script = this.activeComponent.scripts[index];
// let result =
return _script.props[key] || item.default;
},
getScriptProps(item, index) {
let _type = item.type;
let _options = [];
if (_type === 'enum') {
// 如果脚本选项对应的类型是数组，说明是枚举类型
_options = item.enum.map(i => {
return {
label: i,
value: i
};
});
_type = 'select';
}
let _cmp = scriptTypeMap[_type];
return {
size: 'mini',
...(_cmp.props || {}),
options: _options
};
},
getScriptType(item, index) {
// 如果脚本选项对应的类型是数组，说明是枚举类型
let _type = item.type;
if (_type === 'enum') {
_type = 'select';
}
return scriptTypeMap[_type].component;
},
getScriptName(id) {
let _script = this.scripts.find(script => script.id === id);
return _script ? _script.name : '';
},
getScriptOptions(id) {
let _script = this.scripts.find(script => script.id === id);
return _script ? _script.props : {};
},
/**
* 删除节点脚本
*/
deleteNodeScript(index) {
let _scripts = _.cloneDeep(this.activeComponent.scripts);
_.remove(_scripts, (s, sindex) => {
return sindex === index;
});
this.$store.dispatch('modifyActiveView', {
scripts: _scripts
});
}
}
};
</script>
<style lang="scss">
.zero-inspector-props-form {
width: 100%;
padding-right: 10px;
.el-form-item--mini.el-form-item {
margin-bottom: 10px;
}
.el-divider__text {
background-color: #e9e9e9;
}
.zero-inspector-props-group {
width: 100%;
max-height: 600px;
overflow-x: hidden;
overflow-y: auto;
}
}
.script-config-dialog {
height: 350px;
}
</style>
\ No newline at end of file
.history/src/views/Editor/Inspector/PropsTab_20191203195235.vue 0 → 100644
View file @ 6985084a
<template>
<div class="zero-inspector-props-form" v-if="activeComponent.uuid">
<el-scrollbar class="scrollbar" wrap-class="wrap-x-hidden">
<el-form ref="form" size="mini" :model="form" label-width="80px" @submit.native.prevent>
<el-collapse v-model="configColl">
<el-collapse-item title="配置" name="properties">
<div class="zero-inspector-props-group">
<el-form-item label="名称">
<el-input v-model="form.name" @input="v => handleChange('name', v)"></el-input>
</el-form-item>
<el-form-item label="类型">
<el-select v-model="form.type" @change="v => handleChange('type', v)" placeholder="请选择类型">
<el-option v-for="cmp in componentsMap" :key="cmp.value" :label="cmp.label" :value="cmp.value"></el-option>
</el-select>
</el-form-item>
<template v-for="(p, key) in cmpProps">
<el-form-item v-if="key !== 'groupName'" :id="activeComponent.uuid + '-' + key" :key="activeComponent.uuid + key" :label="p.title">
<!-- {{key}} -->
<el-tooltip :disabled="!p.desc" placement="top-start">
<div slot="content">{{p.desc}}</div>
<div>
<dynamic-component :component-value="getPropValue(p, key)" :component-props="getPropProps(p)" :component-type="getPropCmpType(p)" @onChange="v => handlePropertiesChange(key, v)"></dynamic-component>
</div>
</el-tooltip>
</el-form-item>
</template>
</div>
</el-collapse-item>
<el-collapse-item title="脚本" name="scripts">
<el-collapse accordion v-if="activeComponent.scripts && activeComponent.scripts.length">
<template v-for="(script, index) in activeComponent.scripts">
<el-collapse-item :title="getScriptName(script.script)" :key="script + index">
<template v-for="(p, key) in getScriptOptions(script.script)">
<el-form-item :key="activeComponent.uuid + index + key" :label="p.alias|| key">
<dynamic-component :component-value="getScriptValue(p, key, index)" :component-props="getScriptProps(p, index)" :component-type="getScriptType(p, index)" @onChange="v => handleScriptChange(index, key, v)"></dynamic-component>
</el-form-item>
</template>
<el-form-item label="">
<el-button @click="deleteNodeScript(index)">删除</el-button>
</el-form-item>
</el-collapse-item>
</template>
</el-collapse>
<div style="padding-top: 15px;text-align: center;">
<el-popover
placement="top"
width="300"
v-model="scriptDialog"
trigger="manual">
<div class="script-config-dialog">
<el-tree :data="scripts" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
</div>
<el-button slot="reference" @click="scriptDialog = !scriptDialog" size="mini">add script</el-button>
</el-popover>
</div>
</el-collapse-item>
</el-collapse>
</el-form>
</el-scrollbar>
</div>
</template>
<script>
import { mapGetters } from 'vuex';
import _ from 'lodash';
import { componentsMap, getCmpProps } from '../../../utils/common';
import dynamicComponent from '../components/dynamicComponent';
const componentMapper = {
switch: {
component: 'el-switch',
props: {
width: 100
}
},
select: {
component: 'el-select',
props: {
slotComponent: 'el-option'
}
},
swSelect: {
component: 'sw-select' // 无需传入options
},
source: {
component: 'sw-source'
},
slider: {
component: 'sw-slider'
},
inputNumber: {
component: 'el-input-number',
props: {
size: 'mini',
'controls-position': 'right'
}
},
input: {
component: 'el-input'
},
colorPicker: {
component: 'el-color-picker',
props: {
'show-alpha': true
}
}
};
const scriptTypeMap = {
number: {
component: 'el-input-number',
props: {
size: 'mini'
}
},
string: {
component: 'el-input'
},
boolean: {
component: 'el-switch',
props: {
width: 40
}
},
color: {
component: 'el-color-picker',
props: {
'show-alpha': true
}
},
select: {
component: 'el-select',
props: {
slotComponent: 'el-option'
}
}
};
export default {
name: 'PropsTab',
components: { 'dynamic-component': dynamicComponent },
data() {
return {
componentsMap,
scriptDialog: false,
form: {
name: '',
type: '',
properties: {},
scripts: []
},
defaultProps: {
children: 'children',
label: 'name'
},
configColl: ['properties']
};
},
computed: {
...mapGetters(['activeComponent', 'activeComponentCopy', 'componentList']),
cmpProps: function() {
// 获取properties.js中的默认配置
return getCmpProps(this.activeComponent.type);
},
scripts: function() {
console.log('scripts', this.$store.state.env.scripts);
return _.filter(this.$store.state.env.scripts, s => {
return s !== null && s !== undefined;
});
}
},
watch: {
activeComponent: {
deep: true,
handler: function(val) {
this.form.name = val.name || '';
this.form.type = val.type || '';
this.form.properties = val.properties || {};
}
}
},
methods: {
handleChange(label, v) {
let _view = {};
_view[label] = v;
this.$store.dispatch('modifyActiveView', _view);
},
/**
* 脚本预设对象选中
*/
handleNodeClick(script) {
console.log('handleNodeClick', script);
this.$store.dispatch('addNodeScript', script.id);
this.scriptDialog = false;
},
/**
* 基础属性发生改变
*/
handlePropertiesChange(key, v) {
console.log('handlePropertiesChange', key, v);
let _prop = {};
_prop[key] = v;
this.$store.dispatch('modifyProperties', _prop);
},
/**
* 事件属性发生改变
*/
handleScriptChange(index, key, v) {
let _props = {};
_props[key] = v;
let _scripts = _.cloneDeep(this.activeComponent.scripts);
let _script = _scripts[index];
_script.props = _.assign(_script.props, _props);
_scripts[index] = _script;
this.$store.dispatch('modifyActiveView', {
scripts: _scripts
});
},
/**
* 获取动态组件的类型
*/
getPropCmpType(item) {
return componentMapper[item.type].component;
},
/**
* 获取动态组件的属性v-bind
*/
getPropProps(item) {
let _cmp = componentMapper[item.type];
return {
size: 'mini',
...(_cmp.props || {}),
...item.props,
options: item.options || {}
};
},
/**
* 获取当前选中节点对应的属性的值
*/
getPropValue(item, key) {
let _properties = this.activeComponentCopy.properties;
return _properties[key] === undefined || _properties[key] === null ? item.value : _properties[key];
},
getScriptValue(item, key, index) {
let _script = this.activeComponent.scripts[index];
// let result =
return _script.props[key] || item.default;
},
getScriptProps(item, index) {
let _type = item.type;
let _options = [];
if (_type === 'enum') {
// 如果脚本选项对应的类型是数组，说明是枚举类型
_options = item.enum.map(i => {
return {
label: i,
value: i
};
});
_type = 'select';
}
let _cmp = scriptTypeMap[_type];
return {
size: 'mini',
...(_cmp.props || {}),
options: _options
};
},
getScriptType(item, index) {
// 如果脚本选项对应的类型是数组，说明是枚举类型
let _type = item.type;
if (_type === 'enum') {
_type = 'select';
}
return scriptTypeMap[_type].component;
},
getScriptName(id) {
let _script = this.scripts.find(script => script.id === id);
return _script ? _script.name : '';
},
getScriptOptions(id) {
let _script = this.scripts.find(script => script.id === id);
return _script ? _script.props : {};
},
/**
* 删除节点脚本
*/
deleteNodeScript(index) {
let _scripts = _.cloneDeep(this.activeComponent.scripts);
_.remove(_scripts, (s, sindex) => {
return sindex === index;
});
this.$store.dispatch('modifyActiveView', {
scripts: _scripts
});
}
}
};
</script>
<style lang="scss">
.zero-inspector-props-form {
width: 100%;
padding-right: 10px;
.el-form-item--mini.el-form-item {
margin-bottom: 10px;
}
.el-divider__text {
background-color: #e9e9e9;
}
.zero-inspector-props-group {
width: 100%;
max-height: 600px;
overflow-x: hidden;
overflow-y: auto;
}
}
.script-config-dialog {
height: 350px;
}
</style>
\ No newline at end of file
.history/src/views/Editor/Inspector/ScriptsTab_20191128104254.vue 0 → 100644
View file @ 6985084a
<template>
<div class="zero-inspector-script-form" v-if="activeComponent.uuid">
<el-collapse v-model="configColl">
<el-collapse-item title="配置" name="properties">
<el-form ref="form" size="mini" :model="form" label-width="80px" @submit.native.prevent>
<el-form-item label="名称">
<el-input v-model="form.name" @input="v => handleChange('name', v)"></el-input>
</el-form-item>
<el-form-item label="类型">
<el-select v-model="form.type" @change="v => handleChange('type', v)" placeholder="请选择类型">
<el-option v-for="cmp in componentsMap" :key="cmp.value" :label="cmp.label" :value="cmp.value"></el-option>
</el-select>
</el-form-item>
<template v-for="(p, key) in cmpProps">
<el-form-item v-if="key !== 'groupName'" :id="activeComponent.uuid + '-' + key" :key="activeComponent.uuid + key" :label="p.title">
<!-- {{key}} -->
<dynamic-component :label="key" :item="p" :properties="activeComponent.properties"></dynamic-component>
</el-form-item>
</template>
</el-form>
</el-collapse-item>
<el-collapse-item title="脚本" name="scripts">
</el-collapse-item>
</el-collapse>
</div>
</template>
<script>
import { mapGetters } from 'vuex';
import { componentsMap, getCmpProps } from '../../../utils/common';
import dynamicComponent from '../components/dynamicComponent';
export default {
name: 'PropsTab',
components: { 'dynamic-component': dynamicComponent },
data() {
return {
componentsMap,
form: {
name: '',
type: '',
properties: {}
},
configColl: ['properties']
};
},
computed: {
...mapGetters(['activeComponent', 'componentList']),
cmpProps: function() {
return getCmpProps(this.activeComponent.type);
}
},
watch: {
activeComponent: {
deep: true,
handler: function(val) {
this.form.name = val.name || '';
this.form.type = val.type || '';
this.form.properties = val.properties || {};
}
}
},
methods: {
handleChange(label, v) {
this.$store.dispatch('modifyComponent', {
label: label,
value: v
});
}
}
};
</script>
<style lang="scss">
.zero-inspector-script-form {
width: 100%;
padding-right: 10px;
.el-form-item--mini.el-form-item {
margin-bottom: 10px;
}
.el-divider__text {
background-color: #e9e9e9;
}
}
</style>
\ No newline at end of file
.history/src/views/Editor/Inspector/ScriptsTab_20191203194938.vue 0 → 100644
View file @ 6985084a
<template>
<div class="zero-inspector-script-form" v-if="activeComponent.uuid">
<el-collapse v-model="configColl">
<el-collapse-item title="配置" name="properties">
<el-form ref="form" size="mini" :model="form" label-width="80px" @submit.native.prevent>
<el-form-item label="名称">
<el-input v-model="form.name" @input="v => handleChange('name', v)"></el-input>
</el-form-item>
<el-form-item label="类型">
<el-select v-model="form.type" @change="v => handleChange('type', v)" placeholder="请选择类型">
<el-option v-for="cmp in componentsMap" :key="cmp.value" :label="cmp.label" :value="cmp.value"></el-option>
</el-select>
</el-form-item>
<template v-for="(p, key) in cmpProps">
<el-form-item v-if="key !== 'groupName'" :id="activeComponent.uuid + '-' + key" :key="activeComponent.uuid + key" :label="p.title">
<!-- {{key}} -->
<dynamic-component :label="key" :item="p" :properties="activeComponent.properties"></dynamic-component>
</el-form-item>
</template>
</el-form>
</el-collapse-item>
<el-collapse-item title="脚本" name="scripts">
</el-collapse-item>
</el-collapse>
</div>
</template>
<script>
import { mapGetters } from 'vuex';
import { componentsMap, getCmpProps } from '../../../utils/common';
import dynamicComponent from '../components/dynamicComponent';
export default {
name: 'PropsTab',
components: { 'dynamic-component': dynamicComponent },
data() {
return {
componentsMap,
form: {
name: '',
type: '',
properties: {}
},
configColl: ['properties']
};
},
computed: {
...mapGetters(['activeComponent', 'componentList']),
cmpProps: function() {
return getCmpProps(this.activeComponent.type);
}
},
watch: {
activeComponent: {
deep: true,
handler: function(val) {
this.form.name = val.name || '';
this.form.type = val.type || '';
this.form.properties = val.properties || {};
}
}
},
methods: {
handleChange(label, v) {
this.$store.dispatch('modifyComponent', {
label: label,
value: v
});
if(isPreview){
events.$emit('saveAndPreview')
}
}
}
};
</script>
<style lang="scss">
.zero-inspector-script-form {
width: 100%;
padding-right: 10px;
.el-form-item--mini.el-form-item {
margin-bottom: 10px;
}
.el-divider__text {
background-color: #e9e9e9;
}
}
</style>
\ No newline at end of file
.history/src/views/Editor/Inspector/ScriptsTab_20191203195000.vue 0 → 100644
View file @ 6985084a
<template>
<div class="zero-inspector-script-form" v-if="activeComponent.uuid">
<el-collapse v-model="configColl">
<el-collapse-item title="配置" name="properties">
<el-form ref="form" size="mini" :model="form" label-width="80px" @submit.native.prevent>
<el-form-item label="名称">
<el-input v-model="form.name" @input="v => handleChange('name', v)"></el-input>
</el-form-item>
<el-form-item label="类型">
<el-select v-model="form.type" @change="v => handleChange('type', v)" placeholder="请选择类型">
<el-option v-for="cmp in componentsMap" :key="cmp.value" :label="cmp.label" :value="cmp.value"></el-option>
</el-select>
</el-form-item>
<template v-for="(p, key) in cmpProps">
<el-form-item v-if="key !== 'groupName'" :id="activeComponent.uuid + '-' + key" :key="activeComponent.uuid + key" :label="p.title">
<!-- {{key}} -->
<dynamic-component :label="key" :item="p" :properties="activeComponent.properties"></dynamic-component>
</el-form-item>
</template>
</el-form>
</el-collapse-item>
<el-collapse-item title="脚本" name="scripts">
</el-collapse-item>
</el-collapse>
</div>
</template>
<script>
import { mapGetters } from 'vuex';
import { componentsMap, getCmpProps } from '../../../utils/common';
import dynamicComponent from '../components/dynamicComponent';
import events from "@/global-events.js"
export default {
name: 'PropsTab',
components: { 'dynamic-component': dynamicComponent },
data() {
return {
componentsMap,
form: {
name: '',
type: '',
properties: {}
},
configColl: ['properties']
};
},
computed: {
...mapGetters(['activeComponent', 'componentList']),
cmpProps: function() {
return getCmpProps(this.activeComponent.type);
}
},
watch: {
activeComponent: {
deep: true,
handler: function(val) {
this.form.name = val.name || '';
this.form.type = val.type || '';
this.form.properties = val.properties || {};
}
}
},
methods: {
handleChange(label, v) {
this.$store.dispatch('modifyComponent', {
label: label,
value: v
});
if(isPreview){
events.$emit('saveAndPreview')
}
}
}
};
</script>
<style lang="scss">
.zero-inspector-script-form {
width: 100%;
padding-right: 10px;
.el-form-item--mini.el-form-item {
margin-bottom: 10px;
}
.el-divider__text {
background-color: #e9e9e9;
}
}
</style>
\ No newline at end of file
.history/src/views/Editor/Inspector/ScriptsTab_20191203195230.vue 0 → 100644
View file @ 6985084a
<template>
<div class="zero-inspector-script-form" v-if="activeComponent.uuid">
<el-collapse v-model="configColl">
<el-collapse-item title="配置" name="properties">
<el-form ref="form" size="mini" :model="form" label-width="80px" @submit.native.prevent>
<el-form-item label="名称">
<el-input v-model="form.name" @input="v => handleChange('name', v)"></el-input>
</el-form-item>
<el-form-item label="类型">
<el-select v-model="form.type" @change="v => handleChange('type', v)" placeholder="请选择类型">
<el-option v-for="cmp in componentsMap" :key="cmp.value" :label="cmp.label" :value="cmp.value"></el-option>
</el-select>
</el-form-item>
<template v-for="(p, key) in cmpProps">
<el-form-item v-if="key !== 'groupName'" :id="activeComponent.uuid + '-' + key" :key="activeComponent.uuid + key" :label="p.title">
<!-- {{key}} -->
<dynamic-component :label="key" :item="p" :properties="activeComponent.properties"></dynamic-component>
</el-form-item>
</template>
</el-form>
</el-collapse-item>
<el-collapse-item title="脚本" name="scripts">
</el-collapse-item>
</el-collapse>
</div>
</template>
<script>
import { mapGetters } from 'vuex';
import { componentsMap, getCmpProps } from '../../../utils/common';
import dynamicComponent from '../components/dynamicComponent';
export default {
name: 'PropsTab',
components: { 'dynamic-component': dynamicComponent },
data() {
return {
componentsMap,
form: {
name: '',
type: '',
properties: {}
},
configColl: ['properties']
};
},
computed: {
...mapGetters(['activeComponent', 'componentList']),
cmpProps: function() {
return getCmpProps(this.activeComponent.type);
}
},
watch: {
activeComponent: {
deep: true,
handler: function(val) {
this.form.name = val.name || '';
this.form.type = val.type || '';
this.form.properties = val.properties || {};
}
}
},
methods: {
handleChange(label, v) {
this.$store.dispatch('modifyComponent', {
label: label,
value: v
});
}
}
};
</script>
<style lang="scss">
.zero-inspector-script-form {
width: 100%;
padding-right: 10px;
.el-form-item--mini.el-form-item {
margin-bottom: 10px;
}
.el-divider__text {
background-color: #e9e9e9;
}
}
</style>
\ No newline at end of file
.history/src/views/Editor/behavior-editor/BehaviorEditor_20191203191633.vue 0 → 100644
View file @ 6985084a
<template>
<div class="behavior">
<split-panes>
<split-panes splitpanes-min="10" :splitpanes-size="10" horizontal>
<process-list @edit-meta="onEditMeta" @delete-meta="onDeleteMeta" :data="prefabProcessTree"
class="background full-size" splitpanes-min="20"
:splitpanes-size="30"/>
<process-list @edit-meta="onEditMeta" @delete-meta="onDeleteMeta" :data="normalProcessTree"
class="background full-size" splitpanes-min="20"
:splitpanes-size="70"/>
</split-panes>
<div class="center full-size background" splitpanes-min="20" :splitpanes-size="70">
<edit-path :processStack="processStack" @pop="onPop"/>
<div class="operate-bar">
<!--<el-button-group>
<el-button size="mini" icon="el-icon-zoom-out" @click="setScale(-0.1)"/>
<el-button size="mini" @click="setScale(0)">1:1</el-button>
<el-button size="mini" icon="el-icon-zoom-in" @click="setScale(0.1)"/>
</el-button-group>-->
</div>
<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"/>
</div>
</split-panes>
<meta-editor-dialog ref="metaEditorDialog" @input="onSaveMeta"/>
</div>
</template>
<script>
import {mapState, mapMutations, mapGetters, mapActions} from 'vuex'
import Board from "./Board";
import SplitPanes from 'splitpanes'
import ProcessList from "./ProcessList";
import PropertiesEditor from "./PropertiesEditor";
import EditPath from "./Board/EditPath";
import Process from "./Board/Process";
import MetaEditorDialog from "./MetaEditorDialog";
import events from "@/global-events.js"
export default {
name: "BehaviorEditor",
components: {MetaEditorDialog, PropertiesEditor, EditPath, ProcessList, Board, SplitPanes,},
props: [],
data() {
return {
metaInEditing: null,
}
},
computed: {
processContext() {
const {builtinsProcessMap, customProcessMap} = this.$store.getters;
return [
builtinsProcessMap,
customProcessMap,
]
},
normalProcessTree() {
const tree = this.builtinProcessTree;
const group = tree.find(item => item.name === 'custom');
group.children = this.$store.state.behavior.data.processes;
return tree;
},
...mapState({
behavior: state => state.behavior.currentBehavior,
processStack: state=>state.behavior.processStack,
}),
...mapGetters([
'prefabProcessTree',
'builtinProcessTree'
]),
},
methods: {
resolveProcess(id) {
for (let context of this.processContext) {
if (context[id]) {
return context[id];
}
}
},
edit() {
this.clearProcessStack();
let process = new Process(null, this.behavior, this.resolveProcess);
this.editProcess(process);
},
onSelectProcessNode(process) {
this.$refs.properties.edit(process);
},
editProcess(process) {
this.pushProcessStack(process);
this.$refs.board.edit(process, this.resolveProcess);
this.$refs.properties.edit();
},
onPop(index) {
this.popProcessStack(index + 1);
let process = this.processStack[this.processStack.length - 1];
this.$refs.board.edit(process, this.resolveProcess);
this.$refs.properties.edit();
},
onEditMeta(meta) {
this.metaInEditing = meta;
this.$refs.metaEditorDialog.edit(meta);
},
onDeleteMeta(meta) {
const inUse = this.$store.getters.metaInUse(meta.id);
if (inUse) {
this.$alert(this.$t('Meta is in use, can not delete'), this.$t('Alert'))
.catch((e) => {
});
} else {
this.$confirm(this.$t('Are you sure to delete this meta'), this.$t('Alert'), {
confirmButtonText: this.$t('Delete'),
cancelButtonText: this.$t('Cancel'),
type: 'warning'
}).then(() => {
this.deleteProcessMeta({meta});
}).catch((e) => {
});
}
},
onSaveMeta(meta) {
let oldMetaID = this.metaInEditing.id;
for (let key in meta) {
this.metaInEditing[key] = meta[key];
}
this.metaInEditing = null;
if (oldMetaID !== meta.id) {
this.updateProcesses({
targetMetaID: oldMetaID,
replaceMetaID: meta.id,
});
}
this.$refs.board.updateProcessNode(meta.id);
events.$emit('behaviorSave')
},
...mapMutations([
'updateProcesses',
'deleteProcessMeta',
'updatePropsEditable',
'clearProcessStack',
'pushProcessStack',
'popProcessStack',
'setScale',
]),
...mapGetters([
'metaInUse',
]),
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
.history/src/views/Editor/behavior-editor/BehaviorEditor_20191203192648.vue 0 → 100644
View file @ 6985084a
<template>
<div class="behavior">
<split-panes>
<split-panes splitpanes-min="10" :splitpanes-size="10" horizontal>
<process-list @edit-meta="onEditMeta" @delete-meta="onDeleteMeta" :data="prefabProcessTree"
class="background full-size" splitpanes-min="20"
:splitpanes-size="30"/>
<process-list @edit-meta="onEditMeta" @delete-meta="onDeleteMeta" :data="normalProcessTree"
class="background full-size" splitpanes-min="20"
:splitpanes-size="70"/>
</split-panes>
<div class="center full-size background" splitpanes-min="20" :splitpanes-size="70">
<edit-path :processStack="processStack" @pop="onPop"/>
<div class="operate-bar">
<!--<el-button-group>
<el-button size="mini" icon="el-icon-zoom-out" @click="setScale(-0.1)"/>
<el-button size="mini" @click="setScale(0)">1:1</el-button>
<el-button size="mini" icon="el-icon-zoom-in" @click="setScale(0.1)"/>
</el-button-group>-->
</div>
<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"/>
</div>
</split-panes>
<meta-editor-dialog ref="metaEditorDialog" @input="onSaveMeta"/>
</div>
</template>
<script>
import {mapState, mapMutations, mapGetters, mapActions} from 'vuex'
import Board from "./Board";
import SplitPanes from 'splitpanes'
import ProcessList from "./ProcessList";
import PropertiesEditor from "./PropertiesEditor";
import EditPath from "./Board/EditPath";
import Process from "./Board/Process";
import MetaEditorDialog from "./MetaEditorDialog";
import events from "@/global-events.js"
export default {
name: "BehaviorEditor",
components: {MetaEditorDialog, PropertiesEditor, EditPath, ProcessList, Board, SplitPanes,},
props: [],
data() {
return {
metaInEditing: null,
}
},
computed: {
processContext() {
const {builtinsProcessMap, customProcessMap} = this.$store.getters;
return [
builtinsProcessMap,
customProcessMap,
]
},
normalProcessTree() {
const tree = this.builtinProcessTree;
const group = tree.find(item => item.name === 'custom');
group.children = this.$store.state.behavior.data.processes;
return tree;
},
...mapState({
behavior: state => state.behavior.currentBehavior,
processStack: state=>state.behavior.processStack,
}),
...mapGetters([
'prefabProcessTree',
'builtinProcessTree'
]),
},
methods: {
resolveProcess(id) {
for (let context of this.processContext) {
if (context[id]) {
return context[id];
}
}
},
edit() {
this.clearProcessStack();
let process = new Process(null, this.behavior, this.resolveProcess);
this.editProcess(process);
},
onSelectProcessNode(process) {
this.$refs.properties.edit(process);
},
editProcess(process) {
this.pushProcessStack(process);
this.$refs.board.edit(process, this.resolveProcess);
this.$refs.properties.edit();
},
onPop(index) {
this.popProcessStack(index + 1);
let process = this.processStack[this.processStack.length - 1];
this.$refs.board.edit(process, this.resolveProcess);
this.$refs.properties.edit();
},
onEditMeta(meta) {
this.metaInEditing = meta;
this.$refs.metaEditorDialog.edit(meta);
},
onDeleteMeta(meta) {
const inUse = this.$store.getters.metaInUse(meta.id);
if (inUse) {
this.$alert(this.$t('Meta is in use, can not delete'), this.$t('Alert'))
.catch((e) => {
});
} else {
this.$confirm(this.$t('Are you sure to delete this meta'), this.$t('Alert'), {
confirmButtonText: this.$t('Delete'),
cancelButtonText: this.$t('Cancel'),
type: 'warning'
}).then(() => {
this.deleteProcessMeta({meta});
}).catch((e) => {
});
}
},
onSaveMeta(meta) {
let oldMetaID = this.metaInEditing.id;
for (let key in meta) {
this.metaInEditing[key] = meta[key];
}
this.metaInEditing = null;
if (oldMetaID !== meta.id) {
this.updateProcesses({
targetMetaID: oldMetaID,
replaceMetaID: meta.id,
});
}
this.$refs.board.updateProcessNode(meta.id);
//events.$emit('behaviorSave')
},
...mapMutations([
'updateProcesses',
'deleteProcessMeta',
'updatePropsEditable',
'clearProcessStack',
'pushProcessStack',
'popProcessStack',
'setScale',
]),
...mapGetters([
'metaInUse',
]),
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
.history/src/views/Editor/behavior-editor/BehaviorEditor_20191203192651.vue 0 → 100644
View file @ 6985084a
<template>
<div class="behavior">
<split-panes>
<split-panes splitpanes-min="10" :splitpanes-size="10" horizontal>
<process-list @edit-meta="onEditMeta" @delete-meta="onDeleteMeta" :data="prefabProcessTree"
class="background full-size" splitpanes-min="20"
:splitpanes-size="30"/>
<process-list @edit-meta="onEditMeta" @delete-meta="onDeleteMeta" :data="normalProcessTree"
class="background full-size" splitpanes-min="20"
:splitpanes-size="70"/>
</split-panes>
<div class="center full-size background" splitpanes-min="20" :splitpanes-size="70">
<edit-path :processStack="processStack" @pop="onPop"/>
<div class="operate-bar">
<!--<el-button-group>
<el-button size="mini" icon="el-icon-zoom-out" @click="setScale(-0.1)"/>
<el-button size="mini" @click="setScale(0)">1:1</el-button>
<el-button size="mini" icon="el-icon-zoom-in" @click="setScale(0.1)"/>
</el-button-group>-->
</div>
<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"/>
</div>
</split-panes>
<meta-editor-dialog ref="metaEditorDialog" @input="onSaveMeta"/>
</div>
</template>
<script>
import {mapState, mapMutations, mapGetters, mapActions} from 'vuex'
import Board from "./Board";
import SplitPanes from 'splitpanes'
import ProcessList from "./ProcessList";
import PropertiesEditor from "./PropertiesEditor";
import EditPath from "./Board/EditPath";
import Process from "./Board/Process";
import MetaEditorDialog from "./MetaEditorDialog";
import events from "@/global-events.js"
export default {
name: "BehaviorEditor",
components: {MetaEditorDialog, PropertiesEditor, EditPath, ProcessList, Board, SplitPanes,},
props: [],
data() {
return {
metaInEditing: null,
}
},
computed: {
processContext() {
const {builtinsProcessMap, customProcessMap} = this.$store.getters;
return [
builtinsProcessMap,
customProcessMap,
]
},
normalProcessTree() {
const tree = this.builtinProcessTree;
const group = tree.find(item => item.name === 'custom');
group.children = this.$store.state.behavior.data.processes;
return tree;
},
...mapState({
behavior: state => state.behavior.currentBehavior,
processStack: state=>state.behavior.processStack,
}),
...mapGetters([
'prefabProcessTree',
'builtinProcessTree'
]),
},
methods: {
resolveProcess(id) {
for (let context of this.processContext) {
if (context[id]) {
return context[id];
}
}
},
edit() {
this.clearProcessStack();
let process = new Process(null, this.behavior, this.resolveProcess);
this.editProcess(process);
},
onSelectProcessNode(process) {
this.$refs.properties.edit(process);
},
editProcess(process) {
this.pushProcessStack(process);
this.$refs.board.edit(process, this.resolveProcess);
this.$refs.properties.edit();
},
onPop(index) {
this.popProcessStack(index + 1);
let process = this.processStack[this.processStack.length - 1];
this.$refs.board.edit(process, this.resolveProcess);
this.$refs.properties.edit();
},
onEditMeta(meta) {
this.metaInEditing = meta;
this.$refs.metaEditorDialog.edit(meta);
},
onDeleteMeta(meta) {
const inUse = this.$store.getters.metaInUse(meta.id);
if (inUse) {
this.$alert(this.$t('Meta is in use, can not delete'), this.$t('Alert'))
.catch((e) => {
});
} else {
this.$confirm(this.$t('Are you sure to delete this meta'), this.$t('Alert'), {
confirmButtonText: this.$t('Delete'),
cancelButtonText: this.$t('Cancel'),
type: 'warning'
}).then(() => {
this.deleteProcessMeta({meta});
}).catch((e) => {
});
}
},
onSaveMeta(meta) {
let oldMetaID = this.metaInEditing.id;
for (let key in meta) {
this.metaInEditing[key] = meta[key];
}
this.metaInEditing = null;
if (oldMetaID !== meta.id) {
this.updateProcesses({
targetMetaID: oldMetaID,
replaceMetaID: meta.id,
});
}
this.$refs.board.updateProcessNode(meta.id);
events.$emit('behaviorSave')
},
...mapMutations([
'updateProcesses',
'deleteProcessMeta',
'updatePropsEditable',
'clearProcessStack',
'pushProcessStack',
'popProcessStack',
'setScale',
]),
...mapGetters([
'metaInUse',
]),
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
.history/src/views/Editor/behavior-editor/BehaviorEditor_20191203194357.vue 0 → 100644
View file @ 6985084a
<template>
<div class="behavior">
<split-panes>
<split-panes splitpanes-min="10" :splitpanes-size="10" horizontal>
<process-list @edit-meta="onEditMeta" @delete-meta="onDeleteMeta" :data="prefabProcessTree"
class="background full-size" splitpanes-min="20"
:splitpanes-size="30"/>
<process-list @edit-meta="onEditMeta" @delete-meta="onDeleteMeta" :data="normalProcessTree"
class="background full-size" splitpanes-min="20"
:splitpanes-size="70"/>
</split-panes>
<div class="center full-size background" splitpanes-min="20" :splitpanes-size="70">
<edit-path :processStack="processStack" @pop="onPop"/>
<div class="operate-bar">
<!--<el-button-group>
<el-button size="mini" icon="el-icon-zoom-out" @click="setScale(-0.1)"/>
<el-button size="mini" @click="setScale(0)">1:1</el-button>
<el-button size="mini" icon="el-icon-zoom-in" @click="setScale(0.1)"/>
</el-button-group>-->
</div>
<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"/>
</div>
</split-panes>
<meta-editor-dialog ref="metaEditorDialog" @input="onSaveMeta"/>
</div>
</template>
<script>
import {mapState, mapMutations, mapGetters, mapActions} from 'vuex'
import Board from "./Board";
import SplitPanes from 'splitpanes'
import ProcessList from "./ProcessList";
import PropertiesEditor from "./PropertiesEditor";
import EditPath from "./Board/EditPath";
import Process from "./Board/Process";
import MetaEditorDialog from "./MetaEditorDialog";
import events from "@/global-events.js"
export default {
name: "BehaviorEditor",
components: {MetaEditorDialog, PropertiesEditor, EditPath, ProcessList, Board, SplitPanes,},
props: [],
data() {
return {
metaInEditing: null,
}
},
computed: {
processContext() {
const {builtinsProcessMap, customProcessMap} = this.$store.getters;
return [
builtinsProcessMap,
customProcessMap,
]
},
normalProcessTree() {
const tree = this.builtinProcessTree;
const group = tree.find(item => item.name === 'custom');
group.children = this.$store.state.behavior.data.processes;
return tree;
},
...mapState({
behavior: state => state.behavior.currentBehavior,
processStack: state=>state.behavior.processStack,
}),
...mapGetters([
'prefabProcessTree',
'builtinProcessTree'
]),
},
methods: {
resolveProcess(id) {
for (let context of this.processContext) {
if (context[id]) {
return context[id];
}
}
},
edit() {
this.clearProcessStack();
let process = new Process(null, this.behavior, this.resolveProcess);
this.editProcess(process);
},
onSelectProcessNode(process) {
this.$refs.properties.edit(process);
},
editProcess(process) {
this.pushProcessStack(process);
this.$refs.board.edit(process, this.resolveProcess);
this.$refs.properties.edit();
},
onPop(index) {
this.popProcessStack(index + 1);
let process = this.processStack[this.processStack.length - 1];
this.$refs.board.edit(process, this.resolveProcess);
this.$refs.properties.edit();
},
onEditMeta(meta) {
this.metaInEditing = meta;
this.$refs.metaEditorDialog.edit(meta);
},
onDeleteMeta(meta) {
const inUse = this.$store.getters.metaInUse(meta.id);
if (inUse) {
this.$alert(this.$t('Meta is in use, can not delete'), this.$t('Alert'))
.catch((e) => {
});
} else {
this.$confirm(this.$t('Are you sure to delete this meta'), this.$t('Alert'), {
confirmButtonText: this.$t('Delete'),
cancelButtonText: this.$t('Cancel'),
type: 'warning'
}).then(() => {
this.deleteProcessMeta({meta});
}).catch((e) => {
});
}
},
onSaveMeta(meta,isPreview) {
let oldMetaID = this.metaInEditing.id;
for (let key in meta) {
this.metaInEditing[key] = meta[key];
}
this.metaInEditing = null;
if (oldMetaID !== meta.id) {
this.updateProcesses({
targetMetaID: oldMetaID,
replaceMetaID: meta.id,
});
}
this.$refs.board.updateProcessNode(meta.id);
events.$emit('behaviorSave')
},
...mapMutations([
'updateProcesses',
'deleteProcessMeta',
'updatePropsEditable',
'clearProcessStack',
'pushProcessStack',
'popProcessStack',
'setScale',
]),
...mapGetters([
'metaInUse',
]),
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
.history/src/views/Editor/behavior-editor/BehaviorEditor_20191203194416.vue 0 → 100644
View file @ 6985084a
<template>
<div class="behavior">
<split-panes>
<split-panes splitpanes-min="10" :splitpanes-size="10" horizontal>
<process-list @edit-meta="onEditMeta" @delete-meta="onDeleteMeta" :data="prefabProcessTree"
class="background full-size" splitpanes-min="20"
:splitpanes-size="30"/>
<process-list @edit-meta="onEditMeta" @delete-meta="onDeleteMeta" :data="normalProcessTree"
class="background full-size" splitpanes-min="20"
:splitpanes-size="70"/>
</split-panes>
<div class="center full-size background" splitpanes-min="20" :splitpanes-size="70">
<edit-path :processStack="processStack" @pop="onPop"/>
<div class="operate-bar">
<!--<el-button-group>
<el-button size="mini" icon="el-icon-zoom-out" @click="setScale(-0.1)"/>
<el-button size="mini" @click="setScale(0)">1:1</el-button>
<el-button size="mini" icon="el-icon-zoom-in" @click="setScale(0.1)"/>
</el-button-group>-->
</div>
<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"/>
</div>
</split-panes>
<meta-editor-dialog ref="metaEditorDialog" @input="onSaveMeta"/>
</div>
</template>
<script>
import {mapState, mapMutations, mapGetters, mapActions} from 'vuex'
import Board from "./Board";
import SplitPanes from 'splitpanes'
import ProcessList from "./ProcessList";
import PropertiesEditor from "./PropertiesEditor";
import EditPath from "./Board/EditPath";
import Process from "./Board/Process";
import MetaEditorDialog from "./MetaEditorDialog";
import events from "@/global-events.js"
export default {
name: "BehaviorEditor",
components: {MetaEditorDialog, PropertiesEditor, EditPath, ProcessList, Board, SplitPanes,},
props: [],
data() {
return {
metaInEditing: null,
}
},
computed: {
processContext() {
const {builtinsProcessMap, customProcessMap} = this.$store.getters;
return [
builtinsProcessMap,
customProcessMap,
]
},
normalProcessTree() {
const tree = this.builtinProcessTree;
const group = tree.find(item => item.name === 'custom');
group.children = this.$store.state.behavior.data.processes;
return tree;
},
...mapState({
behavior: state => state.behavior.currentBehavior,
processStack: state=>state.behavior.processStack,
}),
...mapGetters([
'prefabProcessTree',
'builtinProcessTree'
]),
},
methods: {
resolveProcess(id) {
for (let context of this.processContext) {
if (context[id]) {
return context[id];
}
}
},
edit() {
this.clearProcessStack();
let process = new Process(null, this.behavior, this.resolveProcess);
this.editProcess(process);
},
onSelectProcessNode(process) {
this.$refs.properties.edit(process);
},
editProcess(process) {
this.pushProcessStack(process);
this.$refs.board.edit(process, this.resolveProcess);
this.$refs.properties.edit();
},
onPop(index) {
this.popProcessStack(index + 1);
let process = this.processStack[this.processStack.length - 1];
this.$refs.board.edit(process, this.resolveProcess);
this.$refs.properties.edit();
},
onEditMeta(meta) {
this.metaInEditing = meta;
this.$refs.metaEditorDialog.edit(meta);
},
onDeleteMeta(meta) {
const inUse = this.$store.getters.metaInUse(meta.id);
if (inUse) {
this.$alert(this.$t('Meta is in use, can not delete'), this.$t('Alert'))
.catch((e) => {
});
} else {
this.$confirm(this.$t('Are you sure to delete this meta'), this.$t('Alert'), {
confirmButtonText: this.$t('Delete'),
cancelButtonText: this.$t('Cancel'),
type: 'warning'
}).then(() => {
this.deleteProcessMeta({meta});
}).catch((e) => {
});
}
},
onSaveMeta(meta,isPreview) {
let oldMetaID = this.metaInEditing.id;
for (let key in meta) {
this.metaInEditing[key] = meta[key];
}
this.metaInEditing = null;
if (oldMetaID !== meta.id) {
this.updateProcesses({
targetMetaID: oldMetaID,
replaceMetaID: meta.id,
});
}
this.$refs.board.updateProcessNode(meta.id);
if(isPreview){
events.$emit('behaviorSave')
}
},
...mapMutations([
'updateProcesses',
'deleteProcessMeta',
'updatePropsEditable',
'clearProcessStack',
'pushProcessStack',
'popProcessStack',
'setScale',
]),
...mapGetters([
'metaInUse',
]),
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
.history/src/views/Editor_20191203143311.vue 0 → 100644
View file @ 6985084a
This diff is collapsed.
.history/src/views/Editor_20191203171550.vue 0 → 100644
View file @ 6985084a
This diff is collapsed.
.history/src/views/Editor_20191203174046.vue 0 → 100644
View file @ 6985084a
This diff is collapsed.
.history/src/views/Editor_20191203174108.vue 0 → 100644
View file @ 6985084a
This diff is collapsed.
.history/src/views/Editor_20191203174353.vue 0 → 100644
View file @ 6985084a
This diff is collapsed.
.history/src/views/Editor_20191203174404.vue 0 → 100644
View file @ 6985084a
This diff is collapsed.
.history/src/views/Editor_20191203190629.vue 0 → 100644
View file @ 6985084a
This diff is collapsed.
src/locales/zh-CN.json
View file @ 6985084a
This diff is collapsed.
src/views/Editor.vue
View file @ 6985084a
This diff is collapsed.
src/views/Editor/Inspector/BehaviorTab.vue
View file @ 6985084a
This diff is collapsed.
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