Skip to content

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

--

parent 79d92895
Hide whitespace changes
Inline Side-by-side
Showing with 0 additions and 14291 deletions
.history/package_20191202161449.json deleted 100644 → 0
View file @ 79d92895
{
"name": "zeroing-editor",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"upload": "cp dist/index.html ../duiba-aurora-node/src/public/index.html&&ali-oss-publish -c oss.config.js -e dist",
"build:upload": "npm run build&&npm run upload",
"i18n:report": "vue-cli-service i18n:report --src './src/**/*.?(js|vue)' --locales './src/locales/**/*.json'"
},
"dependencies": {
"cookie": "^0.4.0",
"copy-to-clipboard": "^3.2.0",
"core-js": "^2.6.5",
"element-ui": "^2.4.5",
"jszip": "^3.2.2",
"moment": "^2.24.0",
"path": "^0.12.7",
"querystringify": "^2.1.1",
"splitpanes": "^1.14.5",
"string-width": "^4.1.0",
"uuid": "^3.3.3",
"vue": "^2.6.10",
"vue-codemirror": "^4.0.6",
"vue-i18n": "^8.0.0",
"vue-prism-editor": "^0.3.0",
"vue-router": "^3.0.3",
"vuex": "^3.0.1"
},
"devDependencies": {
"@kazupon/vue-i18n-loader": "^0.3.0",
"@vue/cli-plugin-babel": "^3.11.0",
"@vue/cli-service": "^3.11.0",
"ali-oss-publish": "^0.3.0",
"lodash": "^4.17.15",
"node-sass": "^4.9.2",
"sass": "^1.22.9",
"sass-loader": "^7.2.0",
"vue-cli-plugin-element": "^1.0.1",
"vue-cli-plugin-i18n": "^0.6.0",
"vue-draggable-resizable": "^2.0.1",
"vue-template-compiler": "^2.6.10"
},
"appVersion": "0.1.0"
}
.history/package_20191202161638.json deleted 100644 → 0
View file @ 79d92895
{
"name": "zeroing-editor",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"upload": "cp dist/index.html ../duiba-aurora-node/src/public/index.html&&ali-oss-publish -c oss.config.js -e dist",
"build:upload": "npm run build&&npm run upload",
"i18n:report": "vue-cli-service i18n:report --src './src/**/*.?(js|vue)' --locales './src/locales/**/*.json'"
},
"dependencies": {
"cookie": "^0.4.0",
"copy-to-clipboard": "^3.2.0",
"core-js": "^2.6.5",
"element-ui": "^2.4.5",
"jszip": "^3.2.2",
"moment": "^2.24.0",
"path": "^0.12.7",
"querystringify": "^2.1.1",
"splitpanes": "^1.14.5",
"string-width": "^4.1.0",
"uuid": "^3.3.3",
"vue": "^2.6.10",
"vue-codemirror": "^4.0.6",
"vue-i18n": "^8.0.0",
"vue-router": "^3.0.3",
"vuex": "^3.0.1"
},
"devDependencies": {
"@kazupon/vue-i18n-loader": "^0.3.0",
"@vue/cli-plugin-babel": "^3.11.0",
"@vue/cli-service": "^3.11.0",
"ali-oss-publish": "^0.3.0",
"lodash": "^4.17.15",
"node-sass": "^4.9.2",
"sass": "^1.22.9",
"sass-loader": "^7.2.0",
"vue-cli-plugin-element": "^1.0.1",
"vue-cli-plugin-i18n": "^0.6.0",
"vue-draggable-resizable": "^2.0.1",
"vue-template-compiler": "^2.6.10"
},
"appVersion": "0.1.0"
}
.history/src/config_20191129114418.js deleted 100644 → 0
View file @ 79d92895
/**
* Created by rockyl on 2019-09-19.
*/
export let API_HOST;
if (process.env.NODE_ENV === 'development') {
//API_HOST = 'http://10.10.95.74:7777';
//API_HOST = 'http://10.10.94.134:7777';
//API_HOST = 'http://localhost:3002';
API_HOST = window.__data.apiHost;
<<<<<<< HEAD
=======
//API_HOST = '';
>>>>>>> 4be75099e23b6946a0ba4a754861b69a32bad830
} else {
API_HOST = window.__data.apiHost;
}
if (API_HOST[API_HOST.length - 1] === '/') {
API_HOST = API_HOST.substr(0, API_HOST.length - 1);
}
export const SSO_VERIFY_PAGE_URL = '/sso/logout';
export const DOCK_POINT_OFFSET = 4;
//文件类型图标 t表示展示缩略图
export const fileTypeIcon = {
'': 'file-empty',
'.txt': 'file-text',
'.json': 'file-text',
'.zip': 'file-zip',
'.fnt': 'file-font',
'.jpg': 't',
'.jpeg': 't',
'.png': 't',
'.gif': 't',
'.svg': 't',
};
.history/src/config_20191129114434.js deleted 100644 → 0
View file @ 79d92895
/**
* Created by rockyl on 2019-09-19.
*/
export let API_HOST;
if (process.env.NODE_ENV === 'development') {
//API_HOST = 'http://10.10.95.74:7777';
//API_HOST = 'http://10.10.94.134:7777';
//API_HOST = 'http://localhost:3002';
API_HOST = window.__data.apiHost;
//API_HOST = '';
} else {
API_HOST = window.__data.apiHost;
}
if (API_HOST[API_HOST.length - 1] === '/') {
API_HOST = API_HOST.substr(0, API_HOST.length - 1);
}
export const SSO_VERIFY_PAGE_URL = '/sso/logout';
export const DOCK_POINT_OFFSET = 4;
//文件类型图标 t表示展示缩略图
export const fileTypeIcon = {
'': 'file-empty',
'.txt': 'file-text',
'.json': 'file-text',
'.zip': 'file-zip',
'.fnt': 'file-font',
'.jpg': 't',
'.jpeg': 't',
'.png': 't',
'.gif': 't',
'.svg': 't',
};
.history/src/locales/zh-CN_20191202160329.json deleted 100644 → 0
View file @ 79d92895
{
"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 deleted 100644 → 0
View file @ 79d92895
{
"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 deleted 100644 → 0
View file @ 79d92895
{
"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 deleted 100644 → 0
View file @ 79d92895
<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 deleted 100644 → 0
View file @ 79d92895
<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 deleted 100644 → 0
View file @ 79d92895
<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 deleted 100644 → 0
View file @ 79d92895
<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 deleted 100644 → 0
View file @ 79d92895
<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 deleted 100644 → 0
View file @ 79d92895
<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 deleted 100644 → 0
View file @ 79d92895
<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 deleted 100644 → 0
View file @ 79d92895
<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 deleted 100644 → 0
View file @ 79d92895
<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 deleted 100644 → 0
View file @ 79d92895
<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 deleted 100644 → 0
View file @ 79d92895
<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 deleted 100644 → 0
View file @ 79d92895
<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 deleted 100644 → 0
View file @ 79d92895
<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 deleted 100644 → 0
View file @ 79d92895
<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 deleted 100644 → 0
View file @ 79d92895
<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 deleted 100644 → 0
View file @ 79d92895
<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 deleted 100644 → 0
View file @ 79d92895
<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 deleted 100644 → 0
View file @ 79d92895
<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 deleted 100644 → 0
View file @ 79d92895
<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 deleted 100644 → 0
View file @ 79d92895
<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 deleted 100644 → 0
View file @ 79d92895
<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_20191128104254.vue deleted 100644 → 0
View file @ 79d92895
<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";
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);
},
...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_20191203134213.vue deleted 100644 → 0
View file @ 79d92895
<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>s
<board ref="board" @select-proces-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";
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);
},
...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_20191203134219.vue deleted 100644 → 0
View file @ 79d92895
<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";
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);
},
...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_20191203191633.vue deleted 100644 → 0
View file @ 79d92895
<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 deleted 100644 → 0
View file @ 79d92895
<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 deleted 100644 → 0
View file @ 79d92895
<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 deleted 100644 → 0
View file @ 79d92895
<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 deleted 100644 → 0
View file @ 79d92895
<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/behavior-editor/BehaviorEditor_20191203194453.vue deleted 100644 → 0
View file @ 79d92895
<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/behavior-editor/BehaviorEditor_20191203200337.vue deleted 100644 → 0
View file @ 79d92895
<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',isPreview)
}
},
...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/MetaEditorDialog_20191203143311.vue deleted 100644 → 0
View file @ 79d92895
<template>
<el-dialog :title="$t('Meta Editor')" width="80%" :visible.sync="visible"
:close-on-click-modal="false"
:close-on-press-escape="false"
:show-close="false"
:append-to-body="true">
<div class="meta-editor-wrapper">
<el-form ref="form" v-if="meta" :model="meta" :rules="rules" :show-message="false" class="info-editor" size="mini" label-position="right" label-width="70px" @submit.native.prevent>
<template>
<el-form-item prop="id" :label="$t('ID')">
<el-input v-model="meta.id" :placeholder="$t('ID')" :readonly="!editable"/>
</el-form-item>
<el-form-item prop="name" :label="$t('Name')">
<el-input v-model="meta.name" :placeholder="$t('Name')" :readonly="!editable"/>
</el-form-item>
<el-form-item prop="desc" :label="$t('Desc')">
<el-input v-model="meta.desc" :placeholder="$t('Description')" :readonly="!editable"/>
</el-form-item>
<!--<el-form-item prop="type" label="Type">
<el-input v-model="meta.type" :placeholder="$t('Type')" :readonly="!editable"/>
</el-form-item>
<el-form-item prop="group" label="Group">
<el-input v-model="meta.group" :placeholder="$t('Group')" :readonly="!editable"/>
</el-form-item>-->
<el-form-item :label="$t('Props')">
<el-link :underline="false" @click="onClickEditProps" :disabled="!editable">
<template v-if="Object.keys(meta.props).length">
<el-tag type="success" size="mini" v-for="(option, key) in meta.props" :key="key">{{key}}</el-tag>
</template>
<template v-else>{{$t('Empty')}}</template>
</el-link>
</el-form-item>
<el-form-item :label="$t('Output')">
<div style="display: flex;flex: 1;">
<el-select style="flex: 1;" v-model="meta.output" :disabled="!editable" allow-create filterable multiple
:placeholder="$t('Output')"/>
</div>
</el-form-item>
</template>
</el-form>
<div style="margin-top: 5px;">
<el-tag v-for="(item, key) in exposeVariables" :key="key" size="mini">{{item}}</el-tag>
</div>
<!--<el-input v-if="meta" class="script-editor" :readonly=" !editable" type="textarea" :placeholder="$t('Code')"
v-model="meta.script"></el-input>-->
<codemirror ref="codeEditor" v-if="meta"
v-model="meta.script"
:options="cmOptions"
@cursorActivity="onCodeChange"
>
</codemirror>
</div>
<div slot="footer" class="dialog-footer">
<div class="button-bar">
<el-button-group style="margin-right: 20px;">
<el-button size="mini" plain @click="copyMeta">CopyMeta</el-button>
<el-popover>
<div ref="pasteBoard" @paste="onPaste">Click and Ctrl+V</div>
<el-button size="mini" slot="reference" plain @click="pasteMeta">PasteMeta</el-button>
</el-popover>
</el-button-group>
<el-button size="mini" plain @click="cancel">{{$t('Cancel')}}</el-button>
<el-button size="mini" plain @click="save">{{$t('Save')}}</el-button>
</div>
</div>
<props-editor-dialog ref="propsEditorDialog"/>
</el-dialog>
</template>
<script>
import ElFormItem from "./inputs/form-item";
import PropsEditorDialog from "./PropsEditorDialog";
import {codemirror} from "vue-codemirror";
import copy from 'copy-to-clipboard'
import {clonePureObj} from "../../../utils";
import 'codemirror/mode/javascript/javascript.js'
import 'codemirror/lib/codemirror.css'
import 'codemirror/theme/monokai.css'
import 'codemirror/addon/edit/closebrackets.js'
import 'codemirror/addon/hint/show-hint.js'
import 'codemirror/addon/hint/show-hint.css'
import 'codemirror/addon/hint/javascript-hint.js'
const exposeVariables = ['args', 'props', 'target', 'global', 'vm', 'engine'];
export default {
name: "MetaEditorDialog",
components: {PropsEditorDialog, ElFormItem, codemirror},
data() {
return {
visible: false,
meta: null,
propsEditorVisible: false,
exposeVariables,
rules: {
id: [
{ required: true, trigger: 'blur' },
],
name: [
{ required: true, trigger: 'blur' }
],
},
cmOptions: {
tabSize: 2,
mode: 'text/javascript',
styleActiveLine: true,
theme: 'default',
lineNumbers: true,
line: true,
matchBrackets: true,
autoCloseBrackets: true,
}
}
},
mounted(){
},
computed: {
editable() {
return this.meta;// && this.meta.type !== 'builtin';
},
props() {
return Object.keys(this.meta.props).join(',')
},
},
methods: {
edit(meta) {
this.visible = true;
this.meta = clonePureObj(meta);
this.oldMetaID = this.meta.id;
},
onClickEditProps() {
this.$refs.propsEditorDialog.edit(this.meta.props);
},
save() {
this.$refs.form.validate((valid) => {
if (valid) {
if (this.oldMetaID !== this.meta.id && this.$store.getters.metaIDExists(this.meta.id)) {
this.$alert(this.$t('This Meta ID is in use, can not save'), this.$t('Alert'))
.catch((e) => {
});
} else {
this.$emit('input', this.meta);
this.visible = false;
}
} else {
return false;
}
});
},
cancel() {
this.visible = false;
},
copyMeta() {
copy(JSON.stringify(this.meta));
},
pasteMeta() {
//setTimeout(this.focusPasteBoard, 1000, this);
},
onPaste(e) {
let metaStr = e.clipboardData.getData("Text");
if(metaStr){
try {
let meta = JSON.parse(metaStr);
this.meta = meta;
}catch (e) {
}
}
},
focusPasteBoard(){
this.$refs.pasteBoard.focus();
},
onCodeChange(codemirror){
//codemirror.showHint();
//console.log(code);
}
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
.history/src/views/Editor/behavior-editor/MetaEditorDialog_20191203172711.vue deleted 100644 → 0
View file @ 79d92895
<template>
<el-dialog :title="$t('Meta Editor')" width="80%" :visible.sync="visible"
:close-on-click-modal="false"
:close-on-press-escape="false"
:show-close="false"
:append-to-body="true">
<div class="meta-editor-wrapper">
<el-form ref="form" v-if="meta" :model="meta" :rules="rules" :show-message="false" class="info-editor" size="mini" label-position="right" label-width="70px" @submit.native.prevent>
<template>
<el-form-item prop="id" :label="$t('ID')">
<el-input v-model="meta.id" :placeholder="$t('ID')" :readonly="!editable"/>
</el-form-item>
<el-form-item prop="name" :label="$t('Name')">
<el-input v-model="meta.name" :placeholder="$t('Name')" :readonly="!editable"/>
</el-form-item>
<el-form-item prop="desc" :label="$t('Desc')">
<el-input v-model="meta.desc" :placeholder="$t('Description')" :readonly="!editable"/>
</el-form-item>
<!--<el-form-item prop="type" label="Type">
<el-input v-model="meta.type" :placeholder="$t('Type')" :readonly="!editable"/>
</el-form-item>
<el-form-item prop="group" label="Group">
<el-input v-model="meta.group" :placeholder="$t('Group')" :readonly="!editable"/>
</el-form-item>-->
<el-form-item :label="$t('Props')">
<el-link :underline="false" @click="onClickEditProps" :disabled="!editable">
<template v-if="Object.keys(meta.props).length">
<el-tag type="success" size="mini" v-for="(option, key) in meta.props" :key="key">{{key}}</el-tag>
</template>
<template v-else>{{$t('Empty')}}</template>
</el-link>
</el-form-item>
<el-form-item :label="$t('Output')">
<div style="display: flex;flex: 1;">
<el-select style="flex: 1;" v-model="meta.output" :disabled="!editable" allow-create filterable multiple
:placeholder="$t('Output')"/>
</div>
</el-form-item>
</template>
</el-form>
<div style="margin-top: 5px;">
<el-tag v-for="(item, key) in exposeVariables" :key="key" size="mini">{{item}}</el-tag>
</div>
<!--<el-input v-if="meta" class="script-editor" :readonly=" !editable" type="textarea" :placeholder="$t('Code')"
v-model="meta.script"></el-input>-->
<codemirror ref="codeEditor" v-if="meta"
v-model="meta.script"
:options="cmOptions"
@cursorActivity="onCodeChange"
>
</codemirror>
</div>
<div slot="footer" class="dialog-footer">
<div class="button-bar">
<el-button-group style="margin-right: 20px;">
<el-button size="mini" plain @click="copyMeta">CopyMeta</el-button>
<el-popover>
<div ref="pasteBoard" @paste="onPaste">Click and Ctrl+V</div>
<el-button size="mini" slot="reference" plain @click="pasteMeta">PasteMeta</el-button>
</el-popover>
</el-button-group>
<el-button size="mini" plain @click="cancel">{{$t('Cancel')}}</el-button>
<el-button size="mini" plain @click="save">{{$t('Save')}}</el-button>
</div>
</div>
<props-editor-dialog ref="propsEditorDialog"/>
</el-dialog>
</template>
<script>
import ElFormItem from "./inputs/form-item";
import PropsEditorDialog from "./PropsEditorDialog";
import {codemirror} from "vue-codemirror";
import copy from 'copy-to-clipboard'
import {clonePureObj} from "../../../utils";
import 'codemirror/mode/javascript/javascript.js'
import 'codemirror/lib/codemirror.css'
import 'codemirror/theme/monokai.css'
import 'codemirror/addon/edit/closebrackets.js'
import 'codemirror/addon/hint/show-hint.js'
import 'codemirror/addon/hint/show-hint.css'
import 'codemirror/addon/hint/javascript-hint.js'
const exposeVariables = ['args', 'props', 'target', 'global', 'vm', 'engine'];
export default {
name: "MetaEditorDialog",
components: {PropsEditorDialog, ElFormItem, codemirror},
data() {
return {
visible: false,
meta: null,
propsEditorVisible: false,
exposeVariables,
rules: {
id: [
{ required: true, trigger: 'blur' },
],
name: [
{ required: true, trigger: 'blur' }
],
},
cmOptions: {
tabSize: 2,
mode: 'text/javascript',
styleActiveLine: true,
theme: 'default',
lineNumbers: true,
line: true,
matchBrackets: true,
autoCloseBrackets: true,
}
}
},
mounted(){
},
computed: {
editable() {
return this.meta;// && this.meta.type !== 'builtin';
},
props() {
return Object.keys(this.meta.props).join(',')
},
},
methods: {
edit(meta) {
this.visible = true;
this.meta = clonePureObj(meta);
this.oldMetaID = this.meta.id;
},
onClickEditProps() {
this.$refs.propsEditorDialog.edit(this.meta.props);
},
save() {
this.$refs.form.validate((valid) => {
if (valid) {
if (this.oldMetaID !== this.meta.id && this.$store.getters.metaIDExists(this.meta.id)) {
this.$alert(this.$t('This Meta ID is in use, can not save'), this.$t('Alert'))
.catch((e) => {
});
} else {
this.$emit('input', this.meta);
this.visible = false;
alert()
}
} else {
return false;
}
});
},
cancel() {
this.visible = false;
},
copyMeta() {
copy(JSON.stringify(this.meta));
},
pasteMeta() {
//setTimeout(this.focusPasteBoard, 1000, this);
},
onPaste(e) {
let metaStr = e.clipboardData.getData("Text");
if(metaStr){
try {
let meta = JSON.parse(metaStr);
this.meta = meta;
}catch (e) {
}
}
},
focusPasteBoard(){
this.$refs.pasteBoard.focus();
},
onCodeChange(codemirror){
//codemirror.showHint();
//console.log(code);
}
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
.history/src/views/Editor/behavior-editor/MetaEditorDialog_20191203174046.vue deleted 100644 → 0
View file @ 79d92895
<template>
<el-dialog :title="$t('Meta Editor')" width="80%" :visible.sync="visible"
:close-on-click-modal="false"
:close-on-press-escape="false"
:show-close="false"
:append-to-body="true">
<div class="meta-editor-wrapper">
<el-form ref="form" v-if="meta" :model="meta" :rules="rules" :show-message="false" class="info-editor" size="mini" label-position="right" label-width="70px" @submit.native.prevent>
<template>
<el-form-item prop="id" :label="$t('ID')">
<el-input v-model="meta.id" :placeholder="$t('ID')" :readonly="!editable"/>
</el-form-item>
<el-form-item prop="name" :label="$t('Name')">
<el-input v-model="meta.name" :placeholder="$t('Name')" :readonly="!editable"/>
</el-form-item>
<el-form-item prop="desc" :label="$t('Desc')">
<el-input v-model="meta.desc" :placeholder="$t('Description')" :readonly="!editable"/>
</el-form-item>
<!--<el-form-item prop="type" label="Type">
<el-input v-model="meta.type" :placeholder="$t('Type')" :readonly="!editable"/>
</el-form-item>
<el-form-item prop="group" label="Group">
<el-input v-model="meta.group" :placeholder="$t('Group')" :readonly="!editable"/>
</el-form-item>-->
<el-form-item :label="$t('Props')">
<el-link :underline="false" @click="onClickEditProps" :disabled="!editable">
<template v-if="Object.keys(meta.props).length">
<el-tag type="success" size="mini" v-for="(option, key) in meta.props" :key="key">{{key}}</el-tag>
</template>
<template v-else>{{$t('Empty')}}</template>
</el-link>
</el-form-item>
<el-form-item :label="$t('Output')">
<div style="display: flex;flex: 1;">
<el-select style="flex: 1;" v-model="meta.output" :disabled="!editable" allow-create filterable multiple
:placeholder="$t('Output')"/>
</div>
</el-form-item>
</template>
</el-form>
<div style="margin-top: 5px;">
<el-tag v-for="(item, key) in exposeVariables" :key="key" size="mini">{{item}}</el-tag>
</div>
<!--<el-input v-if="meta" class="script-editor" :readonly=" !editable" type="textarea" :placeholder="$t('Code')"
v-model="meta.script"></el-input>-->
<codemirror ref="codeEditor" v-if="meta"
v-model="meta.script"
:options="cmOptions"
@cursorActivity="onCodeChange"
>
</codemirror>
</div>
<div slot="footer" class="dialog-footer">
<div class="button-bar">
<el-button-group style="margin-right: 20px;">
<el-button size="mini" plain @click="copyMeta">CopyMeta</el-button>
<el-popover>
<div ref="pasteBoard" @paste="onPaste">Click and Ctrl+V</div>
<el-button size="mini" slot="reference" plain @click="pasteMeta">PasteMeta</el-button>
</el-popover>
</el-button-group>
<el-button size="mini" plain @click="cancel">{{$t('Cancel')}}</el-button>
<el-button size="mini" plain @click="save">{{$t('Save')}}</el-button>
</div>
</div>
<props-editor-dialog ref="propsEditorDialog"/>
</el-dialog>
</template>
<script>
import ElFormItem from "./inputs/form-item";
import PropsEditorDialog from "./PropsEditorDialog";
import {codemirror} from "vue-codemirror";
import copy from 'copy-to-clipboard'
import {clonePureObj} from "../../../utils";
import 'codemirror/mode/javascript/javascript.js'
import 'codemirror/lib/codemirror.css'
import 'codemirror/theme/monokai.css'
import 'codemirror/addon/edit/closebrackets.js'
import 'codemirror/addon/hint/show-hint.js'
import 'codemirror/addon/hint/show-hint.css'
import 'codemirror/addon/hint/javascript-hint.js'
const exposeVariables = ['args', 'props', 'target', 'global', 'vm', 'engine'];
export default {
name: "MetaEditorDialog",
components: {PropsEditorDialog, ElFormItem, codemirror},
data() {
return {
visible: false,
meta: null,
propsEditorVisible: false,
exposeVariables,
rules: {
id: [
{ required: true, trigger: 'blur' },
],
name: [
{ required: true, trigger: 'blur' }
],
},
cmOptions: {
tabSize: 2,
mode: 'text/javascript',
styleActiveLine: true,
theme: 'default',
lineNumbers: true,
line: true,
matchBrackets: true,
autoCloseBrackets: true,
}
}
},
mounted(){
},
computed: {
editable() {
return this.meta;// && this.meta.type !== 'builtin';
},
props() {
return Object.keys(this.meta.props).join(',')
},
},
methods: {
edit(meta) {
this.visible = true;
this.meta = clonePureObj(meta);
this.oldMetaID = this.meta.id;
},
onClickEditProps() {
this.$refs.propsEditorDialog.edit(this.meta.props);
},
save() {
this.$refs.form.validate((valid) => {
if (valid) {
if (this.oldMetaID !== this.meta.id && this.$store.getters.metaIDExists(this.meta.id)) {
this.$alert(this.$t('This Meta ID is in use, can not save'), this.$t('Alert'))
.catch((e) => {
});
} else {
this.$emit('input', this.meta);
this.visible = false;
}
} else {
return false;
}
});
},
cancel() {
this.visible = false;
},
copyMeta() {
copy(JSON.stringify(this.meta));
},
pasteMeta() {
//setTimeout(this.focusPasteBoard, 1000, this);
},
onPaste(e) {
let metaStr = e.clipboardData.getData("Text");
if(metaStr){
try {
let meta = JSON.parse(metaStr);
this.meta = meta;
}catch (e) {
}
}
},
focusPasteBoard(){
this.$refs.pasteBoard.focus();
},
onCodeChange(codemirror){
//codemirror.showHint();
//console.log(code);
}
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
.history/src/views/Editor/behavior-editor/MetaEditorDialog_20191203175332.vue deleted 100644 → 0
View file @ 79d92895
<template>
<el-dialog :title="$t('Meta Editor')" width="80%" :visible.sync="visible"
:close-on-click-modal="false"
:close-on-press-escape="false"
:show-close="false"
:append-to-body="true">
<div class="meta-editor-wrapper">
<el-form ref="form" v-if="meta" :model="meta" :rules="rules" :show-message="false" class="info-editor" size="mini" label-position="right" label-width="70px" @submit.native.prevent>
<template>
<el-form-item prop="id" :label="$t('ID')">
<el-input v-model="meta.id" :placeholder="$t('ID')" :readonly="!editable"/>
</el-form-item>
<el-form-item prop="name" :label="$t('Name')">
<el-input v-model="meta.name" :placeholder="$t('Name')" :readonly="!editable"/>
</el-form-item>
<el-form-item prop="desc" :label="$t('Desc')">
<el-input v-model="meta.desc" :placeholder="$t('Description')" :readonly="!editable"/>
</el-form-item>
<!--<el-form-item prop="type" label="Type">
<el-input v-model="meta.type" :placeholder="$t('Type')" :readonly="!editable"/>
</el-form-item>
<el-form-item prop="group" label="Group">
<el-input v-model="meta.group" :placeholder="$t('Group')" :readonly="!editable"/>
</el-form-item>-->
<el-form-item :label="$t('Props')">
<el-link :underline="false" @click="onClickEditProps" :disabled="!editable">
<template v-if="Object.keys(meta.props).length">
<el-tag type="success" size="mini" v-for="(option, key) in meta.props" :key="key">{{key}}</el-tag>
</template>
<template v-else>{{$t('Empty')}}</template>
</el-link>
</el-form-item>
<el-form-item :label="$t('Output')">
<div style="display: flex;flex: 1;">
<el-select style="flex: 1;" v-model="meta.output" :disabled="!editable" allow-create filterable multiple
:placeholder="$t('Output')"/>
</div>
</el-form-item>
</template>
</el-form>
<div style="margin-top: 5px;">
<el-tag v-for="(item, key) in exposeVariables" :key="key" size="mini">{{item}}</el-tag>
</div>
<!--<el-input v-if="meta" class="script-editor" :readonly=" !editable" type="textarea" :placeholder="$t('Code')"
v-model="meta.script"></el-input>-->
<codemirror ref="codeEditor" v-if="meta"
v-model="meta.script"
:options="cmOptions"
@cursorActivity="onCodeChange"
>
</codemirror>
</div>
<div slot="footer" class="dialog-footer">
<div class="button-bar">
<el-button-group style="margin-right: 20px;">
<el-button size="mini" plain @click="copyMeta">CopyMeta</el-button>
<el-popover>
<div ref="pasteBoard" @paste="onPaste">Click and Ctrl+V</div>
<el-button size="mini" slot="reference" plain @click="pasteMeta">PasteMeta</el-button>
</el-popover>
</el-button-group>
<el-button size="mini" plain @click="cancel">{{$t('Cancel')}}</el-button>
<el-button size="mini" plain @click="save">{{$t('Save')}}</el-button>
</div>
</div>
<props-editor-dialog ref="propsEditorDialog"/>
</el-dialog>
</template>
<script>
import ElFormItem from "./inputs/form-item";
import PropsEditorDialog from "./PropsEditorDialog";
import {codemirror} from "vue-codemirror";
import copy from 'copy-to-clipboard'
import {clonePureObj} from "../../../utils";
import 'codemirror/mode/javascript/javascript.js'
import 'codemirror/lib/codemirror.css'
import 'codemirror/theme/monokai.css'
import 'codemirror/addon/edit/closebrackets.js'
import 'codemirror/addon/hint/show-hint.js'
import 'codemirror/addon/hint/show-hint.css'
import 'codemirror/addon/hint/javascript-hint.js'
import events from "@/global-events.js"
const exposeVariables = ['args', 'props', 'target', 'global', 'vm', 'engine'];
export default {
name: "MetaEditorDialog",
components: {PropsEditorDialog, ElFormItem, codemirror},
data() {
return {
visible: false,
meta: null,
propsEditorVisible: false,
exposeVariables,
rules: {
id: [
{ required: true, trigger: 'blur' },
],
name: [
{ required: true, trigger: 'blur' }
],
},
cmOptions: {
tabSize: 2,
mode: 'text/javascript',
styleActiveLine: true,
theme: 'default',
lineNumbers: true,
line: true,
matchBrackets: true,
autoCloseBrackets: true,
}
}
},
mounted(){
},
computed: {
editable() {
return this.meta;// && this.meta.type !== 'builtin';
},
props() {
return Object.keys(this.meta.props).join(',')
},
},
methods: {
edit(meta) {
this.visible = true;
this.meta = clonePureObj(meta);
this.oldMetaID = this.meta.id;
},
onClickEditProps() {
this.$refs.propsEditorDialog.edit(this.meta.props);
},
save() {
this.$refs.form.validate((valid) => {
if (valid) {
if (this.oldMetaID !== this.meta.id && this.$store.getters.metaIDExists(this.meta.id)) {
this.$alert(this.$t('This Meta ID is in use, can not save'), this.$t('Alert'))
.catch((e) => {
});
} else {
this.$emit('input', this.meta);
this.visible = false;
}
} else {
return false;
}
});
},
cancel() {
this.visible = false;
},
copyMeta() {
copy(JSON.stringify(this.meta));
},
pasteMeta() {
//setTimeout(this.focusPasteBoard, 1000, this);
},
onPaste(e) {
let metaStr = e.clipboardData.getData("Text");
if(metaStr){
try {
let meta = JSON.parse(metaStr);
this.meta = meta;
}catch (e) {
}
}
},
focusPasteBoard(){
this.$refs.pasteBoard.focus();
},
onCodeChange(codemirror){
//codemirror.showHint();
//console.log(code);
}
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
.history/src/views/Editor/behavior-editor/MetaEditorDialog_20191203175815.vue deleted 100644 → 0
View file @ 79d92895
<template>
<el-dialog :title="$t('Meta Editor')" width="80%" :visible.sync="visible"
:close-on-click-modal="false"
:close-on-press-escape="false"
:show-close="false"
:append-to-body="true">
<div class="meta-editor-wrapper">
<el-form ref="form" v-if="meta" :model="meta" :rules="rules" :show-message="false" class="info-editor" size="mini" label-position="right" label-width="70px" @submit.native.prevent>
<template>
<el-form-item prop="id" :label="$t('ID')">
<el-input v-model="meta.id" :placeholder="$t('ID')" :readonly="!editable"/>
</el-form-item>
<el-form-item prop="name" :label="$t('Name')">
<el-input v-model="meta.name" :placeholder="$t('Name')" :readonly="!editable"/>
</el-form-item>
<el-form-item prop="desc" :label="$t('Desc')">
<el-input v-model="meta.desc" :placeholder="$t('Description')" :readonly="!editable"/>
</el-form-item>
<!--<el-form-item prop="type" label="Type">
<el-input v-model="meta.type" :placeholder="$t('Type')" :readonly="!editable"/>
</el-form-item>
<el-form-item prop="group" label="Group">
<el-input v-model="meta.group" :placeholder="$t('Group')" :readonly="!editable"/>
</el-form-item>-->
<el-form-item :label="$t('Props')">
<el-link :underline="false" @click="onClickEditProps" :disabled="!editable">
<template v-if="Object.keys(meta.props).length">
<el-tag type="success" size="mini" v-for="(option, key) in meta.props" :key="key">{{key}}</el-tag>
</template>
<template v-else>{{$t('Empty')}}</template>
</el-link>
</el-form-item>
<el-form-item :label="$t('Output')">
<div style="display: flex;flex: 1;">
<el-select style="flex: 1;" v-model="meta.output" :disabled="!editable" allow-create filterable multiple
:placeholder="$t('Output')"/>
</div>
</el-form-item>
</template>
</el-form>
<div style="margin-top: 5px;">
<el-tag v-for="(item, key) in exposeVariables" :key="key" size="mini">{{item}}</el-tag>
</div>
<!--<el-input v-if="meta" class="script-editor" :readonly=" !editable" type="textarea" :placeholder="$t('Code')"
v-model="meta.script"></el-input>-->
<codemirror ref="codeEditor" v-if="meta"
v-model="meta.script"
:options="cmOptions"
@cursorActivity="onCodeChange"
>
</codemirror>
</div>
<div slot="footer" class="dialog-footer">
<div class="button-bar">
<el-button-group style="margin-right: 20px;">
<el-button size="mini" plain @click="copyMeta">CopyMeta</el-button>
<el-popover>
<div ref="pasteBoard" @paste="onPaste">Click and Ctrl+V</div>
<el-button size="mini" slot="reference" plain @click="pasteMeta">PasteMeta</el-button>
</el-popover>
</el-button-group>
<el-button size="mini" plain @click="cancel">{{$t('Cancel')}}</el-button>
<el-button size="mini" plain @click="save">{{$t('Save')}}</el-button>
</div>
</div>
<props-editor-dialog ref="propsEditorDialog"/>
</el-dialog>
</template>
<script>
import ElFormItem from "./inputs/form-item";
import PropsEditorDialog from "./PropsEditorDialog";
import {codemirror} from "vue-codemirror";
import copy from 'copy-to-clipboard'
import {clonePureObj} from "../../../utils";
import 'codemirror/mode/javascript/javascript.js'
import 'codemirror/lib/codemirror.css'
import 'codemirror/theme/monokai.css'
import 'codemirror/addon/edit/closebrackets.js'
import 'codemirror/addon/hint/show-hint.js'
import 'codemirror/addon/hint/show-hint.css'
import 'codemirror/addon/hint/javascript-hint.js'
const exposeVariables = ['args', 'props', 'target', 'global', 'vm', 'engine'];
export default {
name: "MetaEditorDialog",
components: {PropsEditorDialog, ElFormItem, codemirror},
data() {
return {
visible: false,
meta: null,
propsEditorVisible: false,
exposeVariables,
rules: {
id: [
{ required: true, trigger: 'blur' },
],
name: [
{ required: true, trigger: 'blur' }
],
},
cmOptions: {
tabSize: 2,
mode: 'text/javascript',
styleActiveLine: true,
theme: 'default',
lineNumbers: true,
line: true,
matchBrackets: true,
autoCloseBrackets: true,
}
}
},
mounted(){
},
computed: {
editable() {
return this.meta;// && this.meta.type !== 'builtin';
},
props() {
return Object.keys(this.meta.props).join(',')
},
},
methods: {
edit(meta) {
this.visible = true;
this.meta = clonePureObj(meta);
this.oldMetaID = this.meta.id;
},
onClickEditProps() {
this.$refs.propsEditorDialog.edit(this.meta.props);
},
save() {
this.$refs.form.validate((valid) => {
if (valid) {
if (this.oldMetaID !== this.meta.id && this.$store.getters.metaIDExists(this.meta.id)) {
this.$alert(this.$t('This Meta ID is in use, can not save'), this.$t('Alert'))
.catch((e) => {
});
} else {
this.$emit('input', this.meta);
// this.visible = false;
}
} else {
return false;
}
});
},
cancel() {
this.visible = false;
},
copyMeta() {
copy(JSON.stringify(this.meta));
},
pasteMeta() {
//setTimeout(this.focusPasteBoard, 1000, this);
},
onPaste(e) {
let metaStr = e.clipboardData.getData("Text");
if(metaStr){
try {
let meta = JSON.parse(metaStr);
this.meta = meta;
}catch (e) {
}
}
},
focusPasteBoard(){
this.$refs.pasteBoard.focus();
},
onCodeChange(codemirror){
//codemirror.showHint();
//console.log(code);
}
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
.history/src/views/Editor/behavior-editor/MetaEditorDialog_20191203180103.vue deleted 100644 → 0
View file @ 79d92895
<template>
<el-dialog :title="$t('Meta Editor')" width="80%" :visible.sync="visible"
:close-on-click-modal="false"
:close-on-press-escape="false"
:show-close="false"
:append-to-body="true">
<div class="meta-editor-wrapper">
<el-form ref="form" v-if="meta" :model="meta" :rules="rules" :show-message="false" class="info-editor" size="mini" label-position="right" label-width="70px" @submit.native.prevent>
<template>
<el-form-item prop="id" :label="$t('ID')">
<el-input v-model="meta.id" :placeholder="$t('ID')" :readonly="!editable"/>
</el-form-item>
<el-form-item prop="name" :label="$t('Name')">
<el-input v-model="meta.name" :placeholder="$t('Name')" :readonly="!editable"/>
</el-form-item>
<el-form-item prop="desc" :label="$t('Desc')">
<el-input v-model="meta.desc" :placeholder="$t('Description')" :readonly="!editable"/>
</el-form-item>
<!--<el-form-item prop="type" label="Type">
<el-input v-model="meta.type" :placeholder="$t('Type')" :readonly="!editable"/>
</el-form-item>
<el-form-item prop="group" label="Group">
<el-input v-model="meta.group" :placeholder="$t('Group')" :readonly="!editable"/>
</el-form-item>-->
<el-form-item :label="$t('Props')">
<el-link :underline="false" @click="onClickEditProps" :disabled="!editable">
<template v-if="Object.keys(meta.props).length">
<el-tag type="success" size="mini" v-for="(option, key) in meta.props" :key="key">{{key}}</el-tag>
</template>
<template v-else>{{$t('Empty')}}</template>
</el-link>
</el-form-item>
<el-form-item :label="$t('Output')">
<div style="display: flex;flex: 1;">
<el-select style="flex: 1;" v-model="meta.output" :disabled="!editable" allow-create filterable multiple
:placeholder="$t('Output')"/>
</div>
</el-form-item>
</template>
</el-form>
<div style="margin-top: 5px;">
<el-tag v-for="(item, key) in exposeVariables" :key="key" size="mini">{{item}}</el-tag>
</div>
<!--<el-input v-if="meta" class="script-editor" :readonly=" !editable" type="textarea" :placeholder="$t('Code')"
v-model="meta.script"></el-input>-->
<codemirror ref="codeEditor" v-if="meta"
v-model="meta.script"
:options="cmOptions"
@cursorActivity="onCodeChange"
>
</codemirror>
</div>
<div slot="footer" class="dialog-footer">
<div class="button-bar">
<el-button-group style="margin-right: 20px;">
<el-button size="mini" plain @click="copyMeta">CopyMeta</el-button>
<el-popover>
<div ref="pasteBoard" @paste="onPaste">Click and Ctrl+V</div>
<el-button size="mini" slot="reference" plain @click="pasteMeta">PasteMeta</el-button>
</el-popover>
</el-button-group>
<el-button size="mini" plain @click="cancel">{{$t('Cancel')}}</el-button>
<el-button size="mini" plain @click="save">{{$t('Save')}}</el-button>
</div>
</div>
<props-editor-dialog ref="propsEditorDialog"/>
</el-dialog>
</template>
<script>
import ElFormItem from "./inputs/form-item";
import PropsEditorDialog from "./PropsEditorDialog";
import {codemirror} from "vue-codemirror";
import copy from 'copy-to-clipboard'
import {clonePureObj} from "../../../utils";
import 'codemirror/mode/javascript/javascript.js'
import 'codemirror/lib/codemirror.css'
import 'codemirror/theme/monokai.css'
import 'codemirror/addon/edit/closebrackets.js'
import 'codemirror/addon/hint/show-hint.js'
import 'codemirror/addon/hint/show-hint.css'
import 'codemirror/addon/hint/javascript-hint.js'
const exposeVariables = ['args', 'props', 'target', 'global', 'vm', 'engine'];
export default {
name: "MetaEditorDialog",
components: {PropsEditorDialog, ElFormItem, codemirror},
data() {
return {
visible: false,
meta: null,
propsEditorVisible: false,
exposeVariables,
rules: {
id: [
{ required: true, trigger: 'blur' },
],
name: [
{ required: true, trigger: 'blur' }
],
},
cmOptions: {
tabSize: 2,
mode: 'text/javascript',
styleActiveLine: true,
theme: 'default',
lineNumbers: true,
line: true,
matchBrackets: true,
autoCloseBrackets: true,
}
}
},
mounted(){
},
computed: {
editable() {
return this.meta;// && this.meta.type !== 'builtin';
},
props() {
return Object.keys(this.meta.props).join(',')
},
},
methods: {
edit(meta) {
this.visible = true;
this.meta = clonePureObj(meta);
this.oldMetaID = this.meta.id;
},
onClickEditProps() {
this.$refs.propsEditorDialog.edit(this.meta.props);
},
save() {
this.$refs.form.validate((valid) => {
if (valid) {
if (this.oldMetaID !== this.meta.id && this.$store.getters.metaIDExists(this.meta.id)) {
this.$alert(this.$t('This Meta ID is in use, can not save'), this.$t('Alert'))
.catch((e) => {
});
} else {
this.$emit('input', this.meta);
//this.visible = false;
}
} else {
return false;
}
});
},
cancel() {
this.visible = false;
},
copyMeta() {
copy(JSON.stringify(this.meta));
},
pasteMeta() {
//setTimeout(this.focusPasteBoard, 1000, this);
},
onPaste(e) {
let metaStr = e.clipboardData.getData("Text");
if(metaStr){
try {
let meta = JSON.parse(metaStr);
this.meta = meta;
}catch (e) {
}
}
},
focusPasteBoard(){
this.$refs.pasteBoard.focus();
},
onCodeChange(codemirror){
//codemirror.showHint();
//console.log(code);
}
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
.history/src/views/Editor/behavior-editor/MetaEditorDialog_20191203180414.vue deleted 100644 → 0
View file @ 79d92895
<template>
<el-dialog :title="$t('Meta Editor')" width="80%" :visible.sync="visible"
:close-on-click-modal="false"
:close-on-press-escape="false"
:show-close="false"
:append-to-body="true">
<div class="meta-editor-wrapper">
<el-form ref="form" v-if="meta" :model="meta" :rules="rules" :show-message="false" class="info-editor" size="mini" label-position="right" label-width="70px" @submit.native.prevent>
<template>
<el-form-item prop="id" :label="$t('ID')">
<el-input v-model="meta.id" :placeholder="$t('ID')" :readonly="!editable"/>
</el-form-item>
<el-form-item prop="name" :label="$t('Name')">
<el-input v-model="meta.name" :placeholder="$t('Name')" :readonly="!editable"/>
</el-form-item>
<el-form-item prop="desc" :label="$t('Desc')">
<el-input v-model="meta.desc" :placeholder="$t('Description')" :readonly="!editable"/>
</el-form-item>
<!--<el-form-item prop="type" label="Type">
<el-input v-model="meta.type" :placeholder="$t('Type')" :readonly="!editable"/>
</el-form-item>
<el-form-item prop="group" label="Group">
<el-input v-model="meta.group" :placeholder="$t('Group')" :readonly="!editable"/>
</el-form-item>-->
<el-form-item :label="$t('Props')">
<el-link :underline="false" @click="onClickEditProps" :disabled="!editable">
<template v-if="Object.keys(meta.props).length">
<el-tag type="success" size="mini" v-for="(option, key) in meta.props" :key="key">{{key}}</el-tag>
</template>
<template v-else>{{$t('Empty')}}</template>
</el-link>
</el-form-item>
<el-form-item :label="$t('Output')">
<div style="display: flex;flex: 1;">
<el-select style="flex: 1;" v-model="meta.output" :disabled="!editable" allow-create filterable multiple
:placeholder="$t('Output')"/>
</div>
</el-form-item>
</template>
</el-form>
<div style="margin-top: 5px;">
<el-tag v-for="(item, key) in exposeVariables" :key="key" size="mini">{{item}}</el-tag>
</div>
<!--<el-input v-if="meta" class="script-editor" :readonly=" !editable" type="textarea" :placeholder="$t('Code')"
v-model="meta.script"></el-input>-->
<codemirror ref="codeEditor" v-if="meta"
v-model="meta.script"
:options="cmOptions"
@cursorActivity="onCodeChange"
>
</codemirror>
</div>
<div slot="footer" class="dialog-footer">
<div class="button-bar">
<el-button-group style="margin-right: 20px;">
<el-button size="mini" plain @click="copyMeta">CopyMeta</el-button>
<el-popover>
<div ref="pasteBoard" @paste="onPaste">Click and Ctrl+V</div>
<el-button size="mini" slot="reference" plain @click="pasteMeta">PasteMeta</el-button>
</el-popover>
</el-button-group>
<el-button size="mini" plain @click="cancel">{{$t('Cancel')}}</el-button>
<el-button size="mini" plain @click="save">{{$t('Save')}}</el-button>
</div>
</div>
<props-editor-dialog ref="propsEditorDialog"/>
</el-dialog>
</template>
<script>
import ElFormItem from "./inputs/form-item";
import PropsEditorDialog from "./PropsEditorDialog";
import {codemirror} from "vue-codemirror";
import copy from 'copy-to-clipboard'
import {clonePureObj} from "../../../utils";
import 'codemirror/mode/javascript/javascript.js'
import 'codemirror/lib/codemirror.css'
import 'codemirror/theme/monokai.css'
import 'codemirror/addon/edit/closebrackets.js'
import 'codemirror/addon/hint/show-hint.js'
import 'codemirror/addon/hint/show-hint.css'
import 'codemirror/addon/hint/javascript-hint.js'
const exposeVariables = ['args', 'props', 'target', 'global', 'vm', 'engine'];
export default {
name: "MetaEditorDialog",
components: {PropsEditorDialog, ElFormItem, codemirror},
data() {
return {
visible: false,
meta: null,
propsEditorVisible: false,
exposeVariables,
rules: {
id: [
{ required: true, trigger: 'blur' },
],
name: [
{ required: true, trigger: 'blur' }
],
},
cmOptions: {
tabSize: 2,
mode: 'text/javascript',
styleActiveLine: true,
theme: 'default',
lineNumbers: true,
line: true,
matchBrackets: true,
autoCloseBrackets: true,
}
}
},
mounted(){
},
computed: {
editable() {
return this.meta;// && this.meta.type !== 'builtin';
},
props() {
return Object.keys(this.meta.props).join(',')
},
},
methods: {
edit(meta) {
this.visible = true;
this.meta = clonePureObj(meta);
this.oldMetaID = this.meta.id;
},
onClickEditProps() {
this.$refs.propsEditorDialog.edit(this.meta.props);
},
save() {
this.$refs.form.validate((valid) => {
if (valid) {
if (this.oldMetaID !== this.meta.id && this.$store.getters.metaIDExists(this.meta.id)) {
this.$alert(this.$t('This Meta ID is in use, can not save'), this.$t('Alert'))
.catch((e) => {
});
} else {
this.$emit('input', this.meta);
this.visible = false;
}
} else {
return false;
}
});
},
cancel() {
this.visible = false;
},
copyMeta() {
copy(JSON.stringify(this.meta));
},
pasteMeta() {
//setTimeout(this.focusPasteBoard, 1000, this);
},
onPaste(e) {
let metaStr = e.clipboardData.getData("Text");
if(metaStr){
try {
let meta = JSON.parse(metaStr);
this.meta = meta;
}catch (e) {
}
}
},
focusPasteBoard(){
this.$refs.pasteBoard.focus();
},
onCodeChange(codemirror){
//codemirror.showHint();
//console.log(code);
}
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
.history/src/views/Editor/behavior-editor/MetaEditorDialog_20191203180454.vue deleted 100644 → 0
View file @ 79d92895
<template>
<el-dialog :title="$t('Meta Editor')" width="80%" :visible.sync="visible"
:close-on-click-modal="false"
:close-on-press-escape="false"
:show-close="false"
:append-to-body="true">
<div class="meta-editor-wrapper">
<el-form ref="form" v-if="meta" :model="meta" :rules="rules" :show-message="false" class="info-editor" size="mini" label-position="right" label-width="70px" @submit.native.prevent>
<template>
<el-form-item prop="id" :label="$t('ID')">
<el-input v-model="meta.id" :placeholder="$t('ID')" :readonly="!editable"/>
</el-form-item>
<el-form-item prop="name" :label="$t('Name')">
<el-input v-model="meta.name" :placeholder="$t('Name')" :readonly="!editable"/>
</el-form-item>
<el-form-item prop="desc" :label="$t('Desc')">
<el-input v-model="meta.desc" :placeholder="$t('Description')" :readonly="!editable"/>
</el-form-item>
<!--<el-form-item prop="type" label="Type">
<el-input v-model="meta.type" :placeholder="$t('Type')" :readonly="!editable"/>
</el-form-item>
<el-form-item prop="group" label="Group">
<el-input v-model="meta.group" :placeholder="$t('Group')" :readonly="!editable"/>
</el-form-item>-->
<el-form-item :label="$t('Props')">
<el-link :underline="false" @click="onClickEditProps" :disabled="!editable">
<template v-if="Object.keys(meta.props).length">
<el-tag type="success" size="mini" v-for="(option, key) in meta.props" :key="key">{{key}}</el-tag>
</template>
<template v-else>{{$t('Empty')}}</template>
</el-link>
</el-form-item>
<el-form-item :label="$t('Output')">
<div style="display: flex;flex: 1;">
<el-select style="flex: 1;" v-model="meta.output" :disabled="!editable" allow-create filterable multiple
:placeholder="$t('Output')"/>
</div>
</el-form-item>
</template>
</el-form>
<div style="margin-top: 5px;">
<el-tag v-for="(item, key) in exposeVariables" :key="key" size="mini">{{item}}</el-tag>
</div>
<!--<el-input v-if="meta" class="script-editor" :readonly=" !editable" type="textarea" :placeholder="$t('Code')"
v-model="meta.script"></el-input>-->
<codemirror ref="codeEditor" v-if="meta"
v-model="meta.script"
:options="cmOptions"
@cursorActivity="onCodeChange"
>
</codemirror>
</div>
<div slot="footer" class="dialog-footer">
<div class="button-bar">
<el-button-group style="margin-right: 20px;">
<el-button size="mini" plain @click="copyMeta">CopyMeta</el-button>
<el-popover>
<div ref="pasteBoard" @paste="onPaste">Click and Ctrl+V</div>
<el-button size="mini" slot="reference" plain @click="pasteMeta">PasteMeta</el-button>
</el-popover>
</el-button-group>
<el-button size="mini" plain @click="cancel">{{$t('Cancel')}}</el-button>
<el-button size="mini" plain @click="save">{{$t('Save')}}</el-button>
</div>
</div>
<props-editor-dialog ref="propsEditorDialog"/>
</el-dialog>
</template>
<script>
import ElFormItem from "./inputs/form-item";
import PropsEditorDialog from "./PropsEditorDialog";
import {codemirror} from "vue-codemirror";
import copy from 'copy-to-clipboard'
import {clonePureObj} from "../../../utils";
import 'codemirror/mode/javascript/javascript.js'
import 'codemirror/lib/codemirror.css'
import 'codemirror/theme/monokai.css'
import 'codemirror/addon/edit/closebrackets.js'
import 'codemirror/addon/hint/show-hint.js'
import 'codemirror/addon/hint/show-hint.css'
import 'codemirror/addon/hint/javascript-hint.js'
const exposeVariables = ['args', 'props', 'target', 'global', 'vm', 'engine'];
export default {
name: "MetaEditorDialog",
components: {PropsEditorDialog, ElFormItem, codemirror},
data() {
return {
visible: false,
meta: null,
propsEditorVisible: false,
exposeVariables,
rules: {
id: [
{ required: true, trigger: 'blur' },
],
name: [
{ required: true, trigger: 'blur' }
],
},
cmOptions: {
tabSize: 2,
mode: 'text/javascript',
styleActiveLine: true,
theme: 'default',
lineNumbers: true,
line: true,
matchBrackets: true,
autoCloseBrackets: true,
}
}
},
mounted(){
},
computed: {
editable() {
return this.meta;// && this.meta.type !== 'builtin';
},
props() {
return Object.keys(this.meta.props).join(',')
},
},
methods: {
edit(meta) {
this.visible = true;
this.meta = clonePureObj(meta);
this.oldMetaID = this.meta.id;
},
onClickEditProps() {
this.$refs.propsEditorDialog.edit(this.meta.props);
},
save() {
this.$refs.form.validate((valid) => {
if (valid) {
if (this.oldMetaID !== this.meta.id && this.$store.getters.metaIDExists(this.meta.id)) {
this.$alert(this.$t('This Meta ID is in use, can not save'), this.$t('Alert'))
.catch((e) => {
});
} else {
this.$emit('input', this.meta);
alert(1)
//this.visible = false;
}
} else {
return false;
}
});
},
cancel() {
this.visible = false;
},
copyMeta() {
copy(JSON.stringify(this.meta));
},
pasteMeta() {
//setTimeout(this.focusPasteBoard, 1000, this);
},
onPaste(e) {
let metaStr = e.clipboardData.getData("Text");
if(metaStr){
try {
let meta = JSON.parse(metaStr);
this.meta = meta;
}catch (e) {
}
}
},
focusPasteBoard(){
this.$refs.pasteBoard.focus();
},
onCodeChange(codemirror){
//codemirror.showHint();
//console.log(code);
}
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
.history/src/views/Editor/behavior-editor/MetaEditorDialog_20191203191029.vue deleted 100644 → 0
View file @ 79d92895
<template>
<el-dialog :title="$t('Meta Editor')" width="80%" :visible.sync="visible"
:close-on-click-modal="false"
:close-on-press-escape="false"
:show-close="false"
:append-to-body="true">
<div class="meta-editor-wrapper">
<el-form ref="form" v-if="meta" :model="meta" :rules="rules" :show-message="false" class="info-editor" size="mini" label-position="right" label-width="70px" @submit.native.prevent>
<template>
<el-form-item prop="id" :label="$t('ID')">
<el-input v-model="meta.id" :placeholder="$t('ID')" :readonly="!editable"/>
</el-form-item>
<el-form-item prop="name" :label="$t('Name')">
<el-input v-model="meta.name" :placeholder="$t('Name')" :readonly="!editable"/>
</el-form-item>
<el-form-item prop="desc" :label="$t('Desc')">
<el-input v-model="meta.desc" :placeholder="$t('Description')" :readonly="!editable"/>
</el-form-item>
<!--<el-form-item prop="type" label="Type">
<el-input v-model="meta.type" :placeholder="$t('Type')" :readonly="!editable"/>
</el-form-item>
<el-form-item prop="group" label="Group">
<el-input v-model="meta.group" :placeholder="$t('Group')" :readonly="!editable"/>
</el-form-item>-->
<el-form-item :label="$t('Props')">
<el-link :underline="false" @click="onClickEditProps" :disabled="!editable">
<template v-if="Object.keys(meta.props).length">
<el-tag type="success" size="mini" v-for="(option, key) in meta.props" :key="key">{{key}}</el-tag>
</template>
<template v-else>{{$t('Empty')}}</template>
</el-link>
</el-form-item>
<el-form-item :label="$t('Output')">
<div style="display: flex;flex: 1;">
<el-select style="flex: 1;" v-model="meta.output" :disabled="!editable" allow-create filterable multiple
:placeholder="$t('Output')"/>
</div>
</el-form-item>
</template>
</el-form>
<div style="margin-top: 5px;">
<el-tag v-for="(item, key) in exposeVariables" :key="key" size="mini">{{item}}</el-tag>
</div>
<!--<el-input v-if="meta" class="script-editor" :readonly=" !editable" type="textarea" :placeholder="$t('Code')"
v-model="meta.script"></el-input>-->
<codemirror ref="codeEditor" v-if="meta"
v-model="meta.script"
:options="cmOptions"
@cursorActivity="onCodeChange"
>
</codemirror>
</div>
<div slot="footer" class="dialog-footer">
<div class="button-bar">
<el-button-group style="margin-right: 20px;">
<el-button size="mini" plain @click="copyMeta">CopyMeta</el-button>
<el-popover>
<div ref="pasteBoard" @paste="onPaste">Click and Ctrl+V</div>
<el-button size="mini" slot="reference" plain @click="pasteMeta">PasteMeta</el-button>
</el-popover>
</el-button-group>
<el-button size="mini" plain @click="cancel">{{$t('Cancel')}}</el-button>
<el-button size="mini" plain @click="save">{{$t('Save')}}</el-button>
</div>
</div>
<props-editor-dialog ref="propsEditorDialog"/>
</el-dialog>
</template>
<script>
import ElFormItem from "./inputs/form-item";
import PropsEditorDialog from "./PropsEditorDialog";
import {codemirror} from "vue-codemirror";
import copy from 'copy-to-clipboard'
import {clonePureObj} from "../../../utils";
import 'codemirror/mode/javascript/javascript.js'
import 'codemirror/lib/codemirror.css'
import 'codemirror/theme/monokai.css'
import 'codemirror/addon/edit/closebrackets.js'
import 'codemirror/addon/hint/show-hint.js'
import 'codemirror/addon/hint/show-hint.css'
import 'codemirror/addon/hint/javascript-hint.js'
const exposeVariables = ['args', 'props', 'target', 'global', 'vm', 'engine'];
export default {
name: "MetaEditorDialog",
components: {PropsEditorDialog, ElFormItem, codemirror},
data() {
return {
visible: false,
meta: null,
propsEditorVisible: false,
exposeVariables,
rules: {
id: [
{ required: true, trigger: 'blur' },
],
name: [
{ required: true, trigger: 'blur' }
],
},
cmOptions: {
tabSize: 2,
mode: 'text/javascript',
styleActiveLine: true,
theme: 'default',
lineNumbers: true,
line: true,
matchBrackets: true,
autoCloseBrackets: true,
}
}
},
mounted(){
},
computed: {
editable() {
return this.meta;// && this.meta.type !== 'builtin';
},
props() {
return Object.keys(this.meta.props).join(',')
},
},
methods: {
edit(meta) {
this.visible = true;
this.meta = clonePureObj(meta);
this.oldMetaID = this.meta.id;
},
onClickEditProps() {
this.$refs.propsEditorDialog.edit(this.meta.props);
},
save() {
this.$refs.form.validate((valid) => {
if (valid) {
if (this.oldMetaID !== this.meta.id && this.$store.getters.metaIDExists(this.meta.id)) {
this.$alert(this.$t('This Meta ID is in use, can not save'), this.$t('Alert'))
.catch((e) => {
});
} else {
this.$emit('input', this.meta);
//alert(1)
//this.visible = false;
events.$emit('behaviorSave',()=>{
this.onSave()
});
}
} else {
return false;
}
});
},
cancel() {
this.visible = false;
},
copyMeta() {
copy(JSON.stringify(this.meta));
},
pasteMeta() {
//setTimeout(this.focusPasteBoard, 1000, this);
},
onPaste(e) {
let metaStr = e.clipboardData.getData("Text");
if(metaStr){
try {
let meta = JSON.parse(metaStr);
this.meta = meta;
}catch (e) {
}
}
},
focusPasteBoard(){
this.$refs.pasteBoard.focus();
},
onCodeChange(codemirror){
//codemirror.showHint();
//console.log(code);
}
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
.history/src/views/Editor/behavior-editor/MetaEditorDialog_20191203191038.vue deleted 100644 → 0
View file @ 79d92895
<template>
<el-dialog :title="$t('Meta Editor')" width="80%" :visible.sync="visible"
:close-on-click-modal="false"
:close-on-press-escape="false"
:show-close="false"
:append-to-body="true">
<div class="meta-editor-wrapper">
<el-form ref="form" v-if="meta" :model="meta" :rules="rules" :show-message="false" class="info-editor" size="mini" label-position="right" label-width="70px" @submit.native.prevent>
<template>
<el-form-item prop="id" :label="$t('ID')">
<el-input v-model="meta.id" :placeholder="$t('ID')" :readonly="!editable"/>
</el-form-item>
<el-form-item prop="name" :label="$t('Name')">
<el-input v-model="meta.name" :placeholder="$t('Name')" :readonly="!editable"/>
</el-form-item>
<el-form-item prop="desc" :label="$t('Desc')">
<el-input v-model="meta.desc" :placeholder="$t('Description')" :readonly="!editable"/>
</el-form-item>
<!--<el-form-item prop="type" label="Type">
<el-input v-model="meta.type" :placeholder="$t('Type')" :readonly="!editable"/>
</el-form-item>
<el-form-item prop="group" label="Group">
<el-input v-model="meta.group" :placeholder="$t('Group')" :readonly="!editable"/>
</el-form-item>-->
<el-form-item :label="$t('Props')">
<el-link :underline="false" @click="onClickEditProps" :disabled="!editable">
<template v-if="Object.keys(meta.props).length">
<el-tag type="success" size="mini" v-for="(option, key) in meta.props" :key="key">{{key}}</el-tag>
</template>
<template v-else>{{$t('Empty')}}</template>
</el-link>
</el-form-item>
<el-form-item :label="$t('Output')">
<div style="display: flex;flex: 1;">
<el-select style="flex: 1;" v-model="meta.output" :disabled="!editable" allow-create filterable multiple
:placeholder="$t('Output')"/>
</div>
</el-form-item>
</template>
</el-form>
<div style="margin-top: 5px;">
<el-tag v-for="(item, key) in exposeVariables" :key="key" size="mini">{{item}}</el-tag>
</div>
<!--<el-input v-if="meta" class="script-editor" :readonly=" !editable" type="textarea" :placeholder="$t('Code')"
v-model="meta.script"></el-input>-->
<codemirror ref="codeEditor" v-if="meta"
v-model="meta.script"
:options="cmOptions"
@cursorActivity="onCodeChange"
>
</codemirror>
</div>
<div slot="footer" class="dialog-footer">
<div class="button-bar">
<el-button-group style="margin-right: 20px;">
<el-button size="mini" plain @click="copyMeta">CopyMeta</el-button>
<el-popover>
<div ref="pasteBoard" @paste="onPaste">Click and Ctrl+V</div>
<el-button size="mini" slot="reference" plain @click="pasteMeta">PasteMeta</el-button>
</el-popover>
</el-button-group>
<el-button size="mini" plain @click="cancel">{{$t('Cancel')}}</el-button>
<el-button size="mini" plain @click="save">{{$t('Save')}}</el-button>
</div>
</div>
<props-editor-dialog ref="propsEditorDialog"/>
</el-dialog>
</template>
<script>
import ElFormItem from "./inputs/form-item";
import PropsEditorDialog from "./PropsEditorDialog";
import {codemirror} from "vue-codemirror";
import copy from 'copy-to-clipboard'
import {clonePureObj} from "../../../utils";
import 'codemirror/mode/javascript/javascript.js'
import 'codemirror/lib/codemirror.css'
import 'codemirror/theme/monokai.css'
import 'codemirror/addon/edit/closebrackets.js'
import 'codemirror/addon/hint/show-hint.js'
import 'codemirror/addon/hint/show-hint.css'
import 'codemirror/addon/hint/javascript-hint.js'
const exposeVariables = ['args', 'props', 'target', 'global', 'vm', 'engine'];
export default {
name: "MetaEditorDialog",
components: {PropsEditorDialog, ElFormItem, codemirror},
data() {
return {
visible: false,
meta: null,
propsEditorVisible: false,
exposeVariables,
rules: {
id: [
{ required: true, trigger: 'blur' },
],
name: [
{ required: true, trigger: 'blur' }
],
},
cmOptions: {
tabSize: 2,
mode: 'text/javascript',
styleActiveLine: true,
theme: 'default',
lineNumbers: true,
line: true,
matchBrackets: true,
autoCloseBrackets: true,
}
}
},
mounted(){
},
computed: {
editable() {
return this.meta;// && this.meta.type !== 'builtin';
},
props() {
return Object.keys(this.meta.props).join(',')
},
},
methods: {
edit(meta) {
this.visible = true;
this.meta = clonePureObj(meta);
this.oldMetaID = this.meta.id;
},
onClickEditProps() {
this.$refs.propsEditorDialog.edit(this.meta.props);
},
save() {
this.$refs.form.validate((valid) => {
if (valid) {
if (this.oldMetaID !== this.meta.id && this.$store.getters.metaIDExists(this.meta.id)) {
this.$alert(this.$t('This Meta ID is in use, can not save'), this.$t('Alert'))
.catch((e) => {
});
} else {
this.$emit('input', this.meta);
//alert(1)
//this.visible = false;
events.$emit('behaviorSave')
}
} else {
return false;
}
});
},
cancel() {
this.visible = false;
},
copyMeta() {
copy(JSON.stringify(this.meta));
},
pasteMeta() {
//setTimeout(this.focusPasteBoard, 1000, this);
},
onPaste(e) {
let metaStr = e.clipboardData.getData("Text");
if(metaStr){
try {
let meta = JSON.parse(metaStr);
this.meta = meta;
}catch (e) {
}
}
},
focusPasteBoard(){
this.$refs.pasteBoard.focus();
},
onCodeChange(codemirror){
//codemirror.showHint();
//console.log(code);
}
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
.history/src/views/Editor/behavior-editor/MetaEditorDialog_20191203191053.vue deleted 100644 → 0
View file @ 79d92895
<template>
<el-dialog :title="$t('Meta Editor')" width="80%" :visible.sync="visible"
:close-on-click-modal="false"
:close-on-press-escape="false"
:show-close="false"
:append-to-body="true">
<div class="meta-editor-wrapper">
<el-form ref="form" v-if="meta" :model="meta" :rules="rules" :show-message="false" class="info-editor" size="mini" label-position="right" label-width="70px" @submit.native.prevent>
<template>
<el-form-item prop="id" :label="$t('ID')">
<el-input v-model="meta.id" :placeholder="$t('ID')" :readonly="!editable"/>
</el-form-item>
<el-form-item prop="name" :label="$t('Name')">
<el-input v-model="meta.name" :placeholder="$t('Name')" :readonly="!editable"/>
</el-form-item>
<el-form-item prop="desc" :label="$t('Desc')">
<el-input v-model="meta.desc" :placeholder="$t('Description')" :readonly="!editable"/>
</el-form-item>
<!--<el-form-item prop="type" label="Type">
<el-input v-model="meta.type" :placeholder="$t('Type')" :readonly="!editable"/>
</el-form-item>
<el-form-item prop="group" label="Group">
<el-input v-model="meta.group" :placeholder="$t('Group')" :readonly="!editable"/>
</el-form-item>-->
<el-form-item :label="$t('Props')">
<el-link :underline="false" @click="onClickEditProps" :disabled="!editable">
<template v-if="Object.keys(meta.props).length">
<el-tag type="success" size="mini" v-for="(option, key) in meta.props" :key="key">{{key}}</el-tag>
</template>
<template v-else>{{$t('Empty')}}</template>
</el-link>
</el-form-item>
<el-form-item :label="$t('Output')">
<div style="display: flex;flex: 1;">
<el-select style="flex: 1;" v-model="meta.output" :disabled="!editable" allow-create filterable multiple
:placeholder="$t('Output')"/>
</div>
</el-form-item>
</template>
</el-form>
<div style="margin-top: 5px;">
<el-tag v-for="(item, key) in exposeVariables" :key="key" size="mini">{{item}}</el-tag>
</div>
<!--<el-input v-if="meta" class="script-editor" :readonly=" !editable" type="textarea" :placeholder="$t('Code')"
v-model="meta.script"></el-input>-->
<codemirror ref="codeEditor" v-if="meta"
v-model="meta.script"
:options="cmOptions"
@cursorActivity="onCodeChange"
>
</codemirror>
</div>
<div slot="footer" class="dialog-footer">
<div class="button-bar">
<el-button-group style="margin-right: 20px;">
<el-button size="mini" plain @click="copyMeta">CopyMeta</el-button>
<el-popover>
<div ref="pasteBoard" @paste="onPaste">Click and Ctrl+V</div>
<el-button size="mini" slot="reference" plain @click="pasteMeta">PasteMeta</el-button>
</el-popover>
</el-button-group>
<el-button size="mini" plain @click="cancel">{{$t('Cancel')}}</el-button>
<el-button size="mini" plain @click="save">{{$t('Save')}}</el-button>
</div>
</div>
<props-editor-dialog ref="propsEditorDialog"/>
</el-dialog>
</template>
<script>
import ElFormItem from "./inputs/form-item";
import PropsEditorDialog from "./PropsEditorDialog";
import {codemirror} from "vue-codemirror";
import copy from 'copy-to-clipboard'
import {clonePureObj} from "../../../utils";
import 'codemirror/mode/javascript/javascript.js'
import 'codemirror/lib/codemirror.css'
import 'codemirror/theme/monokai.css'
import 'codemirror/addon/edit/closebrackets.js'
import 'codemirror/addon/hint/show-hint.js'
import 'codemirror/addon/hint/show-hint.css'
import 'codemirror/addon/hint/javascript-hint.js'
import events from "@/global-events.js"
const exposeVariables = ['args', 'props', 'target', 'global', 'vm', 'engine'];
export default {
name: "MetaEditorDialog",
components: {PropsEditorDialog, ElFormItem, codemirror},
data() {
return {
visible: false,
meta: null,
propsEditorVisible: false,
exposeVariables,
rules: {
id: [
{ required: true, trigger: 'blur' },
],
name: [
{ required: true, trigger: 'blur' }
],
},
cmOptions: {
tabSize: 2,
mode: 'text/javascript',
styleActiveLine: true,
theme: 'default',
lineNumbers: true,
line: true,
matchBrackets: true,
autoCloseBrackets: true,
}
}
},
mounted(){
},
computed: {
editable() {
return this.meta;// && this.meta.type !== 'builtin';
},
props() {
return Object.keys(this.meta.props).join(',')
},
},
methods: {
edit(meta) {
this.visible = true;
this.meta = clonePureObj(meta);
this.oldMetaID = this.meta.id;
},
onClickEditProps() {
this.$refs.propsEditorDialog.edit(this.meta.props);
},
save() {
this.$refs.form.validate((valid) => {
if (valid) {
if (this.oldMetaID !== this.meta.id && this.$store.getters.metaIDExists(this.meta.id)) {
this.$alert(this.$t('This Meta ID is in use, can not save'), this.$t('Alert'))
.catch((e) => {
});
} else {
this.$emit('input', this.meta);
//alert(1)
//this.visible = false;
events.$emit('behaviorSave')
}
} else {
return false;
}
});
},
cancel() {
this.visible = false;
},
copyMeta() {
copy(JSON.stringify(this.meta));
},
pasteMeta() {
//setTimeout(this.focusPasteBoard, 1000, this);
},
onPaste(e) {
let metaStr = e.clipboardData.getData("Text");
if(metaStr){
try {
let meta = JSON.parse(metaStr);
this.meta = meta;
}catch (e) {
}
}
},
focusPasteBoard(){
this.$refs.pasteBoard.focus();
},
onCodeChange(codemirror){
//codemirror.showHint();
//console.log(code);
}
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
.history/src/views/Editor/behavior-editor/MetaEditorDialog_20191203191557.vue deleted 100644 → 0
View file @ 79d92895
<template>
<el-dialog :title="$t('Meta Editor')" width="80%" :visible.sync="visible"
:close-on-click-modal="false"
:close-on-press-escape="false"
:show-close="false"
:append-to-body="true">
<div class="meta-editor-wrapper">
<el-form ref="form" v-if="meta" :model="meta" :rules="rules" :show-message="false" class="info-editor" size="mini" label-position="right" label-width="70px" @submit.native.prevent>
<template>
<el-form-item prop="id" :label="$t('ID')">
<el-input v-model="meta.id" :placeholder="$t('ID')" :readonly="!editable"/>
</el-form-item>
<el-form-item prop="name" :label="$t('Name')">
<el-input v-model="meta.name" :placeholder="$t('Name')" :readonly="!editable"/>
</el-form-item>
<el-form-item prop="desc" :label="$t('Desc')">
<el-input v-model="meta.desc" :placeholder="$t('Description')" :readonly="!editable"/>
</el-form-item>
<!--<el-form-item prop="type" label="Type">
<el-input v-model="meta.type" :placeholder="$t('Type')" :readonly="!editable"/>
</el-form-item>
<el-form-item prop="group" label="Group">
<el-input v-model="meta.group" :placeholder="$t('Group')" :readonly="!editable"/>
</el-form-item>-->
<el-form-item :label="$t('Props')">
<el-link :underline="false" @click="onClickEditProps" :disabled="!editable">
<template v-if="Object.keys(meta.props).length">
<el-tag type="success" size="mini" v-for="(option, key) in meta.props" :key="key">{{key}}</el-tag>
</template>
<template v-else>{{$t('Empty')}}</template>
</el-link>
</el-form-item>
<el-form-item :label="$t('Output')">
<div style="display: flex;flex: 1;">
<el-select style="flex: 1;" v-model="meta.output" :disabled="!editable" allow-create filterable multiple
:placeholder="$t('Output')"/>
</div>
</el-form-item>
</template>
</el-form>
<div style="margin-top: 5px;">
<el-tag v-for="(item, key) in exposeVariables" :key="key" size="mini">{{item}}</el-tag>
</div>
<!--<el-input v-if="meta" class="script-editor" :readonly=" !editable" type="textarea" :placeholder="$t('Code')"
v-model="meta.script"></el-input>-->
<codemirror ref="codeEditor" v-if="meta"
v-model="meta.script"
:options="cmOptions"
@cursorActivity="onCodeChange"
>
</codemirror>
</div>
<div slot="footer" class="dialog-footer">
<div class="button-bar">
<el-button-group style="margin-right: 20px;">
<el-button size="mini" plain @click="copyMeta">CopyMeta</el-button>
<el-popover>
<div ref="pasteBoard" @paste="onPaste">Click and Ctrl+V</div>
<el-button size="mini" slot="reference" plain @click="pasteMeta">PasteMeta</el-button>
</el-popover>
</el-button-group>
<el-button size="mini" plain @click="cancel">{{$t('Cancel')}}</el-button>
<el-button size="mini" plain @click="save">{{$t('Save')}}</el-button>
</div>
</div>
<props-editor-dialog ref="propsEditorDialog"/>
</el-dialog>
</template>
<script>
import ElFormItem from "./inputs/form-item";
import PropsEditorDialog from "./PropsEditorDialog";
import {codemirror} from "vue-codemirror";
import copy from 'copy-to-clipboard'
import {clonePureObj} from "../../../utils";
import 'codemirror/mode/javascript/javascript.js'
import 'codemirror/lib/codemirror.css'
import 'codemirror/theme/monokai.css'
import 'codemirror/addon/edit/closebrackets.js'
import 'codemirror/addon/hint/show-hint.js'
import 'codemirror/addon/hint/show-hint.css'
import 'codemirror/addon/hint/javascript-hint.js'
import events from "@/global-events.js"
const exposeVariables = ['args', 'props', 'target', 'global', 'vm', 'engine'];
export default {
name: "MetaEditorDialog",
components: {PropsEditorDialog, ElFormItem, codemirror},
data() {
return {
visible: false,
meta: null,
propsEditorVisible: false,
exposeVariables,
rules: {
id: [
{ required: true, trigger: 'blur' },
],
name: [
{ required: true, trigger: 'blur' }
],
},
cmOptions: {
tabSize: 2,
mode: 'text/javascript',
styleActiveLine: true,
theme: 'default',
lineNumbers: true,
line: true,
matchBrackets: true,
autoCloseBrackets: true,
}
}
},
mounted(){
},
computed: {
editable() {
return this.meta;// && this.meta.type !== 'builtin';
},
props() {
return Object.keys(this.meta.props).join(',')
},
},
methods: {
edit(meta) {
this.visible = true;
this.meta = clonePureObj(meta);
this.oldMetaID = this.meta.id;
},
onClickEditProps() {
this.$refs.propsEditorDialog.edit(this.meta.props);
},
save() {
this.$refs.form.validate((valid) => {
if (valid) {
if (this.oldMetaID !== this.meta.id && this.$store.getters.metaIDExists(this.meta.id)) {
this.$alert(this.$t('This Meta ID is in use, can not save'), this.$t('Alert'))
.catch((e) => {
});
} else {
this.$emit('input', this.meta);
}
} else {
return false;
}
});
},
cancel() {
this.visible = false;
},
copyMeta() {
copy(JSON.stringify(this.meta));
},
pasteMeta() {
//setTimeout(this.focusPasteBoard, 1000, this);
},
onPaste(e) {
let metaStr = e.clipboardData.getData("Text");
if(metaStr){
try {
let meta = JSON.parse(metaStr);
this.meta = meta;
}catch (e) {
}
}
},
focusPasteBoard(){
this.$refs.pasteBoard.focus();
},
onCodeChange(codemirror){
//codemirror.showHint();
//console.log(code);
}
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
.history/src/views/Editor/behavior-editor/MetaEditorDialog_20191203192658.vue deleted 100644 → 0
View file @ 79d92895
<template>
<el-dialog :title="$t('Meta Editor')" width="80%" :visible.sync="visible"
:close-on-click-modal="false"
:close-on-press-escape="false"
:show-close="false"
:append-to-body="true">
<div class="meta-editor-wrapper">
<el-form ref="form" v-if="meta" :model="meta" :rules="rules" :show-message="false" class="info-editor" size="mini" label-position="right" label-width="70px" @submit.native.prevent>
<template>
<el-form-item prop="id" :label="$t('ID')">
<el-input v-model="meta.id" :placeholder="$t('ID')" :readonly="!editable"/>
</el-form-item>
<el-form-item prop="name" :label="$t('Name')">
<el-input v-model="meta.name" :placeholder="$t('Name')" :readonly="!editable"/>
</el-form-item>
<el-form-item prop="desc" :label="$t('Desc')">
<el-input v-model="meta.desc" :placeholder="$t('Description')" :readonly="!editable"/>
</el-form-item>
<!--<el-form-item prop="type" label="Type">
<el-input v-model="meta.type" :placeholder="$t('Type')" :readonly="!editable"/>
</el-form-item>
<el-form-item prop="group" label="Group">
<el-input v-model="meta.group" :placeholder="$t('Group')" :readonly="!editable"/>
</el-form-item>-->
<el-form-item :label="$t('Props')">
<el-link :underline="false" @click="onClickEditProps" :disabled="!editable">
<template v-if="Object.keys(meta.props).length">
<el-tag type="success" size="mini" v-for="(option, key) in meta.props" :key="key">{{key}}</el-tag>
</template>
<template v-else>{{$t('Empty')}}</template>
</el-link>
</el-form-item>
<el-form-item :label="$t('Output')">
<div style="display: flex;flex: 1;">
<el-select style="flex: 1;" v-model="meta.output" :disabled="!editable" allow-create filterable multiple
:placeholder="$t('Output')"/>
</div>
</el-form-item>
</template>
</el-form>
<div style="margin-top: 5px;">
<el-tag v-for="(item, key) in exposeVariables" :key="key" size="mini">{{item}}</el-tag>
</div>
<!--<el-input v-if="meta" class="script-editor" :readonly=" !editable" type="textarea" :placeholder="$t('Code')"
v-model="meta.script"></el-input>-->
<codemirror ref="codeEditor" v-if="meta"
v-model="meta.script"
:options="cmOptions"
@cursorActivity="onCodeChange"
>
</codemirror>
</div>
<div slot="footer" class="dialog-footer">
<div class="button-bar">
<el-button-group style="margin-right: 20px;">
<el-button size="mini" plain @click="copyMeta">CopyMeta</el-button>
<el-popover>
<div ref="pasteBoard" @paste="onPaste">Click and Ctrl+V</div>
<el-button size="mini" slot="reference" plain @click="pasteMeta">PasteMeta</el-button>
</el-popover>
</el-button-group>
<el-button size="mini" plain @click="cancel">{{$t('Cancel')}}</el-button>
<el-button size="mini" plain @click="save">{{$t('Save')}}</el-button>
</div>
</div>
<props-editor-dialog ref="propsEditorDialog"/>
</el-dialog>
</template>
<script>
import ElFormItem from "./inputs/form-item";
import PropsEditorDialog from "./PropsEditorDialog";
import {codemirror} from "vue-codemirror";
import copy from 'copy-to-clipboard'
import {clonePureObj} from "../../../utils";
import 'codemirror/mode/javascript/javascript.js'
import 'codemirror/lib/codemirror.css'
import 'codemirror/theme/monokai.css'
import 'codemirror/addon/edit/closebrackets.js'
import 'codemirror/addon/hint/show-hint.js'
import 'codemirror/addon/hint/show-hint.css'
import 'codemirror/addon/hint/javascript-hint.js'
import events from "@/global-events.js"
const exposeVariables = ['args', 'props', 'target', 'global', 'vm', 'engine'];
export default {
name: "MetaEditorDialog",
components: {PropsEditorDialog, ElFormItem, codemirror},
data() {
return {
visible: false,
meta: null,
propsEditorVisible: false,
exposeVariables,
rules: {
id: [
{ required: true, trigger: 'blur' },
],
name: [
{ required: true, trigger: 'blur' }
],
},
cmOptions: {
tabSize: 2,
mode: 'text/javascript',
styleActiveLine: true,
theme: 'default',
lineNumbers: true,
line: true,
matchBrackets: true,
autoCloseBrackets: true,
}
}
},
mounted(){
},
computed: {
editable() {
return this.meta;// && this.meta.type !== 'builtin';
},
props() {
return Object.keys(this.meta.props).join(',')
},
},
methods: {
edit(meta) {
this.visible = true;
this.meta = clonePureObj(meta);
this.oldMetaID = this.meta.id;
},
onClickEditProps() {
this.$refs.propsEditorDialog.edit(this.meta.props);
},
save() {
this.$refs.form.validate((valid) => {
if (valid) {
if (this.oldMetaID !== this.meta.id && this.$store.getters.metaIDExists(this.meta.id)) {
this.$alert(this.$t('This Meta ID is in use, can not save'), this.$t('Alert'))
.catch((e) => {
});
} else {
this.$emit('input', this.meta);
this.visible=false;
}
} else {
return false;
}
});
},
cancel() {
this.visible = false;
},
copyMeta() {
copy(JSON.stringify(this.meta));
},
pasteMeta() {
//setTimeout(this.focusPasteBoard, 1000, this);
},
onPaste(e) {
let metaStr = e.clipboardData.getData("Text");
if(metaStr){
try {
let meta = JSON.parse(metaStr);
this.meta = meta;
}catch (e) {
}
}
},
focusPasteBoard(){
this.$refs.pasteBoard.focus();
},
onCodeChange(codemirror){
//codemirror.showHint();
//console.log(code);
}
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
.history/src/views/Editor/behavior-editor/MetaEditorDialog_20191203194018.vue deleted 100644 → 0
View file @ 79d92895
<template>
<el-dialog :title="$t('Meta Editor')" width="80%" :visible.sync="visible"
:close-on-click-modal="false"
:close-on-press-escape="false"
:show-close="false"
:append-to-body="true">
<div class="meta-editor-wrapper">
<el-form ref="form" v-if="meta" :model="meta" :rules="rules" :show-message="false" class="info-editor" size="mini" label-position="right" label-width="70px" @submit.native.prevent>
<template>
<el-form-item prop="id" :label="$t('ID')">
<el-input v-model="meta.id" :placeholder="$t('ID')" :readonly="!editable"/>
</el-form-item>
<el-form-item prop="name" :label="$t('Name')">
<el-input v-model="meta.name" :placeholder="$t('Name')" :readonly="!editable"/>
</el-form-item>
<el-form-item prop="desc" :label="$t('Desc')">
<el-input v-model="meta.desc" :placeholder="$t('Description')" :readonly="!editable"/>
</el-form-item>
<!--<el-form-item prop="type" label="Type">
<el-input v-model="meta.type" :placeholder="$t('Type')" :readonly="!editable"/>
</el-form-item>
<el-form-item prop="group" label="Group">
<el-input v-model="meta.group" :placeholder="$t('Group')" :readonly="!editable"/>
</el-form-item>-->
<el-form-item :label="$t('Props')">
<el-link :underline="false" @click="onClickEditProps" :disabled="!editable">
<template v-if="Object.keys(meta.props).length">
<el-tag type="success" size="mini" v-for="(option, key) in meta.props" :key="key">{{key}}</el-tag>
</template>
<template v-else>{{$t('Empty')}}</template>
</el-link>
</el-form-item>
<el-form-item :label="$t('Output')">
<div style="display: flex;flex: 1;">
<el-select style="flex: 1;" v-model="meta.output" :disabled="!editable" allow-create filterable multiple
:placeholder="$t('Output')"/>
</div>
</el-form-item>
</template>
</el-form>
<div style="margin-top: 5px;">
<el-tag v-for="(item, key) in exposeVariables" :key="key" size="mini">{{item}}</el-tag>
</div>
<!--<el-input v-if="meta" class="script-editor" :readonly=" !editable" type="textarea" :placeholder="$t('Code')"
v-model="meta.script"></el-input>-->
<codemirror ref="codeEditor" v-if="meta"
v-model="meta.script"
:options="cmOptions"
@cursorActivity="onCodeChange"
>
</codemirror>
</div>
<div slot="footer" class="dialog-footer">
<div class="button-bar">
<el-button-group style="margin-right: 20px;">
<el-button size="mini" plain @click="copyMeta">CopyMeta</el-button>
<el-popover>
<div ref="pasteBoard" @paste="onPaste">Click and Ctrl+V</div>
<el-button size="mini" slot="reference" plain @click="pasteMeta">PasteMeta</el-button>
</el-popover>
</el-button-group>
<el-button size="mini" plain @click="cancel">{{$t('Cancel')}}</el-button>
<el-button size="mini" plain @click="save">{{$t('SaveAndPreview')}}</el-button>
<el-button size="mini" plain @click="save">{{$t('Save')}}</el-button>
</div>
</div>
<props-editor-dialog ref="propsEditorDialog"/>
</el-dialog>
</template>
<script>
import ElFormItem from "./inputs/form-item";
import PropsEditorDialog from "./PropsEditorDialog";
import {codemirror} from "vue-codemirror";
import copy from 'copy-to-clipboard'
import {clonePureObj} from "../../../utils";
import 'codemirror/mode/javascript/javascript.js'
import 'codemirror/lib/codemirror.css'
import 'codemirror/theme/monokai.css'
import 'codemirror/addon/edit/closebrackets.js'
import 'codemirror/addon/hint/show-hint.js'
import 'codemirror/addon/hint/show-hint.css'
import 'codemirror/addon/hint/javascript-hint.js'
import events from "@/global-events.js"
const exposeVariables = ['args', 'props', 'target', 'global', 'vm', 'engine'];
export default {
name: "MetaEditorDialog",
components: {PropsEditorDialog, ElFormItem, codemirror},
data() {
return {
visible: false,
meta: null,
propsEditorVisible: false,
exposeVariables,
rules: {
id: [
{ required: true, trigger: 'blur' },
],
name: [
{ required: true, trigger: 'blur' }
],
},
cmOptions: {
tabSize: 2,
mode: 'text/javascript',
styleActiveLine: true,
theme: 'default',
lineNumbers: true,
line: true,
matchBrackets: true,
autoCloseBrackets: true,
}
}
},
mounted(){
},
computed: {
editable() {
return this.meta;// && this.meta.type !== 'builtin';
},
props() {
return Object.keys(this.meta.props).join(',')
},
},
methods: {
edit(meta) {
this.visible = true;
this.meta = clonePureObj(meta);
this.oldMetaID = this.meta.id;
},
onClickEditProps() {
this.$refs.propsEditorDialog.edit(this.meta.props);
},
save() {
this.$refs.form.validate((valid) => {
if (valid) {
if (this.oldMetaID !== this.meta.id && this.$store.getters.metaIDExists(this.meta.id)) {
this.$alert(this.$t('This Meta ID is in use, can not save'), this.$t('Alert'))
.catch((e) => {
});
} else {
this.$emit('input', this.meta);
this.visible=false;
}
} else {
return false;
}
});
},
cancel() {
this.visible = false;
},
copyMeta() {
copy(JSON.stringify(this.meta));
},
pasteMeta() {
//setTimeout(this.focusPasteBoard, 1000, this);
},
onPaste(e) {
let metaStr = e.clipboardData.getData("Text");
if(metaStr){
try {
let meta = JSON.parse(metaStr);
this.meta = meta;
}catch (e) {
}
}
},
focusPasteBoard(){
this.$refs.pasteBoard.focus();
},
onCodeChange(codemirror){
//codemirror.showHint();
//console.log(code);
}
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
.history/src/views/Editor/behavior-editor/MetaEditorDialog_20191203194124.vue deleted 100644 → 0
View file @ 79d92895
<template>
<el-dialog :title="$t('Meta Editor')" width="80%" :visible.sync="visible"
:close-on-click-modal="false"
:close-on-press-escape="false"
:show-close="false"
:append-to-body="true">
<div class="meta-editor-wrapper">
<el-form ref="form" v-if="meta" :model="meta" :rules="rules" :show-message="false" class="info-editor" size="mini" label-position="right" label-width="70px" @submit.native.prevent>
<template>
<el-form-item prop="id" :label="$t('ID')">
<el-input v-model="meta.id" :placeholder="$t('ID')" :readonly="!editable"/>
</el-form-item>
<el-form-item prop="name" :label="$t('Name')">
<el-input v-model="meta.name" :placeholder="$t('Name')" :readonly="!editable"/>
</el-form-item>
<el-form-item prop="desc" :label="$t('Desc')">
<el-input v-model="meta.desc" :placeholder="$t('Description')" :readonly="!editable"/>
</el-form-item>
<!--<el-form-item prop="type" label="Type">
<el-input v-model="meta.type" :placeholder="$t('Type')" :readonly="!editable"/>
</el-form-item>
<el-form-item prop="group" label="Group">
<el-input v-model="meta.group" :placeholder="$t('Group')" :readonly="!editable"/>
</el-form-item>-->
<el-form-item :label="$t('Props')">
<el-link :underline="false" @click="onClickEditProps" :disabled="!editable">
<template v-if="Object.keys(meta.props).length">
<el-tag type="success" size="mini" v-for="(option, key) in meta.props" :key="key">{{key}}</el-tag>
</template>
<template v-else>{{$t('Empty')}}</template>
</el-link>
</el-form-item>
<el-form-item :label="$t('Output')">
<div style="display: flex;flex: 1;">
<el-select style="flex: 1;" v-model="meta.output" :disabled="!editable" allow-create filterable multiple
:placeholder="$t('Output')"/>
</div>
</el-form-item>
</template>
</el-form>
<div style="margin-top: 5px;">
<el-tag v-for="(item, key) in exposeVariables" :key="key" size="mini">{{item}}</el-tag>
</div>
<!--<el-input v-if="meta" class="script-editor" :readonly=" !editable" type="textarea" :placeholder="$t('Code')"
v-model="meta.script"></el-input>-->
<codemirror ref="codeEditor" v-if="meta"
v-model="meta.script"
:options="cmOptions"
@cursorActivity="onCodeChange"
>
</codemirror>
</div>
<div slot="footer" class="dialog-footer">
<div class="button-bar">
<el-button-group style="margin-right: 20px;">
<el-button size="mini" plain @click="copyMeta">CopyMeta</el-button>
<el-popover>
<div ref="pasteBoard" @paste="onPaste">Click and Ctrl+V</div>
<el-button size="mini" slot="reference" plain @click="pasteMeta">PasteMeta</el-button>
</el-popover>
</el-button-group>
<el-button size="mini" plain @click="cancel">{{$t('Cancel')}}</el-button>
<el-button size="mini" plain @click="save">{{$t('Save And Preview')}}</el-button>
<el-button size="mini" plain @click="save">{{$t('Save')}}</el-button>
</div>
</div>
<props-editor-dialog ref="propsEditorDialog"/>
</el-dialog>
</template>
<script>
import ElFormItem from "./inputs/form-item";
import PropsEditorDialog from "./PropsEditorDialog";
import {codemirror} from "vue-codemirror";
import copy from 'copy-to-clipboard'
import {clonePureObj} from "../../../utils";
import 'codemirror/mode/javascript/javascript.js'
import 'codemirror/lib/codemirror.css'
import 'codemirror/theme/monokai.css'
import 'codemirror/addon/edit/closebrackets.js'
import 'codemirror/addon/hint/show-hint.js'
import 'codemirror/addon/hint/show-hint.css'
import 'codemirror/addon/hint/javascript-hint.js'
import events from "@/global-events.js"
const exposeVariables = ['args', 'props', 'target', 'global', 'vm', 'engine'];
export default {
name: "MetaEditorDialog",
components: {PropsEditorDialog, ElFormItem, codemirror},
data() {
return {
visible: false,
meta: null,
propsEditorVisible: false,
exposeVariables,
rules: {
id: [
{ required: true, trigger: 'blur' },
],
name: [
{ required: true, trigger: 'blur' }
],
},
cmOptions: {
tabSize: 2,
mode: 'text/javascript',
styleActiveLine: true,
theme: 'default',
lineNumbers: true,
line: true,
matchBrackets: true,
autoCloseBrackets: true,
}
}
},
mounted(){
},
computed: {
editable() {
return this.meta;// && this.meta.type !== 'builtin';
},
props() {
return Object.keys(this.meta.props).join(',')
},
},
methods: {
edit(meta) {
this.visible = true;
this.meta = clonePureObj(meta);
this.oldMetaID = this.meta.id;
},
onClickEditProps() {
this.$refs.propsEditorDialog.edit(this.meta.props);
},
save() {
this.$refs.form.validate((valid) => {
if (valid) {
if (this.oldMetaID !== this.meta.id && this.$store.getters.metaIDExists(this.meta.id)) {
this.$alert(this.$t('This Meta ID is in use, can not save'), this.$t('Alert'))
.catch((e) => {
});
} else {
this.$emit('input', this.meta);
this.visible=false;
}
} else {
return false;
}
});
},
cancel() {
this.visible = false;
},
copyMeta() {
copy(JSON.stringify(this.meta));
},
pasteMeta() {
//setTimeout(this.focusPasteBoard, 1000, this);
},
onPaste(e) {
let metaStr = e.clipboardData.getData("Text");
if(metaStr){
try {
let meta = JSON.parse(metaStr);
this.meta = meta;
}catch (e) {
}
}
},
focusPasteBoard(){
this.$refs.pasteBoard.focus();
},
onCodeChange(codemirror){
//codemirror.showHint();
//console.log(code);
}
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
.history/src/views/Editor/behavior-editor/MetaEditorDialog_20191203194145.vue deleted 100644 → 0
View file @ 79d92895
<template>
<el-dialog :title="$t('Meta Editor')" width="80%" :visible.sync="visible"
:close-on-click-modal="false"
:close-on-press-escape="false"
:show-close="false"
:append-to-body="true">
<div class="meta-editor-wrapper">
<el-form ref="form" v-if="meta" :model="meta" :rules="rules" :show-message="false" class="info-editor" size="mini" label-position="right" label-width="70px" @submit.native.prevent>
<template>
<el-form-item prop="id" :label="$t('ID')">
<el-input v-model="meta.id" :placeholder="$t('ID')" :readonly="!editable"/>
</el-form-item>
<el-form-item prop="name" :label="$t('Name')">
<el-input v-model="meta.name" :placeholder="$t('Name')" :readonly="!editable"/>
</el-form-item>
<el-form-item prop="desc" :label="$t('Desc')">
<el-input v-model="meta.desc" :placeholder="$t('Description')" :readonly="!editable"/>
</el-form-item>
<!--<el-form-item prop="type" label="Type">
<el-input v-model="meta.type" :placeholder="$t('Type')" :readonly="!editable"/>
</el-form-item>
<el-form-item prop="group" label="Group">
<el-input v-model="meta.group" :placeholder="$t('Group')" :readonly="!editable"/>
</el-form-item>-->
<el-form-item :label="$t('Props')">
<el-link :underline="false" @click="onClickEditProps" :disabled="!editable">
<template v-if="Object.keys(meta.props).length">
<el-tag type="success" size="mini" v-for="(option, key) in meta.props" :key="key">{{key}}</el-tag>
</template>
<template v-else>{{$t('Empty')}}</template>
</el-link>
</el-form-item>
<el-form-item :label="$t('Output')">
<div style="display: flex;flex: 1;">
<el-select style="flex: 1;" v-model="meta.output" :disabled="!editable" allow-create filterable multiple
:placeholder="$t('Output')"/>
</div>
</el-form-item>
</template>
</el-form>
<div style="margin-top: 5px;">
<el-tag v-for="(item, key) in exposeVariables" :key="key" size="mini">{{item}}</el-tag>
</div>
<!--<el-input v-if="meta" class="script-editor" :readonly=" !editable" type="textarea" :placeholder="$t('Code')"
v-model="meta.script"></el-input>-->
<codemirror ref="codeEditor" v-if="meta"
v-model="meta.script"
:options="cmOptions"
@cursorActivity="onCodeChange"
>
</codemirror>
</div>
<div slot="footer" class="dialog-footer">
<div class="button-bar">
<el-button-group style="margin-right: 20px;">
<el-button size="mini" plain @click="copyMeta">CopyMeta</el-button>
<el-popover>
<div ref="pasteBoard" @paste="onPaste">Click and Ctrl+V</div>
<el-button size="mini" slot="reference" plain @click="pasteMeta">PasteMeta</el-button>
</el-popover>
</el-button-group>
<el-button size="mini" plain @click="cancel">{{$t('Cancel')}}</el-button>
<el-button size="mini" plain @click="saveAndPreview">{{$t('Save And Preview')}}</el-button>
<el-button size="mini" plain @click="save">{{$t('Save')}}</el-button>
</div>
</div>
<props-editor-dialog ref="propsEditorDialog"/>
</el-dialog>
</template>
<script>
import ElFormItem from "./inputs/form-item";
import PropsEditorDialog from "./PropsEditorDialog";
import {codemirror} from "vue-codemirror";
import copy from 'copy-to-clipboard'
import {clonePureObj} from "../../../utils";
import 'codemirror/mode/javascript/javascript.js'
import 'codemirror/lib/codemirror.css'
import 'codemirror/theme/monokai.css'
import 'codemirror/addon/edit/closebrackets.js'
import 'codemirror/addon/hint/show-hint.js'
import 'codemirror/addon/hint/show-hint.css'
import 'codemirror/addon/hint/javascript-hint.js'
import events from "@/global-events.js"
const exposeVariables = ['args', 'props', 'target', 'global', 'vm', 'engine'];
export default {
name: "MetaEditorDialog",
components: {PropsEditorDialog, ElFormItem, codemirror},
data() {
return {
visible: false,
meta: null,
propsEditorVisible: false,
exposeVariables,
rules: {
id: [
{ required: true, trigger: 'blur' },
],
name: [
{ required: true, trigger: 'blur' }
],
},
cmOptions: {
tabSize: 2,
mode: 'text/javascript',
styleActiveLine: true,
theme: 'default',
lineNumbers: true,
line: true,
matchBrackets: true,
autoCloseBrackets: true,
}
}
},
mounted(){
},
computed: {
editable() {
return this.meta;// && this.meta.type !== 'builtin';
},
props() {
return Object.keys(this.meta.props).join(',')
},
},
methods: {
edit(meta) {
this.visible = true;
this.meta = clonePureObj(meta);
this.oldMetaID = this.meta.id;
},
onClickEditProps() {
this.$refs.propsEditorDialog.edit(this.meta.props);
},
save() {
this.$refs.form.validate((valid) => {
if (valid) {
if (this.oldMetaID !== this.meta.id && this.$store.getters.metaIDExists(this.meta.id)) {
this.$alert(this.$t('This Meta ID is in use, can not save'), this.$t('Alert'))
.catch((e) => {
});
} else {
this.$emit('input', this.meta);
this.visible=false;
}
} else {
return false;
}
});
},
cancel() {
this.visible = false;
},
copyMeta() {
copy(JSON.stringify(this.meta));
},
pasteMeta() {
//setTimeout(this.focusPasteBoard, 1000, this);
},
onPaste(e) {
let metaStr = e.clipboardData.getData("Text");
if(metaStr){
try {
let meta = JSON.parse(metaStr);
this.meta = meta;
}catch (e) {
}
}
},
focusPasteBoard(){
this.$refs.pasteBoard.focus();
},
onCodeChange(codemirror){
//codemirror.showHint();
//console.log(code);
}
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
.history/src/views/Editor/behavior-editor/MetaEditorDialog_20191203194312.vue deleted 100644 → 0
View file @ 79d92895
<template>
<el-dialog :title="$t('Meta Editor')" width="80%" :visible.sync="visible"
:close-on-click-modal="false"
:close-on-press-escape="false"
:show-close="false"
:append-to-body="true">
<div class="meta-editor-wrapper">
<el-form ref="form" v-if="meta" :model="meta" :rules="rules" :show-message="false" class="info-editor" size="mini" label-position="right" label-width="70px" @submit.native.prevent>
<template>
<el-form-item prop="id" :label="$t('ID')">
<el-input v-model="meta.id" :placeholder="$t('ID')" :readonly="!editable"/>
</el-form-item>
<el-form-item prop="name" :label="$t('Name')">
<el-input v-model="meta.name" :placeholder="$t('Name')" :readonly="!editable"/>
</el-form-item>
<el-form-item prop="desc" :label="$t('Desc')">
<el-input v-model="meta.desc" :placeholder="$t('Description')" :readonly="!editable"/>
</el-form-item>
<!--<el-form-item prop="type" label="Type">
<el-input v-model="meta.type" :placeholder="$t('Type')" :readonly="!editable"/>
</el-form-item>
<el-form-item prop="group" label="Group">
<el-input v-model="meta.group" :placeholder="$t('Group')" :readonly="!editable"/>
</el-form-item>-->
<el-form-item :label="$t('Props')">
<el-link :underline="false" @click="onClickEditProps" :disabled="!editable">
<template v-if="Object.keys(meta.props).length">
<el-tag type="success" size="mini" v-for="(option, key) in meta.props" :key="key">{{key}}</el-tag>
</template>
<template v-else>{{$t('Empty')}}</template>
</el-link>
</el-form-item>
<el-form-item :label="$t('Output')">
<div style="display: flex;flex: 1;">
<el-select style="flex: 1;" v-model="meta.output" :disabled="!editable" allow-create filterable multiple
:placeholder="$t('Output')"/>
</div>
</el-form-item>
</template>
</el-form>
<div style="margin-top: 5px;">
<el-tag v-for="(item, key) in exposeVariables" :key="key" size="mini">{{item}}</el-tag>
</div>
<!--<el-input v-if="meta" class="script-editor" :readonly=" !editable" type="textarea" :placeholder="$t('Code')"
v-model="meta.script"></el-input>-->
<codemirror ref="codeEditor" v-if="meta"
v-model="meta.script"
:options="cmOptions"
@cursorActivity="onCodeChange"
>
</codemirror>
</div>
<div slot="footer" class="dialog-footer">
<div class="button-bar">
<el-button-group style="margin-right: 20px;">
<el-button size="mini" plain @click="copyMeta">CopyMeta</el-button>
<el-popover>
<div ref="pasteBoard" @paste="onPaste">Click and Ctrl+V</div>
<el-button size="mini" slot="reference" plain @click="pasteMeta">PasteMeta</el-button>
</el-popover>
</el-button-group>
<el-button size="mini" plain @click="cancel">{{$t('Cancel')}}</el-button>
<el-button size="mini" plain @click="saveAndPreview">{{$t('Save And Preview')}}</el-button>
<el-button size="mini" plain @click="save">{{$t('Save')}}</el-button>
</div>
</div>
<props-editor-dialog ref="propsEditorDialog"/>
</el-dialog>
</template>
<script>
import ElFormItem from "./inputs/form-item";
import PropsEditorDialog from "./PropsEditorDialog";
import {codemirror} from "vue-codemirror";
import copy from 'copy-to-clipboard'
import {clonePureObj} from "../../../utils";
import 'codemirror/mode/javascript/javascript.js'
import 'codemirror/lib/codemirror.css'
import 'codemirror/theme/monokai.css'
import 'codemirror/addon/edit/closebrackets.js'
import 'codemirror/addon/hint/show-hint.js'
import 'codemirror/addon/hint/show-hint.css'
import 'codemirror/addon/hint/javascript-hint.js'
import events from "@/global-events.js"
const exposeVariables = ['args', 'props', 'target', 'global', 'vm', 'engine'];
export default {
name: "MetaEditorDialog",
components: {PropsEditorDialog, ElFormItem, codemirror},
data() {
return {
visible: false,
meta: null,
propsEditorVisible: false,
exposeVariables,
rules: {
id: [
{ required: true, trigger: 'blur' },
],
name: [
{ required: true, trigger: 'blur' }
],
},
cmOptions: {
tabSize: 2,
mode: 'text/javascript',
styleActiveLine: true,
theme: 'default',
lineNumbers: true,
line: true,
matchBrackets: true,
autoCloseBrackets: true,
}
}
},
mounted(){
},
computed: {
editable() {
return this.meta;// && this.meta.type !== 'builtin';
},
props() {
return Object.keys(this.meta.props).join(',')
},
},
methods: {
edit(meta) {
this.visible = true;
this.meta = clonePureObj(meta);
this.oldMetaID = this.meta.id;
},
onClickEditProps() {
this.$refs.propsEditorDialog.edit(this.meta.props);
},
save(isPreview) {
this.$refs.form.validate((valid) => {
if (valid) {
if (this.oldMetaID !== this.meta.id && this.$store.getters.metaIDExists(this.meta.id)) {
this.$alert(this.$t('This Meta ID is in use, can not save'), this.$t('Alert'))
.catch((e) => {
});
} else {
this.$emit('input', this.meta,isPreview);
this.visible=false;
}
} else {
return false;
}
});
},
cancel() {
this.visible = false;
},
copyMeta() {
copy(JSON.stringify(this.meta));
},
pasteMeta() {
//setTimeout(this.focusPasteBoard, 1000, this);
},
onPaste(e) {
let metaStr = e.clipboardData.getData("Text");
if(metaStr){
try {
let meta = JSON.parse(metaStr);
this.meta = meta;
}catch (e) {
}
}
},
focusPasteBoard(){
this.$refs.pasteBoard.focus();
},
onCodeChange(codemirror){
//codemirror.showHint();
//console.log(code);
}
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
.history/src/views/Editor/behavior-editor/MetaEditorDialog_20191203194332.vue deleted 100644 → 0
View file @ 79d92895
<template>
<el-dialog :title="$t('Meta Editor')" width="80%" :visible.sync="visible"
:close-on-click-modal="false"
:close-on-press-escape="false"
:show-close="false"
:append-to-body="true">
<div class="meta-editor-wrapper">
<el-form ref="form" v-if="meta" :model="meta" :rules="rules" :show-message="false" class="info-editor" size="mini" label-position="right" label-width="70px" @submit.native.prevent>
<template>
<el-form-item prop="id" :label="$t('ID')">
<el-input v-model="meta.id" :placeholder="$t('ID')" :readonly="!editable"/>
</el-form-item>
<el-form-item prop="name" :label="$t('Name')">
<el-input v-model="meta.name" :placeholder="$t('Name')" :readonly="!editable"/>
</el-form-item>
<el-form-item prop="desc" :label="$t('Desc')">
<el-input v-model="meta.desc" :placeholder="$t('Description')" :readonly="!editable"/>
</el-form-item>
<!--<el-form-item prop="type" label="Type">
<el-input v-model="meta.type" :placeholder="$t('Type')" :readonly="!editable"/>
</el-form-item>
<el-form-item prop="group" label="Group">
<el-input v-model="meta.group" :placeholder="$t('Group')" :readonly="!editable"/>
</el-form-item>-->
<el-form-item :label="$t('Props')">
<el-link :underline="false" @click="onClickEditProps" :disabled="!editable">
<template v-if="Object.keys(meta.props).length">
<el-tag type="success" size="mini" v-for="(option, key) in meta.props" :key="key">{{key}}</el-tag>
</template>
<template v-else>{{$t('Empty')}}</template>
</el-link>
</el-form-item>
<el-form-item :label="$t('Output')">
<div style="display: flex;flex: 1;">
<el-select style="flex: 1;" v-model="meta.output" :disabled="!editable" allow-create filterable multiple
:placeholder="$t('Output')"/>
</div>
</el-form-item>
</template>
</el-form>
<div style="margin-top: 5px;">
<el-tag v-for="(item, key) in exposeVariables" :key="key" size="mini">{{item}}</el-tag>
</div>
<!--<el-input v-if="meta" class="script-editor" :readonly=" !editable" type="textarea" :placeholder="$t('Code')"
v-model="meta.script"></el-input>-->
<codemirror ref="codeEditor" v-if="meta"
v-model="meta.script"
:options="cmOptions"
@cursorActivity="onCodeChange"
>
</codemirror>
</div>
<div slot="footer" class="dialog-footer">
<div class="button-bar">
<el-button-group style="margin-right: 20px;">
<el-button size="mini" plain @click="copyMeta">CopyMeta</el-button>
<el-popover>
<div ref="pasteBoard" @paste="onPaste">Click and Ctrl+V</div>
<el-button size="mini" slot="reference" plain @click="pasteMeta">PasteMeta</el-button>
</el-popover>
</el-button-group>
<el-button size="mini" plain @click="cancel">{{$t('Cancel')}}</el-button>
<el-button size="mini" plain @click="saveAndPreview(true)">{{$t('Save And Preview')}}</el-button>
<el-button size="mini" plain @click="save(false)">{{$t('Save')}}</el-button>
</div>
</div>
<props-editor-dialog ref="propsEditorDialog"/>
</el-dialog>
</template>
<script>
import ElFormItem from "./inputs/form-item";
import PropsEditorDialog from "./PropsEditorDialog";
import {codemirror} from "vue-codemirror";
import copy from 'copy-to-clipboard'
import {clonePureObj} from "../../../utils";
import 'codemirror/mode/javascript/javascript.js'
import 'codemirror/lib/codemirror.css'
import 'codemirror/theme/monokai.css'
import 'codemirror/addon/edit/closebrackets.js'
import 'codemirror/addon/hint/show-hint.js'
import 'codemirror/addon/hint/show-hint.css'
import 'codemirror/addon/hint/javascript-hint.js'
import events from "@/global-events.js"
const exposeVariables = ['args', 'props', 'target', 'global', 'vm', 'engine'];
export default {
name: "MetaEditorDialog",
components: {PropsEditorDialog, ElFormItem, codemirror},
data() {
return {
visible: false,
meta: null,
propsEditorVisible: false,
exposeVariables,
rules: {
id: [
{ required: true, trigger: 'blur' },
],
name: [
{ required: true, trigger: 'blur' }
],
},
cmOptions: {
tabSize: 2,
mode: 'text/javascript',
styleActiveLine: true,
theme: 'default',
lineNumbers: true,
line: true,
matchBrackets: true,
autoCloseBrackets: true,
}
}
},
mounted(){
},
computed: {
editable() {
return this.meta;// && this.meta.type !== 'builtin';
},
props() {
return Object.keys(this.meta.props).join(',')
},
},
methods: {
edit(meta) {
this.visible = true;
this.meta = clonePureObj(meta);
this.oldMetaID = this.meta.id;
},
onClickEditProps() {
this.$refs.propsEditorDialog.edit(this.meta.props);
},
save(isPreview) {
this.$refs.form.validate((valid) => {
if (valid) {
if (this.oldMetaID !== this.meta.id && this.$store.getters.metaIDExists(this.meta.id)) {
this.$alert(this.$t('This Meta ID is in use, can not save'), this.$t('Alert'))
.catch((e) => {
});
} else {
this.$emit('input',this.meta,isPreview);
this.visible=false;
}
} else {
return false;
}
});
},
cancel() {
this.visible = false;
},
copyMeta() {
copy(JSON.stringify(this.meta));
},
pasteMeta() {
//setTimeout(this.focusPasteBoard, 1000, this);
},
onPaste(e) {
let metaStr = e.clipboardData.getData("Text");
if(metaStr){
try {
let meta = JSON.parse(metaStr);
this.meta = meta;
}catch (e) {
}
}
},
focusPasteBoard(){
this.$refs.pasteBoard.focus();
},
onCodeChange(codemirror){
//codemirror.showHint();
//console.log(code);
}
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
.history/src/views/Editor/behavior-editor/MetaEditorDialog_20191203194337.vue deleted 100644 → 0
View file @ 79d92895
<template>
<el-dialog :title="$t('Meta Editor')" width="80%" :visible.sync="visible"
:close-on-click-modal="false"
:close-on-press-escape="false"
:show-close="false"
:append-to-body="true">
<div class="meta-editor-wrapper">
<el-form ref="form" v-if="meta" :model="meta" :rules="rules" :show-message="false" class="info-editor" size="mini" label-position="right" label-width="70px" @submit.native.prevent>
<template>
<el-form-item prop="id" :label="$t('ID')">
<el-input v-model="meta.id" :placeholder="$t('ID')" :readonly="!editable"/>
</el-form-item>
<el-form-item prop="name" :label="$t('Name')">
<el-input v-model="meta.name" :placeholder="$t('Name')" :readonly="!editable"/>
</el-form-item>
<el-form-item prop="desc" :label="$t('Desc')">
<el-input v-model="meta.desc" :placeholder="$t('Description')" :readonly="!editable"/>
</el-form-item>
<!--<el-form-item prop="type" label="Type">
<el-input v-model="meta.type" :placeholder="$t('Type')" :readonly="!editable"/>
</el-form-item>
<el-form-item prop="group" label="Group">
<el-input v-model="meta.group" :placeholder="$t('Group')" :readonly="!editable"/>
</el-form-item>-->
<el-form-item :label="$t('Props')">
<el-link :underline="false" @click="onClickEditProps" :disabled="!editable">
<template v-if="Object.keys(meta.props).length">
<el-tag type="success" size="mini" v-for="(option, key) in meta.props" :key="key">{{key}}</el-tag>
</template>
<template v-else>{{$t('Empty')}}</template>
</el-link>
</el-form-item>
<el-form-item :label="$t('Output')">
<div style="display: flex;flex: 1;">
<el-select style="flex: 1;" v-model="meta.output" :disabled="!editable" allow-create filterable multiple
:placeholder="$t('Output')"/>
</div>
</el-form-item>
</template>
</el-form>
<div style="margin-top: 5px;">
<el-tag v-for="(item, key) in exposeVariables" :key="key" size="mini">{{item}}</el-tag>
</div>
<!--<el-input v-if="meta" class="script-editor" :readonly=" !editable" type="textarea" :placeholder="$t('Code')"
v-model="meta.script"></el-input>-->
<codemirror ref="codeEditor" v-if="meta"
v-model="meta.script"
:options="cmOptions"
@cursorActivity="onCodeChange"
>
</codemirror>
</div>
<div slot="footer" class="dialog-footer">
<div class="button-bar">
<el-button-group style="margin-right: 20px;">
<el-button size="mini" plain @click="copyMeta">CopyMeta</el-button>
<el-popover>
<div ref="pasteBoard" @paste="onPaste">Click and Ctrl+V</div>
<el-button size="mini" slot="reference" plain @click="pasteMeta">PasteMeta</el-button>
</el-popover>
</el-button-group>
<el-button size="mini" plain @click="cancel">{{$t('Cancel')}}</el-button>
<el-button size="mini" plain @click="save(true)">{{$t('Save And Preview')}}</el-button>
<el-button size="mini" plain @click="save(false)">{{$t('Save')}}</el-button>
</div>
</div>
<props-editor-dialog ref="propsEditorDialog"/>
</el-dialog>
</template>
<script>
import ElFormItem from "./inputs/form-item";
import PropsEditorDialog from "./PropsEditorDialog";
import {codemirror} from "vue-codemirror";
import copy from 'copy-to-clipboard'
import {clonePureObj} from "../../../utils";
import 'codemirror/mode/javascript/javascript.js'
import 'codemirror/lib/codemirror.css'
import 'codemirror/theme/monokai.css'
import 'codemirror/addon/edit/closebrackets.js'
import 'codemirror/addon/hint/show-hint.js'
import 'codemirror/addon/hint/show-hint.css'
import 'codemirror/addon/hint/javascript-hint.js'
import events from "@/global-events.js"
const exposeVariables = ['args', 'props', 'target', 'global', 'vm', 'engine'];
export default {
name: "MetaEditorDialog",
components: {PropsEditorDialog, ElFormItem, codemirror},
data() {
return {
visible: false,
meta: null,
propsEditorVisible: false,
exposeVariables,
rules: {
id: [
{ required: true, trigger: 'blur' },
],
name: [
{ required: true, trigger: 'blur' }
],
},
cmOptions: {
tabSize: 2,
mode: 'text/javascript',
styleActiveLine: true,
theme: 'default',
lineNumbers: true,
line: true,
matchBrackets: true,
autoCloseBrackets: true,
}
}
},
mounted(){
},
computed: {
editable() {
return this.meta;// && this.meta.type !== 'builtin';
},
props() {
return Object.keys(this.meta.props).join(',')
},
},
methods: {
edit(meta) {
this.visible = true;
this.meta = clonePureObj(meta);
this.oldMetaID = this.meta.id;
},
onClickEditProps() {
this.$refs.propsEditorDialog.edit(this.meta.props);
},
save(isPreview) {
this.$refs.form.validate((valid) => {
if (valid) {
if (this.oldMetaID !== this.meta.id && this.$store.getters.metaIDExists(this.meta.id)) {
this.$alert(this.$t('This Meta ID is in use, can not save'), this.$t('Alert'))
.catch((e) => {
});
} else {
this.$emit('input',this.meta,isPreview);
this.visible=false;
}
} else {
return false;
}
});
},
cancel() {
this.visible = false;
},
copyMeta() {
copy(JSON.stringify(this.meta));
},
pasteMeta() {
//setTimeout(this.focusPasteBoard, 1000, this);
},
onPaste(e) {
let metaStr = e.clipboardData.getData("Text");
if(metaStr){
try {
let meta = JSON.parse(metaStr);
this.meta = meta;
}catch (e) {
}
}
},
focusPasteBoard(){
this.$refs.pasteBoard.focus();
},
onCodeChange(codemirror){
//codemirror.showHint();
//console.log(code);
}
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
.history/src/views/Editor/behavior-editor/PropsEditorDialog_20191128104254.vue deleted 100644 → 0
View file @ 79d92895
<template>
<el-dialog :title="$t('Props Editor')" width="80%" :visible.sync="visible"
:close-on-click-modal="false"
:append-to-body="true">
<div class="props-editor-dialog">
<el-button class="add-button" size="mini" circle icon="el-icon-plus" plain @click="addItem"/>
<el-scrollbar class="scrollbar" wrap-class="wrap-x-hidden" v-if="props"
view-class="scrollbar-view">
<div class="wrapper">
<el-table
:data="props"
style="width: 100%">
<el-table-column
:label="$t('Type')"
width="100">
<template slot-scope="scope">
<el-select v-model="scope.row.option.type" size="mini">
<el-option v-for="(str, type) in types"
:key="type"
:label="str"
:value="type"
>
</el-option>
</el-select>
</template>
</el-table-column>
<el-table-column
:label="$t('Key')"
width="200">
<template slot-scope="scope">
<el-input v-model="scope.row.key" size="mini"/>
</template>
</el-table-column>
<el-table-column
:label="$t('Alias')"
width="200">
<template slot-scope="scope">
<el-input v-model="scope.row.option.alias" size="mini"/>
</template>
</el-table-column>
<el-table-column
:label="$t('Default')">
<template slot-scope="scope">
<el-input v-if="scope.row.option.type === 'string' || scope.row.option.type === 'enum'" class="default-value" v-model="scope.row.option.default" size="mini" placeholder="Default"/>
<el-input-number v-if="scope.row.option.type === 'number'" controls-position="right" class="default-value" v-model="scope.row.option.default" size="mini" placeholder="Default"/>
<el-switch v-if="scope.row.option.type === 'boolean'" class="default-value" v-model="scope.row.option.default" size="mini"/>
<el-color-picker v-if="scope.row.option.type === 'color'" class="default-value" v-model="scope.row.option.default" size="mini"/>
</template>
</el-table-column>
<el-table-column
label=""
width="70">
<template slot-scope="scope">
<div class="operate-bar">
<el-popover
class="edit-enum-button"
trigger="click">
<div class="edit-enum-popover">
<el-select size="mini" allow-create multiple filterable v-model="scope.row.option.enum"/>
</div>
<el-button slot="reference" class="edit-button" size="mini" circle icon="el-icon-edit" plain :disabled="scope.row.option.type!=='enum'"
@click="editEnum(scope)"/>
</el-popover>
<el-button class="delete-button" size="mini" circle icon="el-icon-minus" type="danger" plain
@click="deleteItem(scope.$index)"/>
</div>
</template>
</el-table-column>
</el-table>
</div>
</el-scrollbar>
</div>
<div slot="footer" class="dialog-footer">
<div class="button-bar">
<el-button size="mini" plain @click="cancel">{{$t('Cancel')}}</el-button>
<el-button size="mini" plain @click="save">{{$t('Save')}}</el-button>
</div>
</div>
</el-dialog>
</template>
<script>
import {clonePureObj} from "../../../utils";
export default {
name: "PropsEditorDialog",
data() {
return {
visible: false,
originProps: null,
copiedProps: null,
props: [],
types: this.$t('prosTypes'),
}
},
methods: {
edit(props) {
this.visible = true;
this.originProps = props;
this.copiedProps = clonePureObj(props);
this.props.splice(0);
for (let key in this.copiedProps) {
let option = this.copiedProps[key];
this.props.push({
key,
option,
})
}
},
save(){
let keys = Object.keys(this.originProps);
for (let key of keys) {
this.$delete(this.originProps, key);
}
for(let item of this.props){
if(item.key){
this.$set(this.originProps, item.key, item.option);
}
}
this.visible = false;
},
cancel(){
this.visible = false;
},
editEnum(item){
},
addItem(){
this.props.push({
option: {
type: 'string',
}
})
},
deleteItem(index){
this.props.splice(index, 1);
},
},
}
</script>
<style scoped>
</style>
\ No newline at end of file
.history/src/views/Editor/behavior-editor/PropsEditorDialog_20191203180414.vue deleted 100644 → 0
View file @ 79d92895
<template>
<el-dialog :title="$t('Props Editor')" width="80%" :visible.sync="visible"
:close-on-click-modal="false"
:append-to-body="true">
<div class="props-editor-dialog">
<el-button class="add-button" size="mini" circle icon="el-icon-plus" plain @click="addItem"/>
<el-scrollbar class="scrollbar" wrap-class="wrap-x-hidden" v-if="props"
view-class="scrollbar-view">
<div class="wrapper">
<el-table
:data="props"
style="width: 100%">
<el-table-column
:label="$t('Type')"
width="100">
<template slot-scope="scope">
<el-select v-model="scope.row.option.type" size="mini">
<el-option v-for="(str, type) in types"
:key="type"
:label="str"
:value="type"
>
</el-option>
</el-select>
</template>
</el-table-column>
<el-table-column
:label="$t('Key')"
width="200">
<template slot-scope="scope">
<el-input v-model="scope.row.key" size="mini"/>
</template>
</el-table-column>
<el-table-column
:label="$t('Alias')"
width="200">
<template slot-scope="scope">
<el-input v-model="scope.row.option.alias" size="mini"/>
</template>
</el-table-column>
<el-table-column
:label="$t('Default')">
<template slot-scope="scope">
<el-input v-if="scope.row.option.type === 'string' || scope.row.option.type === 'enum'" class="default-value" v-model="scope.row.option.default" size="mini" placeholder="Default"/>
<el-input-number v-if="scope.row.option.type === 'number'" controls-position="right" class="default-value" v-model="scope.row.option.default" size="mini" placeholder="Default"/>
<el-switch v-if="scope.row.option.type === 'boolean'" class="default-value" v-model="scope.row.option.default" size="mini"/>
<el-color-picker v-if="scope.row.option.type === 'color'" class="default-value" v-model="scope.row.option.default" size="mini"/>
</template>
</el-table-column>
<el-table-column
label=""
width="70">
<template slot-scope="scope">
<div class="operate-bar">
<el-popover
class="edit-enum-button"
trigger="click">
<div class="edit-enum-popover">
<el-select size="mini" allow-create multiple filterable v-model="scope.row.option.enum"/>
</div>
<el-button slot="reference" class="edit-button" size="mini" circle icon="el-icon-edit" plain :disabled="scope.row.option.type!=='enum'"
@click="editEnum(scope)"/>
</el-popover>
<el-button class="delete-button" size="mini" circle icon="el-icon-minus" type="danger" plain
@click="deleteItem(scope.$index)"/>
</div>
</template>
</el-table-column>
</el-table>
</div>
</el-scrollbar>
</div>
<div slot="footer" class="dialog-footer">
<div class="button-bar">
<el-button size="mini" plain @click="cancel">{{$t('Cancel')}}</el-button>
<el-button size="mini" plain @click="save">{{$t('Save')}}</el-button>
</div>
</div>
</el-dialog>
</template>
<script>
import {clonePureObj} from "../../../utils";
export default {
name: "PropsEditorDialog",
data() {
return {
visible: false,
originProps: null,
copiedProps: null,
props: [],
types: this.$t('prosTypes'),
}
},
methods: {
edit(props) {
this.visible = true;
this.originProps = props;
this.copiedProps = clonePureObj(props);
this.props.splice(0);
for (let key in this.copiedProps) {
let option = this.copiedProps[key];
this.props.push({
key,
option,
})
}
},
save(){
let keys = Object.keys(this.originProps);
for (let key of keys) {
this.$delete(this.originProps, key);
}
for(let item of this.props){
if(item.key){
this.$set(this.originProps, item.key, item.option);
}
}
//this.visible = false;
},
cancel(){
this.visible = false;
},
editEnum(item){
},
addItem(){
this.props.push({
option: {
type: 'string',
}
})
},
deleteItem(index){
this.props.splice(index, 1);
},
},
}
</script>
<style scoped>
</style>
\ No newline at end of file
.history/src/views/Editor/behavior-editor/PropsEditorDialog_20191203180447.vue deleted 100644 → 0
View file @ 79d92895
<template>
<el-dialog :title="$t('Props Editor')" width="80%" :visible.sync="visible"
:close-on-click-modal="false"
:append-to-body="true">
<div class="props-editor-dialog">
<el-button class="add-button" size="mini" circle icon="el-icon-plus" plain @click="addItem"/>
<el-scrollbar class="scrollbar" wrap-class="wrap-x-hidden" v-if="props"
view-class="scrollbar-view">
<div class="wrapper">
<el-table
:data="props"
style="width: 100%">
<el-table-column
:label="$t('Type')"
width="100">
<template slot-scope="scope">
<el-select v-model="scope.row.option.type" size="mini">
<el-option v-for="(str, type) in types"
:key="type"
:label="str"
:value="type"
>
</el-option>
</el-select>
</template>
</el-table-column>
<el-table-column
:label="$t('Key')"
width="200">
<template slot-scope="scope">
<el-input v-model="scope.row.key" size="mini"/>
</template>
</el-table-column>
<el-table-column
:label="$t('Alias')"
width="200">
<template slot-scope="scope">
<el-input v-model="scope.row.option.alias" size="mini"/>
</template>
</el-table-column>
<el-table-column
:label="$t('Default')">
<template slot-scope="scope">
<el-input v-if="scope.row.option.type === 'string' || scope.row.option.type === 'enum'" class="default-value" v-model="scope.row.option.default" size="mini" placeholder="Default"/>
<el-input-number v-if="scope.row.option.type === 'number'" controls-position="right" class="default-value" v-model="scope.row.option.default" size="mini" placeholder="Default"/>
<el-switch v-if="scope.row.option.type === 'boolean'" class="default-value" v-model="scope.row.option.default" size="mini"/>
<el-color-picker v-if="scope.row.option.type === 'color'" class="default-value" v-model="scope.row.option.default" size="mini"/>
</template>
</el-table-column>
<el-table-column
label=""
width="70">
<template slot-scope="scope">
<div class="operate-bar">
<el-popover
class="edit-enum-button"
trigger="click">
<div class="edit-enum-popover">
<el-select size="mini" allow-create multiple filterable v-model="scope.row.option.enum"/>
</div>
<el-button slot="reference" class="edit-button" size="mini" circle icon="el-icon-edit" plain :disabled="scope.row.option.type!=='enum'"
@click="editEnum(scope)"/>
</el-popover>
<el-button class="delete-button" size="mini" circle icon="el-icon-minus" type="danger" plain
@click="deleteItem(scope.$index)"/>
</div>
</template>
</el-table-column>
</el-table>
</div>
</el-scrollbar>
</div>
<div slot="footer" class="dialog-footer">
<div class="button-bar">
<el-button size="mini" plain @click="cancel">{{$t('Cancel')}}</el-button>
<el-button size="mini" plain @click="save">{{$t('Save')}}</el-button>
</div>
</div>
</el-dialog>
</template>
<script>
import {clonePureObj} from "../../../utils";
export default {
name: "PropsEditorDialog",
data() {
return {
visible: false,
originProps: null,
copiedProps: null,
props: [],
types: this.$t('prosTypes'),
}
},
methods: {
edit(props) {
this.visible = true;
this.originProps = props;
this.copiedProps = clonePureObj(props);
this.props.splice(0);
for (let key in this.copiedProps) {
let option = this.copiedProps[key];
this.props.push({
key,
option,
})
}
},
save(){
let keys = Object.keys(this.originProps);
for (let key of keys) {
this.$delete(this.originProps, key);
}
for(let item of this.props){
if(item.key){
this.$set(this.originProps, item.key, item.option);
}
}
alert(2)
//this.visible = false;
},
cancel(){
this.visible = false;
},
editEnum(item){
},
addItem(){
this.props.push({
option: {
type: 'string',
}
})
},
deleteItem(index){
this.props.splice(index, 1);
},
},
}
</script>
<style scoped>
</style>
\ No newline at end of file
.history/src/views/Editor/behavior-editor/PropsEditorDialog_20191203180515.vue deleted 100644 → 0
View file @ 79d92895
<template>
<el-dialog :title="$t('Props Editor')" width="80%" :visible.sync="visible"
:close-on-click-modal="false"
:append-to-body="true">
<div class="props-editor-dialog">
<el-button class="add-button" size="mini" circle icon="el-icon-plus" plain @click="addItem"/>
<el-scrollbar class="scrollbar" wrap-class="wrap-x-hidden" v-if="props"
view-class="scrollbar-view">
<div class="wrapper">
<el-table
:data="props"
style="width: 100%">
<el-table-column
:label="$t('Type')"
width="100">
<template slot-scope="scope">
<el-select v-model="scope.row.option.type" size="mini">
<el-option v-for="(str, type) in types"
:key="type"
:label="str"
:value="type"
>
</el-option>
</el-select>
</template>
</el-table-column>
<el-table-column
:label="$t('Key')"
width="200">
<template slot-scope="scope">
<el-input v-model="scope.row.key" size="mini"/>
</template>
</el-table-column>
<el-table-column
:label="$t('Alias')"
width="200">
<template slot-scope="scope">
<el-input v-model="scope.row.option.alias" size="mini"/>
</template>
</el-table-column>
<el-table-column
:label="$t('Default')">
<template slot-scope="scope">
<el-input v-if="scope.row.option.type === 'string' || scope.row.option.type === 'enum'" class="default-value" v-model="scope.row.option.default" size="mini" placeholder="Default"/>
<el-input-number v-if="scope.row.option.type === 'number'" controls-position="right" class="default-value" v-model="scope.row.option.default" size="mini" placeholder="Default"/>
<el-switch v-if="scope.row.option.type === 'boolean'" class="default-value" v-model="scope.row.option.default" size="mini"/>
<el-color-picker v-if="scope.row.option.type === 'color'" class="default-value" v-model="scope.row.option.default" size="mini"/>
</template>
</el-table-column>
<el-table-column
label=""
width="70">
<template slot-scope="scope">
<div class="operate-bar">
<el-popover
class="edit-enum-button"
trigger="click">
<div class="edit-enum-popover">
<el-select size="mini" allow-create multiple filterable v-model="scope.row.option.enum"/>
</div>
<el-button slot="reference" class="edit-button" size="mini" circle icon="el-icon-edit" plain :disabled="scope.row.option.type!=='enum'"
@click="editEnum(scope)"/>
</el-popover>
<el-button class="delete-button" size="mini" circle icon="el-icon-minus" type="danger" plain
@click="deleteItem(scope.$index)"/>
</div>
</template>
</el-table-column>
</el-table>
</div>
</el-scrollbar>
</div>
<div slot="footer" class="dialog-footer">
<div class="button-bar">
<el-button size="mini" plain @click="cancel">{{$t('Cancel')}}</el-button>
<el-button size="mini" plain @click="save">{{$t('Save')}}</el-button>
</div>
</div>
</el-dialog>
</template>
<script>
import {clonePureObj} from "../../../utils";
export default {
name: "PropsEditorDialog",
data() {
return {
visible: false,
originProps: null,
copiedProps: null,
props: [],
types: this.$t('prosTypes'),
}
},
methods: {
edit(props) {
this.visible = true;
this.originProps = props;
this.copiedProps = clonePureObj(props);
this.props.splice(0);
for (let key in this.copiedProps) {
let option = this.copiedProps[key];
this.props.push({
key,
option,
})
}
},
save(){
let keys = Object.keys(this.originProps);
for (let key of keys) {
this.$delete(this.originProps, key);
}
for(let item of this.props){
if(item.key){
this.$set(this.originProps, item.key, item.option);
}
}
this.visible = false;
},
cancel(){
this.visible = false;
},
editEnum(item){
},
addItem(){
this.props.push({
option: {
type: 'string',
}
})
},
deleteItem(index){
this.props.splice(index, 1);
},
},
}
</script>
<style scoped>
</style>
\ No newline at end of file
.history/src/views/Editor/behavior-editor/PropsEditorDialog_20191203180537.vue deleted 100644 → 0
View file @ 79d92895
<template>
<el-dialog :title="$t('Props Editor')" width="80%" :visible.sync="visible"
:close-on-click-modal="false"
:append-to-body="true">
<div class="props-editor-dialog">
<el-button class="add-button" size="mini" circle icon="el-icon-plus" plain @click="addItem"/>
<el-scrollbar class="scrollbar" wrap-class="wrap-x-hidden" v-if="props"
view-class="scrollbar-view">
<div class="wrapper">
<el-table
:data="props"
style="width: 100%">
<el-table-column
:label="$t('Type')"
width="100">
<template slot-scope="scope">
<el-select v-model="scope.row.option.type" size="mini">
<el-option v-for="(str, type) in types"
:key="type"
:label="str"
:value="type"
>
</el-option>
</el-select>
</template>
</el-table-column>
<el-table-column
:label="$t('Key')"
width="200">
<template slot-scope="scope">
<el-input v-model="scope.row.key" size="mini"/>
</template>
</el-table-column>
<el-table-column
:label="$t('Alias')"
width="200">
<template slot-scope="scope">
<el-input v-model="scope.row.option.alias" size="mini"/>
</template>
</el-table-column>
<el-table-column
:label="$t('Default')">
<template slot-scope="scope">
<el-input v-if="scope.row.option.type === 'string' || scope.row.option.type === 'enum'" class="default-value" v-model="scope.row.option.default" size="mini" placeholder="Default"/>
<el-input-number v-if="scope.row.option.type === 'number'" controls-position="right" class="default-value" v-model="scope.row.option.default" size="mini" placeholder="Default"/>
<el-switch v-if="scope.row.option.type === 'boolean'" class="default-value" v-model="scope.row.option.default" size="mini"/>
<el-color-picker v-if="scope.row.option.type === 'color'" class="default-value" v-model="scope.row.option.default" size="mini"/>
</template>
</el-table-column>
<el-table-column
label=""
width="70">
<template slot-scope="scope">
<div class="operate-bar">
<el-popover
class="edit-enum-button"
trigger="click">
<div class="edit-enum-popover">
<el-select size="mini" allow-create multiple filterable v-model="scope.row.option.enum"/>
</div>
<el-button slot="reference" class="edit-button" size="mini" circle icon="el-icon-edit" plain :disabled="scope.row.option.type!=='enum'"
@click="editEnum(scope)"/>
</el-popover>
<el-button class="delete-button" size="mini" circle icon="el-icon-minus" type="danger" plain
@click="deleteItem(scope.$index)"/>
</div>
</template>
</el-table-column>
</el-table>
</div>
</el-scrollbar>
</div>
<div slot="footer" class="dialog-footer">
<div class="button-bar">
<el-button size="mini" plain @click="cancel">{{$t('Cancel')}}</el-button>
<el-button size="mini" plain @click="save">{{$t('Save')}}</el-button>
</div>
</div>
</el-dialog>
</template>
<script>
import {clonePureObj} from "../../../utils";
export default {
name: "PropsEditorDialog",
data() {
return {
visible: false,
originProps: null,
copiedProps: null,
props: [],
types: this.$t('prosTypes'),
}
},
methods: {
edit(props) {
this.visible = true;
this.originProps = props;
this.copiedProps = clonePureObj(props);
this.props.splice(0);
for (let key in this.copiedProps) {
let option = this.copiedProps[key];
this.props.push({
key,
option,
})
}
},
save(){
let keys = Object.keys(this.originProps);
for (let key of keys) {
this.$delete(this.originProps, key);
}
for(let item of this.props){
if(item.key){
this.$set(this.originProps, item.key, item.option);
}
}
this.visible = false;
},
cancel(){
this.visible = false;
},
editEnum(item){
},
addItem(){
this.props.push({
option: {
type: 'string',
}
})
},
deleteItem(index){
this.props.splice(index, 1);
},
},
}
</script>
<style scoped>
</style>
\ No newline at end of file
.history/src/views/Editor/dialogs/BehaviorEditorDialog_20191129114418.vue deleted 100644 → 0
View file @ 79d92895
<template>
<el-dialog :title="$t('Behavior Editor')" :visible.sync="visible" :before-close="beforeClose" @opened="onOpened"
:fullscreen="true" :close-on-click-modal="false" :close-on-press-escape="false"
:append-to-body="true" custom-class="behavior-editor-dialog">
<behavior-editor v-if="editorReady" ref="behaviorEditor" class="full-size"></behavior-editor>
<div slot="footer" class="dialog-footer">
<el-button size="mini" type="primary" @click="onSave">{{$t('Save')}}</el-button>
</div>
</el-dialog>
</template>
<script>
import {mapState, mapMutations} from 'vuex'
import BehaviorEditor from "../behavior-editor/BehaviorEditor";
export default {
name: "BehaviorEditorDialog",
components: {BehaviorEditor},
data() {
return {
visible: false,
editorReady: false,
}
},
computed: {
...mapState({
data: state => state.project.data,
}),
},
methods: {
show(behaviors, event) {
this.behavior_startEdit({
originData: this.data,
behaviors,
event,
});
this.editorReady = false;
this.visible = true;
},
onSave() {
this.behavior_save();
this.visible = false;
this.$emit('change');
},
beforeClose(done) {
this.$confirm(this.$t('Save this behavior before'), this.$t('Alert'), {
showClose: false,
closeOnClickModal: false,
closeOnPressEscape: false,
confirmButtonText: this.$t('Confirm'),
cancelButtonText: this.$t('Still Close'),
type: 'warning'
}).then(() => {
this.onSave();
done();
}).catch((e) => {
this.$emit('cancel');
done();
});
},
onOpened() {
this.editorReady = true;
this.$nextTick(() => {
this.$refs.behaviorEditor.edit();
});
},
...mapMutations([
'behavior_startEdit',
'behavior_save',
'behavior_cancel',
]),
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
.history/src/views/Editor/dialogs/BehaviorEditorDialog_20191203181711.vue deleted 100644 → 0
View file @ 79d92895
<template>
<el-dialog :title="$t('Behavior Editor')" :visible.sync="visible" :before-close="beforeClose" @opened="onOpened"
:fullscreen="true" :close-on-click-modal="false" :close-on-press-escape="false"
:append-to-body="true" custom-class="behavior-editor-dialog">
<behavior-editor v-if="editorReady" ref="behaviorEditor" class="full-size"></behavior-editor>
<div slot="footer" class="dialog-footer">
<el-button size="mini" type="primary" @click="onSave">{{$t('Save')}}</el-button>
</div>
</el-dialog>
</template>
<script>
import {mapState, mapMutations} from 'vuex'
import BehaviorEditor from "../behavior-editor/BehaviorEditor";
export default {
name: "BehaviorEditorDialog",
components: {BehaviorEditor},
data() {
return {
visible: false,
editorReady: false,
}
},
computed: {
...mapState({
data: state => state.project.data,
}),
},
methods: {
show(behaviors, event) {
this.behavior_startEdit({
originData: this.data,
behaviors,
event,
});
this.editorReady = false;
this.visible = true;
},
onSave() {
this.behavior_save();
//this.visible = false;
this.$emit('change');
},
beforeClose(done) {
this.$confirm(this.$t('Save this behavior before'), this.$t('Alert'), {
showClose: false,
closeOnClickModal: false,
closeOnPressEscape: false,
confirmButtonText: this.$t('Confirm'),
cancelButtonText: this.$t('Still Close'),
type: 'warning'
}).then(() => {
this.onSave();
done();
}).catch((e) => {
this.$emit('cancel');
done();
});
},
onOpened() {
this.editorReady = true;
this.$nextTick(() => {
this.$refs.behaviorEditor.edit();
});
},
...mapMutations([
'behavior_startEdit',
'behavior_save',
'behavior_cancel',
]),
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
.history/src/views/Editor/dialogs/BehaviorEditorDialog_20191203181752.vue deleted 100644 → 0
View file @ 79d92895
<template>
<el-dialog :title="$t('Behavior Editor')" :visible.sync="visible" :before-close="beforeClose" @opened="onOpened"
:fullscreen="true" :close-on-click-modal="false" :close-on-press-escape="false"
:append-to-body="true" custom-class="behavior-editor-dialog">
<behavior-editor v-if="editorReady" ref="behaviorEditor" class="full-size"></behavior-editor>
<div slot="footer" class="dialog-footer">
<el-button size="mini" type="primary" @click="onSave">{{$t('Save')}}</el-button>
</div>
</el-dialog>
</template>
<script>
import {mapState, mapMutations} from 'vuex'
import BehaviorEditor from "../behavior-editor/BehaviorEditor";
export default {
name: "BehaviorEditorDialog",
components: {BehaviorEditor},
data() {
return {
visible: false,
editorReady: false,
}
},
computed: {
...mapState({
data: state => state.project.data,
}),
},
methods: {
show(behaviors, event) {
this.behavior_startEdit({
originData: this.data,
behaviors,
event,
});
this.editorReady = false;
this.visible = true;
},
onSave() {
this.behavior_save();
alert(2)
//this.visible = false;
this.$emit('change');
},
beforeClose(done) {
this.$confirm(this.$t('Save this behavior before'), this.$t('Alert'), {
showClose: false,
closeOnClickModal: false,
closeOnPressEscape: false,
confirmButtonText: this.$t('Confirm'),
cancelButtonText: this.$t('Still Close'),
type: 'warning'
}).then(() => {
this.onSave();
done();
}).catch((e) => {
this.$emit('cancel');
done();
});
},
onOpened() {
this.editorReady = true;
this.$nextTick(() => {
this.$refs.behaviorEditor.edit();
});
},
...mapMutations([
'behavior_startEdit',
'behavior_save',
'behavior_cancel',
]),
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
.history/src/views/Editor/dialogs/BehaviorEditorDialog_20191203181815.vue deleted 100644 → 0
View file @ 79d92895
<template>
<el-dialog :title="$t('Behavior Editor')" :visible.sync="visible" :before-close="beforeClose" @opened="onOpened"
:fullscreen="true" :close-on-click-modal="false" :close-on-press-escape="false"
:append-to-body="true" custom-class="behavior-editor-dialog">
<behavior-editor v-if="editorReady" ref="behaviorEditor" class="full-size"></behavior-editor>
<div slot="footer" class="dialog-footer">
<el-button size="mini" type="primary" @click="onSave">{{$t('Save')}}</el-button>
</div>
</el-dialog>
</template>
<script>
import {mapState, mapMutations} from 'vuex'
import BehaviorEditor from "../behavior-editor/BehaviorEditor";
export default {
name: "BehaviorEditorDialog",
components: {BehaviorEditor},
data() {
return {
visible: false,
editorReady: false,
}
},
computed: {
...mapState({
data: state => state.project.data,
}),
},
methods: {
show(behaviors, event) {
this.behavior_startEdit({
originData: this.data,
behaviors,
event,
});
this.editorReady = false;
this.visible = true;
},
onSave() {
this.behavior_save();
this.visible = false;
this.$emit('change');
},
beforeClose(done) {
this.$confirm(this.$t('Save this behavior before'), this.$t('Alert'), {
showClose: false,
closeOnClickModal: false,
closeOnPressEscape: false,
confirmButtonText: this.$t('Confirm'),
cancelButtonText: this.$t('Still Close'),
type: 'warning'
}).then(() => {
this.onSave();
done();
}).catch((e) => {
this.$emit('cancel');
done();
});
},
onOpened() {
this.editorReady = true;
this.$nextTick(() => {
this.$refs.behaviorEditor.edit();
});
},
...mapMutations([
'behavior_startEdit',
'behavior_save',
'behavior_cancel',
]),
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
.history/src/views/Editor/dialogs/BehaviorEditorDialog_20191203181831.vue deleted 100644 → 0
View file @ 79d92895
<template>
<el-dialog :title="$t('Behavior Editor')" :visible.sync="visible" :before-close="beforeClose" @opened="onOpened"
:fullscreen="true" :close-on-click-modal="false" :close-on-press-escape="false"
:append-to-body="true" custom-class="behavior-editor-dialog">
<behavior-editor v-if="editorReady" ref="behaviorEditor" class="full-size"></behavior-editor>
<div slot="footer" class="dialog-footer">
<el-button size="mini" type="primary" @click="onSave">{{$t('Save')}}</el-button>
</div>
</el-dialog>
</template>
<script>
import {mapState, mapMutations} from 'vuex'
import BehaviorEditor from "../behavior-editor/BehaviorEditor";
export default {
name: "BehaviorEditorDialog",
components: {BehaviorEditor},
data() {
return {
visible: false,
editorReady: false,
}
},
computed: {
...mapState({
data: state => state.project.data,
}),
},
methods: {
show(behaviors, event) {
this.behavior_startEdit({
originData: this.data,
behaviors,
event,
});
this.editorReady = false;
this.visible = true;
},
onSave() {
this.behavior_save();
alert(2)
//this.visible = false;
this.$emit('change');
},
beforeClose(done) {
this.$confirm(this.$t('Save this behavior before'), this.$t('Alert'), {
showClose: false,
closeOnClickModal: false,
closeOnPressEscape: false,
confirmButtonText: this.$t('Confirm'),
cancelButtonText: this.$t('Still Close'),
type: 'warning'
}).then(() => {
this.onSave();
done();
}).catch((e) => {
this.$emit('cancel');
done();
});
},
onOpened() {
this.editorReady = true;
this.$nextTick(() => {
this.$refs.behaviorEditor.edit();
});
},
...mapMutations([
'behavior_startEdit',
'behavior_save',
'behavior_cancel',
]),
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
.history/src/views/Editor/dialogs/BehaviorEditorDialog_20191203190629.vue deleted 100644 → 0
View file @ 79d92895
<template>
<el-dialog :title="$t('Behavior Editor')" :visible.sync="visible" :before-close="beforeClose" @opened="onOpened"
:fullscreen="true" :close-on-click-modal="false" :close-on-press-escape="false"
:append-to-body="true" custom-class="behavior-editor-dialog">
<behavior-editor v-if="editorReady" ref="behaviorEditor" class="full-size"></behavior-editor>
<div slot="footer" class="dialog-footer">
<el-button size="mini" type="primary" @click="onSave">{{$t('Save')}}</el-button>
</div>
</el-dialog>
</template>
<script>
import {mapState, mapMutations} from 'vuex'
import BehaviorEditor from "../behavior-editor/BehaviorEditor";
export default {
name: "BehaviorEditorDialog",
components: {BehaviorEditor},
data() {
return {
visible: false,
editorReady: false,
}
},
computed: {
...mapState({
data: state => state.project.data,
}),
},
methods: {
show(behaviors, event) {
this.behavior_startEdit({
originData: this.data,
behaviors,
event,
});
this.editorReady = false;
this.visible = true;
},
onSave() {
this.behavior_save();
alert(2)
this.$emit('change');
},
beforeClose(done) {
this.$confirm(this.$t('Save this behavior before'), this.$t('Alert'), {
showClose: false,
closeOnClickModal: false,
closeOnPressEscape: false,
confirmButtonText: this.$t('Confirm'),
cancelButtonText: this.$t('Still Close'),
type: 'warning'
}).then(() => {
this.onSave();
done();
}).catch((e) => {
this.$emit('cancel');
done();
});
},
onOpened() {
this.editorReady = true;
this.$nextTick(() => {
this.$refs.behaviorEditor.edit();
});
},
...mapMutations([
'behavior_startEdit',
'behavior_save',
'behavior_cancel',
]),
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
.history/src/views/Editor/dialogs/BehaviorEditorDialog_20191203190735.vue deleted 100644 → 0
View file @ 79d92895
<template>
<el-dialog :title="$t('Behavior Editor')" :visible.sync="visible" :before-close="beforeClose" @opened="onOpened"
:fullscreen="true" :close-on-click-modal="false" :close-on-press-escape="false"
:append-to-body="true" custom-class="behavior-editor-dialog">
<behavior-editor v-if="editorReady" ref="behaviorEditor" class="full-size"></behavior-editor>
<div slot="footer" class="dialog-footer">
<el-button size="mini" type="primary" @click="onSave">{{$t('Save')}}</el-button>
</div>
</el-dialog>
</template>
<script>
import {mapState, mapMutations} from 'vuex'
import BehaviorEditor from "../behavior-editor/BehaviorEditor";
import events from "@/global-events.js"
export default {
name: "BehaviorEditorDialog",
components: {BehaviorEditor},
data() {
return {
visible: false,
editorReady: false,
}
},
computed: {
...mapState({
data: state => state.project.data,
}),
},
methods: {
show(behaviors, event) {
this.behavior_startEdit({
originData: this.data,
behaviors,
event,
});
this.editorReady = false;
this.visible = true;
},
onSave() {
this.behavior_save();
this.$emit('change');
events.$emit('saveAndPreview')
},
beforeClose(done) {
this.$confirm(this.$t('Save this behavior before'), this.$t('Alert'), {
showClose: false,
closeOnClickModal: false,
closeOnPressEscape: false,
confirmButtonText: this.$t('Confirm'),
cancelButtonText: this.$t('Still Close'),
type: 'warning'
}).then(() => {
this.onSave();
done();
}).catch((e) => {
this.$emit('cancel');
done();
});
},
onOpened() {
this.editorReady = true;
this.$nextTick(() => {
this.$refs.behaviorEditor.edit();
});
},
...mapMutations([
'behavior_startEdit',
'behavior_save',
'behavior_cancel',
]),
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
.history/src/views/Editor/dialogs/BehaviorEditorDialog_20191203190912.vue deleted 100644 → 0
View file @ 79d92895
<template>
<el-dialog :title="$t('Behavior Editor')" :visible.sync="visible" :before-close="beforeClose" @opened="onOpened"
:fullscreen="true" :close-on-click-modal="false" :close-on-press-escape="false"
:append-to-body="true" custom-class="behavior-editor-dialog">
<behavior-editor v-if="editorReady" ref="behaviorEditor" class="full-size"></behavior-editor>
<div slot="footer" class="dialog-footer">
<el-button size="mini" type="primary" @click="onSave">{{$t('Save')}}</el-button>
</div>
</el-dialog>
</template>
<script>
import {mapState, mapMutations} from 'vuex'
import BehaviorEditor from "../behavior-editor/BehaviorEditor";
import events from "@/global-events.js"
export default {
name: "BehaviorEditorDialog",
components: {BehaviorEditor},
data() {
return {
visible: false,
editorReady: false,
}
},
computed: {
...mapState({
data: state => state.project.data,
}),
},
created(){
events.$on('BehaviorSave',()=>{
this.onSave()
});
},
methods: {
show(behaviors, event) {
this.behavior_startEdit({
originData: this.data,
behaviors,
event,
});
this.editorReady = false;
this.visible = true;
},
onSave() {
this.behavior_save();
this.$emit('change');
events.$emit('saveAndPreview')
},
beforeClose(done) {
this.$confirm(this.$t('Save this behavior before'), this.$t('Alert'), {
showClose: false,
closeOnClickModal: false,
closeOnPressEscape: false,
confirmButtonText: this.$t('Confirm'),
cancelButtonText: this.$t('Still Close'),
type: 'warning'
}).then(() => {
this.onSave();
done();
}).catch((e) => {
this.$emit('cancel');
done();
});
},
onOpened() {
this.editorReady = true;
this.$nextTick(() => {
this.$refs.behaviorEditor.edit();
});
},
...mapMutations([
'behavior_startEdit',
'behavior_save',
'behavior_cancel',
]),
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
.history/src/views/Editor/dialogs/BehaviorEditorDialog_20191203190931.vue deleted 100644 → 0
View file @ 79d92895
<template>
<el-dialog :title="$t('Behavior Editor')" :visible.sync="visible" :before-close="beforeClose" @opened="onOpened"
:fullscreen="true" :close-on-click-modal="false" :close-on-press-escape="false"
:append-to-body="true" custom-class="behavior-editor-dialog">
<behavior-editor v-if="editorReady" ref="behaviorEditor" class="full-size"></behavior-editor>
<div slot="footer" class="dialog-footer">
<el-button size="mini" type="primary" @click="onSave">{{$t('Save')}}</el-button>
</div>
</el-dialog>
</template>
<script>
import {mapState, mapMutations} from 'vuex'
import BehaviorEditor from "../behavior-editor/BehaviorEditor";
import events from "@/global-events.js"
export default {
name: "BehaviorEditorDialog",
components: {BehaviorEditor},
data() {
return {
visible: false,
editorReady: false,
}
},
computed: {
...mapState({
data: state => state.project.data,
}),
},
created(){
events.$on('behaviorSave',()=>{
this.onSave()
});
},
methods: {
show(behaviors, event) {
this.behavior_startEdit({
originData: this.data,
behaviors,
event,
});
this.editorReady = false;
this.visible = true;
},
onSave() {
this.behavior_save();
this.$emit('change');
events.$emit('saveAndPreview')
},
beforeClose(done) {
this.$confirm(this.$t('Save this behavior before'), this.$t('Alert'), {
showClose: false,
closeOnClickModal: false,
closeOnPressEscape: false,
confirmButtonText: this.$t('Confirm'),
cancelButtonText: this.$t('Still Close'),
type: 'warning'
}).then(() => {
this.onSave();
done();
}).catch((e) => {
this.$emit('cancel');
done();
});
},
onOpened() {
this.editorReady = true;
this.$nextTick(() => {
this.$refs.behaviorEditor.edit();
});
},
...mapMutations([
'behavior_startEdit',
'behavior_save',
'behavior_cancel',
]),
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
.history/src/views/Editor/dialogs/BehaviorEditorDialog_20191203192041.vue deleted 100644 → 0
View file @ 79d92895
<template>
<el-dialog :title="$t('Behavior Editor')" :visible.sync="visible" :before-close="beforeClose" @opened="onOpened"
:fullscreen="true" :close-on-click-modal="false" :close-on-press-escape="false"
:append-to-body="true" custom-class="behavior-editor-dialog">
<behavior-editor v-if="editorReady" ref="behaviorEditor" class="full-size"></behavior-editor>
<div slot="footer" class="dialog-footer">
<el-button size="mini" type="primary" @click="onSave">{{$t('Save')}}</el-button>
</div>
</el-dialog>
</template>
<script>
import {mapState, mapMutations} from 'vuex'
import BehaviorEditor from "../behavior-editor/BehaviorEditor";
import events from "@/global-events.js"
export default {
name: "BehaviorEditorDialog",
components: {BehaviorEditor},
data() {
return {
visible: false,
editorReady: false,
}
},
computed: {
...mapState({
data: state => state.project.data,
}),
},
created(){
events.$on('behaviorSave',()=>{
this.onSave()
});
},
methods: {
show(behaviors, event) {
this.behavior_startEdit({
originData: this.data,
behaviors,
event,
});
this.editorReady = false;
this.visible = true;
},
onSave() {
this.behavior_save();
this.$emit('change');
//events.$emit('saveAndPreview')
},
beforeClose(done) {
this.$confirm(this.$t('Save this behavior before'), this.$t('Alert'), {
showClose: false,
closeOnClickModal: false,
closeOnPressEscape: false,
confirmButtonText: this.$t('Confirm'),
cancelButtonText: this.$t('Still Close'),
type: 'warning'
}).then(() => {
this.onSave();
done();
}).catch((e) => {
this.$emit('cancel');
done();
});
},
onOpened() {
this.editorReady = true;
this.$nextTick(() => {
this.$refs.behaviorEditor.edit();
});
},
...mapMutations([
'behavior_startEdit',
'behavior_save',
'behavior_cancel',
]),
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
.history/src/views/Editor/dialogs/BehaviorEditorDialog_20191203192558.vue deleted 100644 → 0
View file @ 79d92895
<template>
<el-dialog :title="$t('Behavior Editor')" :visible.sync="visible" :before-close="beforeClose" @opened="onOpened"
:fullscreen="true" :close-on-click-modal="false" :close-on-press-escape="false"
:append-to-body="true" custom-class="behavior-editor-dialog">
<behavior-editor v-if="editorReady" ref="behaviorEditor" class="full-size"></behavior-editor>
<div slot="footer" class="dialog-footer">
<el-button size="mini" type="primary" @click="onSave">{{$t('Save')}}</el-button>
</div>
</el-dialog>
</template>
<script>
import {mapState, mapMutations} from 'vuex'
import BehaviorEditor from "../behavior-editor/BehaviorEditor";
import events from "@/global-events.js"
export default {
name: "BehaviorEditorDialog",
components: {BehaviorEditor},
data() {
return {
visible: false,
editorReady: false,
}
},
computed: {
...mapState({
data: state => state.project.data,
}),
},
created(){
events.$on('behaviorSave',()=>{
this.onSave()
});
},
methods: {
show(behaviors, event) {
this.behavior_startEdit({
originData: this.data,
behaviors,
event,
});
this.editorReady = false;
this.visible = true;
},
onSave() {
this.behavior_save();
this.$emit('change');
this.visible=false;
//events.$emit('saveAndPreview')
},
beforeClose(done) {
this.$confirm(this.$t('Save this behavior before'), this.$t('Alert'), {
showClose: false,
closeOnClickModal: false,
closeOnPressEscape: false,
confirmButtonText: this.$t('Confirm'),
cancelButtonText: this.$t('Still Close'),
type: 'warning'
}).then(() => {
this.onSave();
done();
}).catch((e) => {
this.$emit('cancel');
done();
});
},
onOpened() {
this.editorReady = true;
this.$nextTick(() => {
this.$refs.behaviorEditor.edit();
});
},
...mapMutations([
'behavior_startEdit',
'behavior_save',
'behavior_cancel',
]),
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
.history/src/views/Editor/dialogs/BehaviorEditorDialog_20191203192822.vue deleted 100644 → 0
View file @ 79d92895
<template>
<el-dialog :title="$t('Behavior Editor')" :visible.sync="visible" :before-close="beforeClose" @opened="onOpened"
:fullscreen="true" :close-on-click-modal="false" :close-on-press-escape="false"
:append-to-body="true" custom-class="behavior-editor-dialog">
<behavior-editor v-if="editorReady" ref="behaviorEditor" class="full-size"></behavior-editor>
<div slot="footer" class="dialog-footer">
<el-button size="mini" type="primary" @click="onSave">{{$t('Save')}}</el-button>
</div>
</el-dialog>
</template>
<script>
import {mapState, mapMutations} from 'vuex'
import BehaviorEditor from "../behavior-editor/BehaviorEditor";
import events from "@/global-events.js"
export default {
name: "BehaviorEditorDialog",
components: {BehaviorEditor},
data() {
return {
visible: false,
editorReady: false,
}
},
computed: {
...mapState({
data: state => state.project.data,
}),
},
created(){
events.$on('behaviorSave',()=>{
this.onSave()
});
},
methods: {
show(behaviors, event) {
this.behavior_startEdit({
originData: this.data,
behaviors,
event,
});
this.editorReady = false;
this.visible = true;
},
onSave() {
this.behavior_save();
this.$emit('change');
//this.visible=false;
//events.$emit('saveAndPreview')
},
beforeClose(done) {
this.$confirm(this.$t('Save this behavior before'), this.$t('Alert'), {
showClose: false,
closeOnClickModal: false,
closeOnPressEscape: false,
confirmButtonText: this.$t('Confirm'),
cancelButtonText: this.$t('Still Close'),
type: 'warning'
}).then(() => {
this.onSave();
done();
}).catch((e) => {
this.$emit('cancel');
done();
});
},
onOpened() {
this.editorReady = true;
this.$nextTick(() => {
this.$refs.behaviorEditor.edit();
});
},
...mapMutations([
'behavior_startEdit',
'behavior_save',
'behavior_cancel',
]),
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
.history/src/views/Editor/dialogs/BehaviorEditorDialog_20191203193804.vue deleted 100644 → 0
View file @ 79d92895
<template>
<el-dialog :title="$t('Behavior Editor')" :visible.sync="visible" :before-close="beforeClose" @opened="onOpened"
:fullscreen="true" :close-on-click-modal="false" :close-on-press-escape="false"
:append-to-body="true" custom-class="behavior-editor-dialog">
<behavior-editor v-if="editorReady" ref="behaviorEditor" class="full-size"></behavior-editor>
<div slot="footer" class="dialog-footer">
<el-button size="mini" type="primary" @click="onSave">{{$t('Save')}}</el-button>
</div>
</el-dialog>
</template>
<script>
import {mapState, mapMutations} from 'vuex'
import BehaviorEditor from "../behavior-editor/BehaviorEditor";
import events from "@/global-events.js"
export default {
name: "BehaviorEditorDialog",
components: {BehaviorEditor},
data() {
return {
visible: false,
editorReady: false,
}
},
computed: {
...mapState({
data: state => state.project.data,
}),
},
created(){
events.$on('behaviorSave',()=>{
this.onSave()
});
},
methods: {
show(behaviors, event) {
this.behavior_startEdit({
originData: this.data,
behaviors,
event,
});
this.editorReady = false;
this.visible = true;
},
onSave() {
this.behavior_save();
this.$emit('change');
//this.visible=false;
//events.$emit('saveAndPreview')
},
beforeClose(done) {
this.$confirm(this.$t('Save this behavior before'), this.$t('Alert'), {
showClose: false,
closeOnClickModal: false,
closeOnPressEscape: false,
confirmButtonText: this.$t('Confirm'),
cancelButtonText: this.$t('Still Close'),
type: 'warning'
}).then(() => {
this.onSave();
done();
}).catch((e) => {
this.$emit('cancel');
done();
});
},
onOpened() {
this.editorReady = true;
this.$nextTick(() => {
this.$refs.behaviorEditor.edit();
});
},
...mapMutations([
'behavior_startEdit',
'behavior_save',
'behavior_cancel',
]),
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
.history/src/views/Editor/dialogs/BehaviorEditorDialog_20191203194607.vue deleted 100644 → 0
View file @ 79d92895
<template>
<el-dialog :title="$t('Behavior Editor')" :visible.sync="visible" :before-close="beforeClose" @opened="onOpened"
:fullscreen="true" :close-on-click-modal="false" :close-on-press-escape="false"
:append-to-body="true" custom-class="behavior-editor-dialog">
<behavior-editor v-if="editorReady" ref="behaviorEditor" class="full-size"></behavior-editor>
<div slot="footer" class="dialog-footer">
<el-button size="mini" type="primary" @click="onSave">{{$t('Save')}}</el-button>
<el-button size="mini" type="primary" @click="onSave">{{$t('Save')}}</el-button>
</div>
</el-dialog>
</template>
<script>
import {mapState, mapMutations} from 'vuex'
import BehaviorEditor from "../behavior-editor/BehaviorEditor";
import events from "@/global-events.js"
export default {
name: "BehaviorEditorDialog",
components: {BehaviorEditor},
data() {
return {
visible: false,
editorReady: false,
}
},
computed: {
...mapState({
data: state => state.project.data,
}),
},
created(){
events.$on('behaviorSave',()=>{
this.onSave()
});
},
methods: {
show(behaviors, event) {
this.behavior_startEdit({
originData: this.data,
behaviors,
event,
});
this.editorReady = false;
this.visible = true;
},
onSave() {
this.behavior_save();
this.$emit('change');
//this.visible=false;
//events.$emit('saveAndPreview')
},
beforeClose(done) {
this.$confirm(this.$t('Save this behavior before'), this.$t('Alert'), {
showClose: false,
closeOnClickModal: false,
closeOnPressEscape: false,
confirmButtonText: this.$t('Confirm'),
cancelButtonText: this.$t('Still Close'),
type: 'warning'
}).then(() => {
this.onSave();
done();
}).catch((e) => {
this.$emit('cancel');
done();
});
},
onOpened() {
this.editorReady = true;
this.$nextTick(() => {
this.$refs.behaviorEditor.edit();
});
},
...mapMutations([
'behavior_startEdit',
'behavior_save',
'behavior_cancel',
]),
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
.history/src/views/Editor/dialogs/BehaviorEditorDialog_20191203194626.vue deleted 100644 → 0
View file @ 79d92895
<template>
<el-dialog :title="$t('Behavior Editor')" :visible.sync="visible" :before-close="beforeClose" @opened="onOpened"
:fullscreen="true" :close-on-click-modal="false" :close-on-press-escape="false"
:append-to-body="true" custom-class="behavior-editor-dialog">
<behavior-editor v-if="editorReady" ref="behaviorEditor" class="full-size"></behavior-editor>
<div slot="footer" class="dialog-footer">
<el-button size="mini" type="primary" @click="onSave">{{$t('Save')}}</el-button>
<el-button size="mini" type="primary" @click="onSave">{{$t('Save And Preview')}}</el-button>
</div>
</el-dialog>
</template>
<script>
import {mapState, mapMutations} from 'vuex'
import BehaviorEditor from "../behavior-editor/BehaviorEditor";
import events from "@/global-events.js"
export default {
name: "BehaviorEditorDialog",
components: {BehaviorEditor},
data() {
return {
visible: false,
editorReady: false,
}
},
computed: {
...mapState({
data: state => state.project.data,
}),
},
created(){
events.$on('behaviorSave',()=>{
this.onSave()
});
},
methods: {
show(behaviors, event) {
this.behavior_startEdit({
originData: this.data,
behaviors,
event,
});
this.editorReady = false;
this.visible = true;
},
onSave() {
this.behavior_save();
this.$emit('change');
//this.visible=false;
//events.$emit('saveAndPreview')
},
beforeClose(done) {
this.$confirm(this.$t('Save this behavior before'), this.$t('Alert'), {
showClose: false,
closeOnClickModal: false,
closeOnPressEscape: false,
confirmButtonText: this.$t('Confirm'),
cancelButtonText: this.$t('Still Close'),
type: 'warning'
}).then(() => {
this.onSave();
done();
}).catch((e) => {
this.$emit('cancel');
done();
});
},
onOpened() {
this.editorReady = true;
this.$nextTick(() => {
this.$refs.behaviorEditor.edit();
});
},
...mapMutations([
'behavior_startEdit',
'behavior_save',
'behavior_cancel',
]),
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
.history/src/views/Editor/dialogs/BehaviorEditorDialog_20191203194640.vue deleted 100644 → 0
View file @ 79d92895
<template>
<el-dialog :title="$t('Behavior Editor')" :visible.sync="visible" :before-close="beforeClose" @opened="onOpened"
:fullscreen="true" :close-on-click-modal="false" :close-on-press-escape="false"
:append-to-body="true" custom-class="behavior-editor-dialog">
<behavior-editor v-if="editorReady" ref="behaviorEditor" class="full-size"></behavior-editor>
<div slot="footer" class="dialog-footer">
<el-button size="mini" type="primary" @click="onSave(false)">{{$t('Save')}}</el-button>
<el-button size="mini" type="primary" @click="onSave(true)">{{$t('Save And Preview')}}</el-button>
</div>
</el-dialog>
</template>
<script>
import {mapState, mapMutations} from 'vuex'
import BehaviorEditor from "../behavior-editor/BehaviorEditor";
import events from "@/global-events.js"
export default {
name: "BehaviorEditorDialog",
components: {BehaviorEditor},
data() {
return {
visible: false,
editorReady: false,
}
},
computed: {
...mapState({
data: state => state.project.data,
}),
},
created(){
events.$on('behaviorSave',()=>{
this.onSave()
});
},
methods: {
show(behaviors, event) {
this.behavior_startEdit({
originData: this.data,
behaviors,
event,
});
this.editorReady = false;
this.visible = true;
},
onSave() {
this.behavior_save();
this.$emit('change');
//this.visible=false;
//events.$emit('saveAndPreview')
},
beforeClose(done) {
this.$confirm(this.$t('Save this behavior before'), this.$t('Alert'), {
showClose: false,
closeOnClickModal: false,
closeOnPressEscape: false,
confirmButtonText: this.$t('Confirm'),
cancelButtonText: this.$t('Still Close'),
type: 'warning'
}).then(() => {
this.onSave();
done();
}).catch((e) => {
this.$emit('cancel');
done();
});
},
onOpened() {
this.editorReady = true;
this.$nextTick(() => {
this.$refs.behaviorEditor.edit();
});
},
...mapMutations([
'behavior_startEdit',
'behavior_save',
'behavior_cancel',
]),
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
.history/src/views/Editor/dialogs/BehaviorEditorDialog_20191203194716.vue deleted 100644 → 0
View file @ 79d92895
<template>
<el-dialog :title="$t('Behavior Editor')" :visible.sync="visible" :before-close="beforeClose" @opened="onOpened"
:fullscreen="true" :close-on-click-modal="false" :close-on-press-escape="false"
:append-to-body="true" custom-class="behavior-editor-dialog">
<behavior-editor v-if="editorReady" ref="behaviorEditor" class="full-size"></behavior-editor>
<div slot="footer" class="dialog-footer">
<el-button size="mini" type="primary" @click="onSave(false)">{{$t('Save')}}</el-button>
<el-button size="mini" type="primary" @click="onSave(true)">{{$t('Save And Preview')}}</el-button>
</div>
</el-dialog>
</template>
<script>
import {mapState, mapMutations} from 'vuex'
import BehaviorEditor from "../behavior-editor/BehaviorEditor";
import events from "@/global-events.js"
export default {
name: "BehaviorEditorDialog",
components: {BehaviorEditor},
data() {
return {
visible: false,
editorReady: false,
}
},
computed: {
...mapState({
data: state => state.project.data,
}),
},
created(){
events.$on('behaviorSave',()=>{
this.onSave()
});
},
methods: {
show(behaviors, event) {
this.behavior_startEdit({
originData: this.data,
behaviors,
event,
});
this.editorReady = false;
this.visible = true;
},
onSave(isPreview) {
this.behavior_save();
this.$emit('change',isPreview);
//this.visible=false;
//events.$emit('saveAndPreview')
},
beforeClose(done) {
this.$confirm(this.$t('Save this behavior before'), this.$t('Alert'), {
showClose: false,
closeOnClickModal: false,
closeOnPressEscape: false,
confirmButtonText: this.$t('Confirm'),
cancelButtonText: this.$t('Still Close'),
type: 'warning'
}).then(() => {
this.onSave();
done();
}).catch((e) => {
this.$emit('cancel');
done();
});
},
onOpened() {
this.editorReady = true;
this.$nextTick(() => {
this.$refs.behaviorEditor.edit();
});
},
...mapMutations([
'behavior_startEdit',
'behavior_save',
'behavior_cancel',
]),
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
.history/src/views/Editor/dialogs/BehaviorEditorDialog_20191203195835.vue deleted 100644 → 0
View file @ 79d92895
<template>
<el-dialog :title="$t('Behavior Editor')" :visible.sync="visible" :before-close="beforeClose" @opened="onOpened"
:fullscreen="true" :close-on-click-modal="false" :close-on-press-escape="false"
:append-to-body="true" custom-class="behavior-editor-dialog">
<behavior-editor v-if="editorReady" ref="behaviorEditor" class="full-size"></behavior-editor>
<div slot="footer" class="dialog-footer">
<el-button size="mini" type="primary" @click="onSave(false)">{{$t('Save')}}</el-button>
<el-button size="mini" type="primary" @click="onSave(true)">{{$t('Save And Preview')}}</el-button>
</div>
</el-dialog>
</template>
<script>
import {mapState, mapMutations} from 'vuex'
import BehaviorEditor from "../behavior-editor/BehaviorEditor";
import events from "@/global-events.js"
export default {
name: "BehaviorEditorDialog",
components: {BehaviorEditor},
data() {
return {
visible: false,
editorReady: false,
}
},
computed: {
...mapState({
data: state => state.project.data,
}),
},
created(){
events.$on('behaviorSave',()=>{
this.onSave()
});
},
methods: {
show(behaviors, event) {
this.behavior_startEdit({
originData: this.data,
behaviors,
event,
});
this.editorReady = false;
this.visible = true;
},
onSave(isPreview) {
this.behavior_save();
this.$emit('change');
//this.visible=false;
//events.$emit('saveAndPreview')
},
beforeClose(done) {
this.$confirm(this.$t('Save this behavior before'), this.$t('Alert'), {
showClose: false,
closeOnClickModal: false,
closeOnPressEscape: false,
confirmButtonText: this.$t('Confirm'),
cancelButtonText: this.$t('Still Close'),
type: 'warning'
}).then(() => {
this.onSave();
done();
}).catch((e) => {
this.$emit('cancel');
done();
});
},
onOpened() {
this.editorReady = true;
this.$nextTick(() => {
this.$refs.behaviorEditor.edit();
});
},
...mapMutations([
'behavior_startEdit',
'behavior_save',
'behavior_cancel',
]),
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
.history/src/views/Editor/dialogs/BehaviorEditorDialog_20191203200122.vue deleted 100644 → 0
View file @ 79d92895
<template>
<el-dialog :title="$t('Behavior Editor')" :visible.sync="visible" :before-close="beforeClose" @opened="onOpened"
:fullscreen="true" :close-on-click-modal="false" :close-on-press-escape="false"
:append-to-body="true" custom-class="behavior-editor-dialog">
<behavior-editor v-if="editorReady" ref="behaviorEditor" class="full-size"></behavior-editor>
<div slot="footer" class="dialog-footer">
<el-button size="mini" type="primary" @click="onSave(false)">{{$t('Save')}}</el-button>
<el-button size="mini" type="primary" @click="onSave(true)">{{$t('Save And Preview')}}</el-button>
</div>
</el-dialog>
</template>
<script>
import {mapState, mapMutations} from 'vuex'
import BehaviorEditor from "../behavior-editor/BehaviorEditor";
import events from "@/global-events.js"
export default {
name: "BehaviorEditorDialog",
components: {BehaviorEditor},
data() {
return {
visible: false,
editorReady: false,
}
},
computed: {
...mapState({
data: state => state.project.data,
}),
},
created(){
events.$on('behaviorSave',()=>{
this.onSave()
});
},
methods: {
show(behaviors, event) {
this.behavior_startEdit({
originData: this.data,
behaviors,
event,
});
this.editorReady = false;
this.visible = true;
},
onSave(isPreview) {
this.behavior_save();
this.$emit('change',isPreview);
//this.visible=false;
//events.$emit('saveAndPreview')
},
beforeClose(done) {
this.$confirm(this.$t('Save this behavior before'), this.$t('Alert'), {
showClose: false,
closeOnClickModal: false,
closeOnPressEscape: false,
confirmButtonText: this.$t('Confirm'),
cancelButtonText: this.$t('Still Close'),
type: 'warning'
}).then(() => {
this.onSave();
done();
}).catch((e) => {
this.$emit('cancel');
done();
});
},
onOpened() {
this.editorReady = true;
this.$nextTick(() => {
this.$refs.behaviorEditor.edit();
});
},
...mapMutations([
'behavior_startEdit',
'behavior_save',
'behavior_cancel',
]),
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
.history/src/views/Editor/dialogs/BehaviorEditorDialog_20191203200337.vue deleted 100644 → 0
View file @ 79d92895
<template>
<el-dialog :title="$t('Behavior Editor')" :visible.sync="visible" :before-close="beforeClose" @opened="onOpened"
:fullscreen="true" :close-on-click-modal="false" :close-on-press-escape="false"
:append-to-body="true" custom-class="behavior-editor-dialog">
<behavior-editor v-if="editorReady" ref="behaviorEditor" class="full-size"></behavior-editor>
<div slot="footer" class="dialog-footer">
<el-button size="mini" type="primary" @click="onSave(false)">{{$t('Save')}}</el-button>
<el-button size="mini" type="primary" @click="onSave(true)">{{$t('Save And Preview')}}</el-button>
</div>
</el-dialog>
</template>
<script>
import {mapState, mapMutations} from 'vuex'
import BehaviorEditor from "../behavior-editor/BehaviorEditor";
import events from "@/global-events.js"
export default {
name: "BehaviorEditorDialog",
components: {BehaviorEditor},
data() {
return {
visible: false,
editorReady: false,
}
},
computed: {
...mapState({
data: state => state.project.data,
}),
},
created(){
events.$on('behaviorSave',(isPreview)=>{
this.onSave(isPreview)
});
},
methods: {
show(behaviors, event) {
this.behavior_startEdit({
originData: this.data,
behaviors,
event,
});
this.editorReady = false;
this.visible = true;
},
onSave(isPreview) {
this.behavior_save();
this.$emit('change',isPreview);
//this.visible=false;
//events.$emit('saveAndPreview')
},
beforeClose(done) {
this.$confirm(this.$t('Save this behavior before'), this.$t('Alert'), {
showClose: false,
closeOnClickModal: false,
closeOnPressEscape: false,
confirmButtonText: this.$t('Confirm'),
cancelButtonText: this.$t('Still Close'),
type: 'warning'
}).then(() => {
this.onSave();
done();
}).catch((e) => {
this.$emit('cancel');
done();
});
},
onOpened() {
this.editorReady = true;
this.$nextTick(() => {
this.$refs.behaviorEditor.edit();
});
},
...mapMutations([
'behavior_startEdit',
'behavior_save',
'behavior_cancel',
]),
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
.history/src/views/Editor/dialogs/BehaviorEditorDialog_20191203201330.vue deleted 100644 → 0
View file @ 79d92895
<template>
<el-dialog :title="$t('Behavior Editor')" :visible.sync="visible" :before-close="beforeClose" @opened="onOpened"
:fullscreen="true" :close-on-click-modal="false" :close-on-press-escape="false"
:append-to-body="true" custom-class="behavior-editor-dialog">
<behavior-editor v-if="editorReady" ref="behaviorEditor" class="full-size"></behavior-editor>
<div slot="footer" class="dialog-footer">
<el-button size="mini" type="primary" @click="onSave(false)">{{$t('Save')}}</el-button>
<el-button size="mini" type="primary" @click="onSave(true)">{{$t('Save And Preview')}}</el-button>
</div>
</el-dialog>
</template>
<script>
import {mapState, mapMutations} from 'vuex'
import BehaviorEditor from "../behavior-editor/BehaviorEditor";
import events from "@/global-events.js"
export default {
name: "BehaviorEditorDialog",
components: {BehaviorEditor},
data() {
return {
visible: false,
editorReady: false,
}
},
computed: {
...mapState({
data: state => state.project.data,
}),
},
created(){
events.$on('behaviorSave',(isPreview)=>{
this.onSave(isPreview)
});
},
methods: {
show(behaviors, event) {
this.behavior_startEdit({
originData: this.data,
behaviors,
event,
});
this.editorReady = false;
this.visible = true;
},
onSave(isPreview) {
this.behavior_save();
this.$emit('change',isPreview);
},
beforeClose(done) {
this.$confirm(this.$t('Save this behavior before'), this.$t('Alert'), {
showClose: false,
closeOnClickModal: false,
closeOnPressEscape: false,
confirmButtonText: this.$t('Confirm'),
cancelButtonText: this.$t('Still Close'),
type: 'warning'
}).then(() => {
this.onSave();
done();
}).catch((e) => {
this.$emit('cancel');
done();
});
},
onOpened() {
this.editorReady = true;
this.$nextTick(() => {
this.$refs.behaviorEditor.edit();
});
},
...mapMutations([
'behavior_startEdit',
'behavior_save',
'behavior_cancel',
]),
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
.history/src/views/Editor_20191203143311.vue deleted 100644 → 0
View file @ 79d92895
<template>
<div class="editor" v-if="ready">
<tool-bar @click-menu="clickMenu"/>
<split-panes class="pane-container" @resized="onPanesReSized(0, $event)">
<split-panes splitpanes-min="40" :splitpanes-size="getSize(0, 0)" horizontal @resized="onPanesReSized(1, $event)">
<split-panes splitpanes-min="20" :splitpanes-size="getSize(1, 0)" @resized="onPanesReSized(2, $event)">
<views splitpanes-min="20" :splitpanes-size="getSize(2, 0)"></views>
<playground splitpanes-min="20" :splitpanes-size="getSize(2, 1)"></playground>
</split-panes>
<assets splitpanes-min="20" :splitpanes-size="getSize(1, 1)"></assets>
</split-panes>
<inspector splitpanes-min="20" :splitpanes-size="getSize(0, 1)"></inspector>
</split-panes>
<details-dialog ref="dialogsDialog"/>
<pack-result-dialog ref="packResultDialog"/>
</div>
</template>
<script>
import {mapGetters, mapActions} from 'vuex'
import SplitPanes from 'splitpanes'
import ToolBar from "./Editor/ToolBar";
import Inspector from "./Editor/Inspector";
import Views from "./Editor/Views";
import Playground from "./Editor/Playground";
import Assets from "./Editor/Assets";
import DetailsDialog from "./Editor/dialogs/DetailsDialog";
import {openPreview, playWaiting} from "../utils";
import i18n from "../i18n";
import PackResultDialog from "./Editor/dialogs/PackResultDialog";
export default {
name: 'Editor',
components: {
PackResultDialog,
DetailsDialog,
Assets,
Playground,
Views,
Inspector,
ToolBar,
SplitPanes,
},
data() {
const panesConfig = localStorage.panesConfig ? JSON.parse(localStorage.panesConfig) : [0.8, 0.8, 0.3];
return {
panesConfig,
ready: false,
}
},
watch: {
$route: {
handler: function (val, oldVal) {
console.log('router changed');
this.loadProject();
},
deep: true
}
},
computed: {
...mapGetters([]),
},
async mounted() {
document.addEventListener('keydown', this.onKeyPress);
await playWaiting(this.prepare(), this.$t('Preparing')).catch(e => {
});
this.loadProject();
},
destroyed() {
document.removeEventListener('keydown', this.onKeyPress)
},
methods: {
prepare() {
return Promise.all([
this.updateEnv(),
])
},
onKeyPress(e) {
if (e.key === 's' && (e.ctrlKey || e.metaKey)) {
e.preventDefault();
this.saveProject();
return false;
}
},
async loadProject() {
const {projectID} = this.$route.params;
if (await this.localVersionExist(projectID)) {
this.$confirm(this.$t('Unsaved version found locally'), this.$t('Alert'), {
showClose: false,
closeOnClickModal: false,
closeOnPressEscape: false,
confirmButtonText: this.$t('Local Version'),
cancelButtonText: this.$t('Remote Version'),
type: 'warning'
}).then(() => {
this.loadLocalVersion(projectID);
}).catch((e) => {
if (e === 'cancel') {
this.loadRemoteVersion(projectID);
} else {
console.log(e);
}
});
} else {
this.loadRemoteVersion(projectID);
}
},
loadLocalVersion(projectID) {
this.ready = false;
this.loadFromLocal(projectID);
this.$nextTick(() => {
this.ready = true;
});
},
async loadRemoteVersion(projectID) {
if (projectID) {
this.ready = false;
await playWaiting(this.loadFromRemote(projectID), this.$t('Preparing')).catch(e => {
this.$alert(this.$t('Project does not exist'), this.$t('Alert'), {
confirmButtonText: this.$t('Confirm'),
callback: action => {
this.$router.replace({name: 'home'});
}
});
});
this.ready = true;
} else {
this.$router.push({name: 'home'})
}
},
getSize(id, side) {
let ratio = this.panesConfig[id];
return (side === 0 ? ratio : 1 - ratio) * 100
},
onPanesReSized(id, configs) {
this.panesConfig[id] = configs[0].width / 100;
localStorage.panesConfig = JSON.stringify(this.panesConfig);
},
async saveProject(closeLoading) {
await playWaiting(this.saveToRemote(), this.$t('Saving'), closeLoading);
this.$message({
message: i18n.t('Save project successfully'), //因为message是异步出现，但是当路由回退的时候，this.i18n的实例已经置空，所以要用全局的i18n实例
type: 'success'
});
},
async clickMenu(menuItem) {
switch (menuItem) {
case 'save':
try {
this.saveProject();
} catch (e) {
}
break;
case 'details':
this.$refs.dialogsDialog.show();
break;
case 'preview':
await this.pack(true);
break;
case 'pack':
await this.pack();
break;
case 'undo':
this.$store.commit('undoRedo', 1);
break;
case 'redo':
this.$store.commit('undoRedo', -1);
break;
case 'exit':
const {projectID} = this.$route.params;
if (await this.localVersionExist(projectID)) {
this.$confirm(this.$t('Unsaved Alert'), this.$t('Alert'), {
confirmButtonText: this.$t('Save'),
cancelButtonText: this.$t('Exit'),
type: 'warning'
}).then(() => {
try {
this.saveProject();
this.backToHome();
} catch (e) {
}
}).catch((e) => {
this.backToHome();
});
} else {
this.backToHome();
}
break;
}
},
async pack(debug = false) {
const loading = this.$loading({
lock: true,
text: this.$t('Packing'),
});
try {
await this.saveProject(false);
const packResult = await this.packProject(debug);
this.$message({
message: this.$t('Pack project successfully'),
type: 'success',
duration: 500,
});
if (debug) {
openPreview(packResult);
} else {
this.$refs.packResultDialog.show(packResult);
}
/*this.$confirm(this.$t('Pack project successfully'), this.$t('Alert'), {
confirmButtonText: this.$t('Open in new tab'),
cancelButtonText: this.$t('Close'),
type: 'warning'
}).then(() => {
setTimeout(()=>{
window.open(tplUrl, 'blank');
}, 500);
}).catch(() => {
});*/
} catch (e) {
this.$message({
message: this.$t('Pack project failed'),
type: 'error',
duration: 1000,
});
}
loading.close();
},
backToHome() {
this.$router.replace({name: 'home'});
},
...mapActions([
'localVersionExist',
'loadFromLocal',
'loadFromRemote',
"saveToLocal",
"saveToRemote",
'updateEnv',
'packProject',
])
}
}
</script>
<style lang="scss">
</style>
\ No newline at end of file
.history/src/views/Editor_20191203171550.vue deleted 100644 → 0
View file @ 79d92895
<template>
<div class="editor" v-if="ready">
<tool-bar @click-menu="clickMenu"/>
<split-panes class="pane-container" @resized="onPanesReSized(0, $event)">
<split-panes splitpanes-min="40" :splitpanes-size="getSize(0, 0)" horizontal @resized="onPanesReSized(1, $event)">
<split-panes splitpanes-min="20" :splitpanes-size="getSize(1, 0)" @resized="onPanesReSized(2, $event)">
<views splitpanes-min="20" :splitpanes-size="getSize(2, 0)"></views>
<playground splitpanes-min="20" :splitpanes-size="getSize(2, 1)"></playground>
</split-panes>
<assets splitpanes-min="20" :splitpanes-size="getSize(1, 1)"></assets>
</split-panes>
<inspector splitpanes-min="20" :splitpanes-size="getSize(0, 1)"></inspector>
</split-panes>
<details-dialog ref="dialogsDialog"/>
<pack-result-dialog ref="packResultDialog"/>
</div>
</template>
<script>
import {mapGetters, mapActions} from 'vuex'
import SplitPanes from 'splitpanes'
import ToolBar from "./Editor/ToolBar";
import Inspector from "./Editor/Inspector";
import Views from "./Editor/Views";
import Playground from "./Editor/Playground";
import Assets from "./Editor/Assets";
import DetailsDialog from "./Editor/dialogs/DetailsDialog";
import {openPreview, playWaiting} from "../utils";
import i18n from "../i18n";
import PackResultDialog from "./Editor/dialogs/PackResultDialog";
export default {
name: 'Editor',
components: {
PackResultDialog,
DetailsDialog,
Assets,
Playground,
Views,
Inspector,
ToolBar,
SplitPanes,
},
data() {
const panesConfig = localStorage.panesConfig ? JSON.parse(localStorage.panesConfig) : [0.8, 0.8, 0.3];
return {
panesConfig,
ready: false,
}
},
watch: {
$route: {
handler: function (val, oldVal) {
console.log('router changed');
this.loadProject();
},
deep: true
}
},
computed: {
...mapGetters([]),
},
async mounted() {
document.addEventListener('keydown', this.onKeyPress);
await playWaiting(this.prepare(), this.$t('Preparing')).catch(e => {
});
this.loadProject();
},
destroyed() {
document.removeEventListener('keydown', this.onKeyPress)
},
methods: {
prepare() {
return Promise.all([
this.updateEnv(),
])
},
onKeyPress(e) {
if (e.key === 's' && (e.ctrlKey || e.metaKey)) {
e.preventDefault();
this.saveProject(this.clickMenu("preview"));
return false;
}
},
async loadProject() {
const {projectID} = this.$route.params;
if (await this.localVersionExist(projectID)) {
this.$confirm(this.$t('Unsaved version found locally'), this.$t('Alert'), {
showClose: false,
closeOnClickModal: false,
closeOnPressEscape: false,
confirmButtonText: this.$t('Local Version'),
cancelButtonText: this.$t('Remote Version'),
type: 'warning'
}).then(() => {
this.loadLocalVersion(projectID);
}).catch((e) => {
if (e === 'cancel') {
this.loadRemoteVersion(projectID);
} else {
console.log(e);
}
});
} else {
this.loadRemoteVersion(projectID);
}
},
loadLocalVersion(projectID) {
this.ready = false;
this.loadFromLocal(projectID);
this.$nextTick(() => {
this.ready = true;
});
},
async loadRemoteVersion(projectID) {
if (projectID) {
this.ready = false;
await playWaiting(this.loadFromRemote(projectID), this.$t('Preparing')).catch(e => {
this.$alert(this.$t('Project does not exist'), this.$t('Alert'), {
confirmButtonText: this.$t('Confirm'),
callback: action => {
this.$router.replace({name: 'home'});
}
});
});
this.ready = true;
} else {
this.$router.push({name: 'home'})
}
},
getSize(id, side) {
let ratio = this.panesConfig[id];
return (side === 0 ? ratio : 1 - ratio) * 100
},
onPanesReSized(id, configs) {
this.panesConfig[id] = configs[0].width / 100;
localStorage.panesConfig = JSON.stringify(this.panesConfig);
},
async saveProject(closeLoading) {
await playWaiting(this.saveToRemote(), this.$t('Saving'), closeLoading);
this.$message({
message: i18n.t('Save project successfully'), //因为message是异步出现，但是当路由回退的时候，this.i18n的实例已经置空，所以要用全局的i18n实例
type: 'success'
});
},
async clickMenu(menuItem) {
switch (menuItem) {
case 'save':
try {
this.saveProject();
} catch (e) {
}
break;
case 'details':
this.$refs.dialogsDialog.show();
break;
case 'preview':
await this.pack(true);
break;
case 'pack':
await this.pack();
break;
case 'undo':
this.$store.commit('undoRedo', 1);
break;
case 'redo':
this.$store.commit('undoRedo', -1);
break;
case 'exit':
const {projectID} = this.$route.params;
if (await this.localVersionExist(projectID)) {
this.$confirm(this.$t('Unsaved Alert'), this.$t('Alert'), {
confirmButtonText: this.$t('Save'),
cancelButtonText: this.$t('Exit'),
type: 'warning'
}).then(() => {
try {
this.saveProject();
this.backToHome();
} catch (e) {
}
}).catch((e) => {
this.backToHome();
});
} else {
this.backToHome();
}
break;
}
},
async pack(debug = false) {
const loading = this.$loading({
lock: true,
text: this.$t('Packing'),
});
try {
await this.saveProject(false);
const packResult = await this.packProject(debug);
this.$message({
message: this.$t('Pack project successfully'),
type: 'success',
duration: 500,
});
if (debug) {
openPreview(packResult);
} else {
this.$refs.packResultDialog.show(packResult);
}
/*this.$confirm(this.$t('Pack project successfully'), this.$t('Alert'), {
confirmButtonText: this.$t('Open in new tab'),
cancelButtonText: this.$t('Close'),
type: 'warning'
}).then(() => {
setTimeout(()=>{
window.open(tplUrl, 'blank');
}, 500);
}).catch(() => {
});*/
} catch (e) {
this.$message({
message: this.$t('Pack project failed'),
type: 'error',
duration: 1000,
});
}
loading.close();
},
backToHome() {
this.$router.replace({name: 'home'});
},
...mapActions([
'localVersionExist',
'loadFromLocal',
'loadFromRemote',
"saveToLocal",
"saveToRemote",
'updateEnv',
'packProject',
])
}
}
</script>
<style lang="scss">
</style>
\ No newline at end of file
.history/src/views/Editor_20191203174046.vue deleted 100644 → 0
View file @ 79d92895
<template>
<div class="editor" v-if="ready">
<tool-bar @click-menu="clickMenu"/>
<split-panes class="pane-container" @resized="onPanesReSized(0, $event)">
<split-panes splitpanes-min="40" :splitpanes-size="getSize(0, 0)" horizontal @resized="onPanesReSized(1, $event)">
<split-panes splitpanes-min="20" :splitpanes-size="getSize(1, 0)" @resized="onPanesReSized(2, $event)">
<views splitpanes-min="20" :splitpanes-size="getSize(2, 0)"></views>
<playground splitpanes-min="20" :splitpanes-size="getSize(2, 1)"></playground>
</split-panes>
<assets splitpanes-min="20" :splitpanes-size="getSize(1, 1)"></assets>
</split-panes>
<inspector splitpanes-min="20" :splitpanes-size="getSize(0, 1)"></inspector>
</split-panes>
<details-dialog ref="dialogsDialog"/>
<pack-result-dialog ref="packResultDialog"/>
</div>
</template>
<script>
import {mapGetters, mapActions} from 'vuex'
import SplitPanes from 'splitpanes'
import ToolBar from "./Editor/ToolBar";
import Inspector from "./Editor/Inspector";
import Views from "./Editor/Views";
import Playground from "./Editor/Playground";
import Assets from "./Editor/Assets";
import DetailsDialog from "./Editor/dialogs/DetailsDialog";
import {openPreview, playWaiting} from "../utils";
import i18n from "../i18n";
import PackResultDialog from "./Editor/dialogs/PackResultDialog";
import Vue from "@/global-events.js"
export default {
name: 'Editor',
components: {
PackResultDialog,
DetailsDialog,
Assets,
Playground,
Views,
Inspector,
ToolBar,
SplitPanes,
},
data() {
const panesConfig = localStorage.panesConfig ? JSON.parse(localStorage.panesConfig) : [0.8, 0.8, 0.3];
return {
panesConfig,
ready: false,
}
},
watch: {
$route: {
handler: function (val, oldVal) {
console.log('router changed');
this.loadProject();
},
deep: true
}
},
computed: {
...mapGetters([]),
},
async mounted() {
document.addEventListener('keydown', this.onKeyPress);
await playWaiting(this.prepare(), this.$t('Preparing')).catch(e => {
});
this.loadProject();
},
destroyed() {
document.removeEventListener('keydown', this.onKeyPress)
},
methods: {
prepare() {
return Promise.all([
this.updateEnv(),
])
},
onKeyPress(e) {
if (e.key === 's' && (e.ctrlKey || e.metaKey)) {
e.preventDefault();
this.saveProject(this.clickMenu("preview"));
return false;
}
},
async loadProject() {
const {projectID} = this.$route.params;
if (await this.localVersionExist(projectID)) {
this.$confirm(this.$t('Unsaved version found locally'), this.$t('Alert'), {
showClose: false,
closeOnClickModal: false,
closeOnPressEscape: false,
confirmButtonText: this.$t('Local Version'),
cancelButtonText: this.$t('Remote Version'),
type: 'warning'
}).then(() => {
this.loadLocalVersion(projectID);
}).catch((e) => {
if (e === 'cancel') {
this.loadRemoteVersion(projectID);
} else {
console.log(e);
}
});
} else {
this.loadRemoteVersion(projectID);
}
},
loadLocalVersion(projectID) {
this.ready = false;
this.loadFromLocal(projectID);
this.$nextTick(() => {
this.ready = true;
});
},
async loadRemoteVersion(projectID) {
if (projectID) {
this.ready = false;
await playWaiting(this.loadFromRemote(projectID), this.$t('Preparing')).catch(e => {
this.$alert(this.$t('Project does not exist'), this.$t('Alert'), {
confirmButtonText: this.$t('Confirm'),
callback: action => {
this.$router.replace({name: 'home'});
}
});
});
this.ready = true;
} else {
this.$router.push({name: 'home'})
}
},
getSize(id, side) {
let ratio = this.panesConfig[id];
return (side === 0 ? ratio : 1 - ratio) * 100
},
onPanesReSized(id, configs) {
this.panesConfig[id] = configs[0].width / 100;
localStorage.panesConfig = JSON.stringify(this.panesConfig);
},
async saveProject(closeLoading) {
await playWaiting(this.saveToRemote(), this.$t('Saving'), closeLoading);
this.$message({
message: i18n.t('Save project successfully'), //因为message是异步出现，但是当路由回退的时候，this.i18n的实例已经置空，所以要用全局的i18n实例
type: 'success'
});
},
async clickMenu(menuItem) {
switch (menuItem) {
case 'save':
try {
this.saveProject();
} catch (e) {
}
break;
case 'details':
this.$refs.dialogsDialog.show();
break;
case 'preview':
await this.pack(true);
break;
case 'pack':
await this.pack();
break;
case 'undo':
this.$store.commit('undoRedo', 1);
break;
case 'redo':
this.$store.commit('undoRedo', -1);
break;
case 'exit':
const {projectID} = this.$route.params;
if (await this.localVersionExist(projectID)) {
this.$confirm(this.$t('Unsaved Alert'), this.$t('Alert'), {
confirmButtonText: this.$t('Save'),
cancelButtonText: this.$t('Exit'),
type: 'warning'
}).then(() => {
try {
this.saveProject();
this.backToHome();
} catch (e) {
}
}).catch((e) => {
this.backToHome();
});
} else {
this.backToHome();
}
break;
}
},
async pack(debug = false) {
const loading = this.$loading({
lock: true,
text: this.$t('Packing'),
});
try {
await this.saveProject(false);
const packResult = await this.packProject(debug);
this.$message({
message: this.$t('Pack project successfully'),
type: 'success',
duration: 500,
});
if (debug) {
openPreview(packResult);
} else {
this.$refs.packResultDialog.show(packResult);
}
/*this.$confirm(this.$t('Pack project successfully'), this.$t('Alert'), {
confirmButtonText: this.$t('Open in new tab'),
cancelButtonText: this.$t('Close'),
type: 'warning'
}).then(() => {
setTimeout(()=>{
window.open(tplUrl, 'blank');
}, 500);
}).catch(() => {
});*/
} catch (e) {
this.$message({
message: this.$t('Pack project failed'),
type: 'error',
duration: 1000,
});
}
loading.close();
},
backToHome() {
this.$router.replace({name: 'home'});
},
...mapActions([
'localVersionExist',
'loadFromLocal',
'loadFromRemote',
"saveToLocal",
"saveToRemote",
'updateEnv',
'packProject',
])
}
}
</script>
<style lang="scss">
</style>
\ No newline at end of file
.history/src/views/Editor_20191203174108.vue deleted 100644 → 0
View file @ 79d92895
<template>
<div class="editor" v-if="ready">
<tool-bar @click-menu="clickMenu"/>
<split-panes class="pane-container" @resized="onPanesReSized(0, $event)">
<split-panes splitpanes-min="40" :splitpanes-size="getSize(0, 0)" horizontal @resized="onPanesReSized(1, $event)">
<split-panes splitpanes-min="20" :splitpanes-size="getSize(1, 0)" @resized="onPanesReSized(2, $event)">
<views splitpanes-min="20" :splitpanes-size="getSize(2, 0)"></views>
<playground splitpanes-min="20" :splitpanes-size="getSize(2, 1)"></playground>
</split-panes>
<assets splitpanes-min="20" :splitpanes-size="getSize(1, 1)"></assets>
</split-panes>
<inspector splitpanes-min="20" :splitpanes-size="getSize(0, 1)"></inspector>
</split-panes>
<details-dialog ref="dialogsDialog"/>
<pack-result-dialog ref="packResultDialog"/>
</div>
</template>
<script>
import {mapGetters, mapActions} from 'vuex'
import SplitPanes from 'splitpanes'
import ToolBar from "./Editor/ToolBar";
import Inspector from "./Editor/Inspector";
import Views from "./Editor/Views";
import Playground from "./Editor/Playground";
import Assets from "./Editor/Assets";
import DetailsDialog from "./Editor/dialogs/DetailsDialog";
import {openPreview, playWaiting} from "../utils";
import i18n from "../i18n";
import PackResultDialog from "./Editor/dialogs/PackResultDialog";
import $events from "@/global-events.js"
export default {
name: 'Editor',
components: {
PackResultDialog,
DetailsDialog,
Assets,
Playground,
Views,
Inspector,
ToolBar,
SplitPanes,
},
data() {
const panesConfig = localStorage.panesConfig ? JSON.parse(localStorage.panesConfig) : [0.8, 0.8, 0.3];
return {
panesConfig,
ready: false,
}
},
watch: {
$route: {
handler: function (val, oldVal) {
console.log('router changed');
this.loadProject();
},
deep: true
}
},
computed: {
...mapGetters([]),
},
async mounted() {
document.addEventListener('keydown', this.onKeyPress);
await playWaiting(this.prepare(), this.$t('Preparing')).catch(e => {
});
this.loadProject();
},
destroyed() {
document.removeEventListener('keydown', this.onKeyPress)
},
methods: {
prepare() {
return Promise.all([
this.updateEnv(),
])
},
onKeyPress(e) {
if (e.key === 's' && (e.ctrlKey || e.metaKey)) {
e.preventDefault();
this.saveProject(this.clickMenu("preview"));
return false;
}
},
async loadProject() {
const {projectID} = this.$route.params;
if (await this.localVersionExist(projectID)) {
this.$confirm(this.$t('Unsaved version found locally'), this.$t('Alert'), {
showClose: false,
closeOnClickModal: false,
closeOnPressEscape: false,
confirmButtonText: this.$t('Local Version'),
cancelButtonText: this.$t('Remote Version'),
type: 'warning'
}).then(() => {
this.loadLocalVersion(projectID);
}).catch((e) => {
if (e === 'cancel') {
this.loadRemoteVersion(projectID);
} else {
console.log(e);
}
});
} else {
this.loadRemoteVersion(projectID);
}
},
loadLocalVersion(projectID) {
this.ready = false;
this.loadFromLocal(projectID);
this.$nextTick(() => {
this.ready = true;
});
},
async loadRemoteVersion(projectID) {
if (projectID) {
this.ready = false;
await playWaiting(this.loadFromRemote(projectID), this.$t('Preparing')).catch(e => {
this.$alert(this.$t('Project does not exist'), this.$t('Alert'), {
confirmButtonText: this.$t('Confirm'),
callback: action => {
this.$router.replace({name: 'home'});
}
});
});
this.ready = true;
} else {
this.$router.push({name: 'home'})
}
},
getSize(id, side) {
let ratio = this.panesConfig[id];
return (side === 0 ? ratio : 1 - ratio) * 100
},
onPanesReSized(id, configs) {
this.panesConfig[id] = configs[0].width / 100;
localStorage.panesConfig = JSON.stringify(this.panesConfig);
},
async saveProject(closeLoading) {
await playWaiting(this.saveToRemote(), this.$t('Saving'), closeLoading);
this.$message({
message: i18n.t('Save project successfully'), //因为message是异步出现，但是当路由回退的时候，this.i18n的实例已经置空，所以要用全局的i18n实例
type: 'success'
});
},
async clickMenu(menuItem) {
switch (menuItem) {
case 'save':
try {
this.saveProject();
} catch (e) {
}
break;
case 'details':
this.$refs.dialogsDialog.show();
break;
case 'preview':
await this.pack(true);
break;
case 'pack':
await this.pack();
break;
case 'undo':
this.$store.commit('undoRedo', 1);
break;
case 'redo':
this.$store.commit('undoRedo', -1);
break;
case 'exit':
const {projectID} = this.$route.params;
if (await this.localVersionExist(projectID)) {
this.$confirm(this.$t('Unsaved Alert'), this.$t('Alert'), {
confirmButtonText: this.$t('Save'),
cancelButtonText: this.$t('Exit'),
type: 'warning'
}).then(() => {
try {
this.saveProject();
this.backToHome();
} catch (e) {
}
}).catch((e) => {
this.backToHome();
});
} else {
this.backToHome();
}
break;
}
},
async pack(debug = false) {
const loading = this.$loading({
lock: true,
text: this.$t('Packing'),
});
try {
await this.saveProject(false);
const packResult = await this.packProject(debug);
this.$message({
message: this.$t('Pack project successfully'),
type: 'success',
duration: 500,
});
if (debug) {
openPreview(packResult);
} else {
this.$refs.packResultDialog.show(packResult);
}
/*this.$confirm(this.$t('Pack project successfully'), this.$t('Alert'), {
confirmButtonText: this.$t('Open in new tab'),
cancelButtonText: this.$t('Close'),
type: 'warning'
}).then(() => {
setTimeout(()=>{
window.open(tplUrl, 'blank');
}, 500);
}).catch(() => {
});*/
} catch (e) {
this.$message({
message: this.$t('Pack project failed'),
type: 'error',
duration: 1000,
});
}
loading.close();
},
backToHome() {
this.$router.replace({name: 'home'});
},
...mapActions([
'localVersionExist',
'loadFromLocal',
'loadFromRemote',
"saveToLocal",
"saveToRemote",
'updateEnv',
'packProject',
])
}
}
</script>
<style lang="scss">
</style>
\ No newline at end of file
.history/src/views/Editor_20191203174353.vue deleted 100644 → 0
View file @ 79d92895
<template>
<div class="editor" v-if="ready">
<tool-bar @click-menu="clickMenu"/>
<split-panes class="pane-container" @resized="onPanesReSized(0, $event)">
<split-panes splitpanes-min="40" :splitpanes-size="getSize(0, 0)" horizontal @resized="onPanesReSized(1, $event)">
<split-panes splitpanes-min="20" :splitpanes-size="getSize(1, 0)" @resized="onPanesReSized(2, $event)">
<views splitpanes-min="20" :splitpanes-size="getSize(2, 0)"></views>
<playground splitpanes-min="20" :splitpanes-size="getSize(2, 1)"></playground>
</split-panes>
<assets splitpanes-min="20" :splitpanes-size="getSize(1, 1)"></assets>
</split-panes>
<inspector splitpanes-min="20" :splitpanes-size="getSize(0, 1)"></inspector>
</split-panes>
<details-dialog ref="dialogsDialog"/>
<pack-result-dialog ref="packResultDialog"/>
</div>
</template>
<script>
import {mapGetters, mapActions} from 'vuex'
import SplitPanes from 'splitpanes'
import ToolBar from "./Editor/ToolBar";
import Inspector from "./Editor/Inspector";
import Views from "./Editor/Views";
import Playground from "./Editor/Playground";
import Assets from "./Editor/Assets";
import DetailsDialog from "./Editor/dialogs/DetailsDialog";
import {openPreview, playWaiting} from "../utils";
import i18n from "../i18n";
import PackResultDialog from "./Editor/dialogs/PackResultDialog";
import events from "@/global-events.js"
export default {
name: 'Editor',
components: {
PackResultDialog,
DetailsDialog,
Assets,
Playground,
Views,
Inspector,
ToolBar,
SplitPanes,
},
data() {
const panesConfig = localStorage.panesConfig ? JSON.parse(localStorage.panesConfig) : [0.8, 0.8, 0.3];
return {
panesConfig,
ready: false,
}
},
watch: {
$route: {
handler: function (val, oldVal) {
console.log('router changed');
this.loadProject();
},
deep: true
}
},
computed: {
...mapGetters([]),
},
async mounted() {
document.addEventListener('keydown', this.onKeyPress);
await playWaiting(this.prepare(), this.$t('Preparing')).catch(e => {
});
this.loadProject();
},
destroyed() {
document.removeEventListener('keydown', this.onKeyPress)
},
created(){
events.$on('saveAndPreview',(data)=>{
console.log(data);
});
},
methods: {
prepare() {
return Promise.all([
this.updateEnv(),
])
},
onKeyPress(e) {
if (e.key === 's' && (e.ctrlKey || e.metaKey)) {
e.preventDefault();
this.saveProject(this.clickMenu("preview"));
return false;
}
},
async loadProject() {
const {projectID} = this.$route.params;
if (await this.localVersionExist(projectID)) {
this.$confirm(this.$t('Unsaved version found locally'), this.$t('Alert'), {
showClose: false,
closeOnClickModal: false,
closeOnPressEscape: false,
confirmButtonText: this.$t('Local Version'),
cancelButtonText: this.$t('Remote Version'),
type: 'warning'
}).then(() => {
this.loadLocalVersion(projectID);
}).catch((e) => {
if (e === 'cancel') {
this.loadRemoteVersion(projectID);
} else {
console.log(e);
}
});
} else {
this.loadRemoteVersion(projectID);
}
},
loadLocalVersion(projectID) {
this.ready = false;
this.loadFromLocal(projectID);
this.$nextTick(() => {
this.ready = true;
});
},
async loadRemoteVersion(projectID) {
if (projectID) {
this.ready = false;
await playWaiting(this.loadFromRemote(projectID), this.$t('Preparing')).catch(e => {
this.$alert(this.$t('Project does not exist'), this.$t('Alert'), {
confirmButtonText: this.$t('Confirm'),
callback: action => {
this.$router.replace({name: 'home'});
}
});
});
this.ready = true;
} else {
this.$router.push({name: 'home'})
}
},
getSize(id, side) {
let ratio = this.panesConfig[id];
return (side === 0 ? ratio : 1 - ratio) * 100
},
onPanesReSized(id, configs) {
this.panesConfig[id] = configs[0].width / 100;
localStorage.panesConfig = JSON.stringify(this.panesConfig);
},
async saveProject(closeLoading) {
await playWaiting(this.saveToRemote(), this.$t('Saving'), closeLoading);
this.$message({
message: i18n.t('Save project successfully'), //因为message是异步出现，但是当路由回退的时候，this.i18n的实例已经置空，所以要用全局的i18n实例
type: 'success'
});
},
async clickMenu(menuItem) {
switch (menuItem) {
case 'save':
try {
this.saveProject();
} catch (e) {
}
break;
case 'details':
this.$refs.dialogsDialog.show();
break;
case 'preview':
await this.pack(true);
break;
case 'pack':
await this.pack();
break;
case 'undo':
this.$store.commit('undoRedo', 1);
break;
case 'redo':
this.$store.commit('undoRedo', -1);
break;
case 'exit':
const {projectID} = this.$route.params;
if (await this.localVersionExist(projectID)) {
this.$confirm(this.$t('Unsaved Alert'), this.$t('Alert'), {
confirmButtonText: this.$t('Save'),
cancelButtonText: this.$t('Exit'),
type: 'warning'
}).then(() => {
try {
this.saveProject();
this.backToHome();
} catch (e) {
}
}).catch((e) => {
this.backToHome();
});
} else {
this.backToHome();
}
break;
}
},
async pack(debug = false) {
const loading = this.$loading({
lock: true,
text: this.$t('Packing'),
});
try {
await this.saveProject(false);
const packResult = await this.packProject(debug);
this.$message({
message: this.$t('Pack project successfully'),
type: 'success',
duration: 500,
});
if (debug) {
openPreview(packResult);
} else {
this.$refs.packResultDialog.show(packResult);
}
/*this.$confirm(this.$t('Pack project successfully'), this.$t('Alert'), {
confirmButtonText: this.$t('Open in new tab'),
cancelButtonText: this.$t('Close'),
type: 'warning'
}).then(() => {
setTimeout(()=>{
window.open(tplUrl, 'blank');
}, 500);
}).catch(() => {
});*/
} catch (e) {
this.$message({
message: this.$t('Pack project failed'),
type: 'error',
duration: 1000,
});
}
loading.close();
},
backToHome() {
this.$router.replace({name: 'home'});
},
...mapActions([
'localVersionExist',
'loadFromLocal',
'loadFromRemote',
"saveToLocal",
"saveToRemote",
'updateEnv',
'packProject',
])
}
}
</script>
<style lang="scss">
</style>
\ No newline at end of file
.history/src/views/Editor_20191203174404.vue deleted 100644 → 0
View file @ 79d92895
<template>
<div class="editor" v-if="ready">
<tool-bar @click-menu="clickMenu"/>
<split-panes class="pane-container" @resized="onPanesReSized(0, $event)">
<split-panes splitpanes-min="40" :splitpanes-size="getSize(0, 0)" horizontal @resized="onPanesReSized(1, $event)">
<split-panes splitpanes-min="20" :splitpanes-size="getSize(1, 0)" @resized="onPanesReSized(2, $event)">
<views splitpanes-min="20" :splitpanes-size="getSize(2, 0)"></views>
<playground splitpanes-min="20" :splitpanes-size="getSize(2, 1)"></playground>
</split-panes>
<assets splitpanes-min="20" :splitpanes-size="getSize(1, 1)"></assets>
</split-panes>
<inspector splitpanes-min="20" :splitpanes-size="getSize(0, 1)"></inspector>
</split-panes>
<details-dialog ref="dialogsDialog"/>
<pack-result-dialog ref="packResultDialog"/>
</div>
</template>
<script>
import {mapGetters, mapActions} from 'vuex'
import SplitPanes from 'splitpanes'
import ToolBar from "./Editor/ToolBar";
import Inspector from "./Editor/Inspector";
import Views from "./Editor/Views";
import Playground from "./Editor/Playground";
import Assets from "./Editor/Assets";
import DetailsDialog from "./Editor/dialogs/DetailsDialog";
import {openPreview, playWaiting} from "../utils";
import i18n from "../i18n";
import PackResultDialog from "./Editor/dialogs/PackResultDialog";
import events from "@/global-events.js"
export default {
name: 'Editor',
components: {
PackResultDialog,
DetailsDialog,
Assets,
Playground,
Views,
Inspector,
ToolBar,
SplitPanes,
},
data() {
const panesConfig = localStorage.panesConfig ? JSON.parse(localStorage.panesConfig) : [0.8, 0.8, 0.3];
return {
panesConfig,
ready: false,
}
},
watch: {
$route: {
handler: function (val, oldVal) {
console.log('router changed');
this.loadProject();
},
deep: true
}
},
computed: {
...mapGetters([]),
},
async mounted() {
document.addEventListener('keydown', this.onKeyPress);
await playWaiting(this.prepare(), this.$t('Preparing')).catch(e => {
});
this.loadProject();
},
destroyed() {
document.removeEventListener('keydown', this.onKeyPress)
},
created(){
events.$on('saveAndPreview',()=>{
this.saveProject(this.clickMenu("preview"));
});
},
methods: {
prepare() {
return Promise.all([
this.updateEnv(),
])
},
onKeyPress(e) {
if (e.key === 's' && (e.ctrlKey || e.metaKey)) {
e.preventDefault();
this.saveProject(this.clickMenu("preview"));
return false;
}
},
async loadProject() {
const {projectID} = this.$route.params;
if (await this.localVersionExist(projectID)) {
this.$confirm(this.$t('Unsaved version found locally'), this.$t('Alert'), {
showClose: false,
closeOnClickModal: false,
closeOnPressEscape: false,
confirmButtonText: this.$t('Local Version'),
cancelButtonText: this.$t('Remote Version'),
type: 'warning'
}).then(() => {
this.loadLocalVersion(projectID);
}).catch((e) => {
if (e === 'cancel') {
this.loadRemoteVersion(projectID);
} else {
console.log(e);
}
});
} else {
this.loadRemoteVersion(projectID);
}
},
loadLocalVersion(projectID) {
this.ready = false;
this.loadFromLocal(projectID);
this.$nextTick(() => {
this.ready = true;
});
},
async loadRemoteVersion(projectID) {
if (projectID) {
this.ready = false;
await playWaiting(this.loadFromRemote(projectID), this.$t('Preparing')).catch(e => {
this.$alert(this.$t('Project does not exist'), this.$t('Alert'), {
confirmButtonText: this.$t('Confirm'),
callback: action => {
this.$router.replace({name: 'home'});
}
});
});
this.ready = true;
} else {
this.$router.push({name: 'home'})
}
},
getSize(id, side) {
let ratio = this.panesConfig[id];
return (side === 0 ? ratio : 1 - ratio) * 100
},
onPanesReSized(id, configs) {
this.panesConfig[id] = configs[0].width / 100;
localStorage.panesConfig = JSON.stringify(this.panesConfig);
},
async saveProject(closeLoading) {
await playWaiting(this.saveToRemote(), this.$t('Saving'), closeLoading);
this.$message({
message: i18n.t('Save project successfully'), //因为message是异步出现，但是当路由回退的时候，this.i18n的实例已经置空，所以要用全局的i18n实例
type: 'success'
});
},
async clickMenu(menuItem) {
switch (menuItem) {
case 'save':
try {
this.saveProject();
} catch (e) {
}
break;
case 'details':
this.$refs.dialogsDialog.show();
break;
case 'preview':
await this.pack(true);
break;
case 'pack':
await this.pack();
break;
case 'undo':
this.$store.commit('undoRedo', 1);
break;
case 'redo':
this.$store.commit('undoRedo', -1);
break;
case 'exit':
const {projectID} = this.$route.params;
if (await this.localVersionExist(projectID)) {
this.$confirm(this.$t('Unsaved Alert'), this.$t('Alert'), {
confirmButtonText: this.$t('Save'),
cancelButtonText: this.$t('Exit'),
type: 'warning'
}).then(() => {
try {
this.saveProject();
this.backToHome();
} catch (e) {
}
}).catch((e) => {
this.backToHome();
});
} else {
this.backToHome();
}
break;
}
},
async pack(debug = false) {
const loading = this.$loading({
lock: true,
text: this.$t('Packing'),
});
try {
await this.saveProject(false);
const packResult = await this.packProject(debug);
this.$message({
message: this.$t('Pack project successfully'),
type: 'success',
duration: 500,
});
if (debug) {
openPreview(packResult);
} else {
this.$refs.packResultDialog.show(packResult);
}
/*this.$confirm(this.$t('Pack project successfully'), this.$t('Alert'), {
confirmButtonText: this.$t('Open in new tab'),
cancelButtonText: this.$t('Close'),
type: 'warning'
}).then(() => {
setTimeout(()=>{
window.open(tplUrl, 'blank');
}, 500);
}).catch(() => {
});*/
} catch (e) {
this.$message({
message: this.$t('Pack project failed'),
type: 'error',
duration: 1000,
});
}
loading.close();
},
backToHome() {
this.$router.replace({name: 'home'});
},
...mapActions([
'localVersionExist',
'loadFromLocal',
'loadFromRemote',
"saveToLocal",
"saveToRemote",
'updateEnv',
'packProject',
])
}
}
</script>
<style lang="scss">
</style>
\ No newline at end of file
.history/src/views/Editor_20191203190629.vue deleted 100644 → 0
View file @ 79d92895
<template>
<div class="editor" v-if="ready">
<tool-bar @click-menu="clickMenu"/>
<split-panes class="pane-container" @resized="onPanesReSized(0, $event)">
<split-panes splitpanes-min="40" :splitpanes-size="getSize(0, 0)" horizontal @resized="onPanesReSized(1, $event)">
<split-panes splitpanes-min="20" :splitpanes-size="getSize(1, 0)" @resized="onPanesReSized(2, $event)">
<views splitpanes-min="20" :splitpanes-size="getSize(2, 0)"></views>
<playground splitpanes-min="20" :splitpanes-size="getSize(2, 1)"></playground>
</split-panes>
<assets splitpanes-min="20" :splitpanes-size="getSize(1, 1)"></assets>
</split-panes>
<inspector splitpanes-min="20" :splitpanes-size="getSize(0, 1)"></inspector>
</split-panes>
<details-dialog ref="dialogsDialog"/>
<pack-result-dialog ref="packResultDialog"/>
</div>
</template>
<script>
import {mapGetters, mapActions} from 'vuex'
import SplitPanes from 'splitpanes'
import ToolBar from "./Editor/ToolBar";
import Inspector from "./Editor/Inspector";
import Views from "./Editor/Views";
import Playground from "./Editor/Playground";
import Assets from "./Editor/Assets";
import DetailsDialog from "./Editor/dialogs/DetailsDialog";
import {openPreview, playWaiting} from "../utils";
import i18n from "../i18n";
import PackResultDialog from "./Editor/dialogs/PackResultDialog";
import events from "@/global-events.js"
export default {
name: 'Editor',
components: {
PackResultDialog,
DetailsDialog,
Assets,
Playground,
Views,
Inspector,
ToolBar,
SplitPanes,
},
data() {
const panesConfig = localStorage.panesConfig ? JSON.parse(localStorage.panesConfig) : [0.8, 0.8, 0.3];
return {
panesConfig,
ready: false,
}
},
watch: {
$route: {
handler: function (val, oldVal) {
console.log('router changed');
this.loadProject();
},
deep: true
}
},
computed: {
...mapGetters([]),
},
async mounted() {
document.addEventListener('keydown', this.onKeyPress);
await playWaiting(this.prepare(), this.$t('Preparing')).catch(e => {
});
this.loadProject();
},
destroyed() {
document.removeEventListener('keydown', this.onKeyPress)
},
created(){
events.$on('saveAndPreview',()=>{
this.saveProject(this.clickMenu("preview"));
});
},
methods: {
prepare() {
return Promise.all([
this.updateEnv(),
])
},
onKeyPress(e) {
if (e.key === 's' && (e.ctrlKey || e.metaKey)) {
e.preventDefault();
this.saveProject(this.clickMenu("preview"));
return false;
}
},
async loadProject() {
const {projectID} = this.$route.params;
if (await this.localVersionExist(projectID)) {
this.$confirm(this.$t('Unsaved version found locally'), this.$t('Alert'), {
showClose: false,
closeOnClickModal: false,
closeOnPressEscape: false,
confirmButtonText: this.$t('Local Version'),
cancelButtonText: this.$t('Remote Version'),
type: 'warning'
}).then(() => {
this.loadLocalVersion(projectID);
}).catch((e) => {
if (e === 'cancel') {
this.loadRemoteVersion(projectID);
} else {
console.log(e);
}
});
} else {
this.loadRemoteVersion(projectID);
}
},
loadLocalVersion(projectID) {
this.ready = false;
this.loadFromLocal(projectID);
this.$nextTick(() => {
this.ready = true;
});
},
async loadRemoteVersion(projectID) {
if (projectID) {
this.ready = false;
await playWaiting(this.loadFromRemote(projectID), this.$t('Preparing')).catch(e => {
this.$alert(this.$t('Project does not exist'), this.$t('Alert'), {
confirmButtonText: this.$t('Confirm'),
callback: action => {
this.$router.replace({name: 'home'});
}
});
});
this.ready = true;
} else {
this.$router.push({name: 'home'})
}
},
getSize(id, side) {
let ratio = this.panesConfig[id];
return (side === 0 ? ratio : 1 - ratio) * 100
},
onPanesReSized(id, configs) {
this.panesConfig[id] = configs[0].width / 100;
localStorage.panesConfig = JSON.stringify(this.panesConfig);
},
async saveProject(closeLoading) {
await playWaiting(this.saveToRemote(), this.$t('Saving'), closeLoading);
this.$message({
message: i18n.t('Save project successfully'), //因为message是异步出现，但是当路由回退的时候，this.i18n的实例已经置空，所以要用全局的i18n实例
type: 'success'
});
},
async clickMenu(menuItem) {
switch (menuItem) {
case 'save':
try {
this.saveProject();
} catch (e) {
}
break;
case 'details':
this.$refs.dialogsDialog.show();
break;
case 'preview':
await this.pack(true);
break;
case 'pack':
await this.pack();
break;
case 'undo':
this.$store.commit('undoRedo', 1);
break;
case 'redo':
this.$store.commit('undoRedo', -1);
break;
case 'exit':
const {projectID} = this.$route.params;
if (await this.localVersionExist(projectID)) {
this.$confirm(this.$t('Unsaved Alert'), this.$t('Alert'), {
confirmButtonText: this.$t('Save'),
cancelButtonText: this.$t('Exit'),
type: 'warning'
}).then(() => {
try {
this.saveProject();
this.backToHome();
} catch (e) {
}
}).catch((e) => {
this.backToHome();
});
} else {
this.backToHome();
}
break;
}
},
async pack(debug = false) {
const loading = this.$loading({
lock: true,
text: this.$t('Packing'),
});
try {
await this.saveProject(false);
const packResult = await this.packProject(debug);
this.$message({
message: this.$t('Pack project successfully'),
type: 'success',
duration: 500,
});
if (debug) {
openPreview(packResult);
} else {
this.$refs.packResultDialog.show(packResult);
}
/*this.$confirm(this.$t('Pack project successfully'), this.$t('Alert'), {
confirmButtonText: this.$t('Open in new tab'),
cancelButtonText: this.$t('Close'),
type: 'warning'
}).then(() => {
setTimeout(()=>{
window.open(tplUrl, 'blank');
}, 500);
}).catch(() => {
});*/
} catch (e) {
this.$message({
message: this.$t('Pack project failed'),
type: 'error',
duration: 1000,
});
}
loading.close();
},
backToHome() {
this.$router.replace({name: 'home'});
},
...mapActions([
'localVersionExist',
'loadFromLocal',
'loadFromRemote',
"saveToLocal",
"saveToRemote",
'updateEnv',
'packProject',
])
}
}
</script>
<style lang="scss">
</style>
\ No newline at end of file
.history/src/views/Editor_20191203201400.vue deleted 100644 → 0
View file @ 79d92895
<template>
<div class="editor" v-if="ready">
<tool-bar @click-menu="clickMenu"/>
<split-panes class="pane-container" @resized="onPanesReSized(0, $event)">
<split-panes splitpanes-min="40" :splitpanes-size="getSize(0, 0)" horizontal @resized="onPanesReSized(1, $event)">
<split-panes splitpanes-min="20" :splitpanes-size="getSize(1, 0)" @resized="onPanesReSized(2, $event)">
<views splitpanes-min="20" :splitpanes-size="getSize(2, 0)"></views>
<playground splitpanes-min="20" :splitpanes-size="getSize(2, 1)"></playground>
</split-panes>
<assets splitpanes-min="20" :splitpanes-size="getSize(1, 1)"></assets>
</split-panes>
<inspector splitpanes-min="20" :splitpanes-size="getSize(0, 1)"></inspector>
</split-panes>
<details-dialog ref="dialogsDialog"/>
<pack-result-dialog ref="packResultDialog"/>
</div>
</template>
<script>
import {mapGetters, mapActions} from 'vuex'
import SplitPanes from 'splitpanes'
import ToolBar from "./Editor/ToolBar";
import Inspector from "./Editor/Inspector";
import Views from "./Editor/Views";
import Playground from "./Editor/Playground";
import Assets from "./Editor/Assets";
import DetailsDialog from "./Editor/dialogs/DetailsDialog";
import {openPreview, playWaiting} from "../utils";
import i18n from "../i18n";
import PackResultDialog from "./Editor/dialogs/PackResultDialog";
import events from "@/global-events.js"
export default {
name: 'Editor',
components: {
PackResultDialog,
DetailsDialog,
Assets,
Playground,
Views,
Inspector,
ToolBar,
SplitPanes,
},
data() {
const panesConfig = localStorage.panesConfig ? JSON.parse(localStorage.panesConfig) : [0.8, 0.8, 0.3];
return {
panesConfig,
ready: false,
}
},
watch: {
$route: {
handler: function (val, oldVal) {
console.log('router changed');
this.loadProject();
},
deep: true
}
},
computed: {
...mapGetters([]),
},
async mounted() {
document.addEventListener('keydown', this.onKeyPress);
await playWaiting(this.prepare(), this.$t('Preparing')).catch(e => {
});
this.loadProject();
},
destroyed() {
document.removeEventListener('keydown', this.onKeyPress)
},
created(){
events.$on('saveAndPreview',()=>{
this.clickMenu("preview");
});
},
methods: {
prepare() {
return Promise.all([
this.updateEnv(),
])
},
onKeyPress(e) {
if (e.key === 's' && (e.ctrlKey || e.metaKey)) {
e.preventDefault();
this.saveProject(this.clickMenu("preview"));
return false;
}
},
async loadProject() {
const {projectID} = this.$route.params;
if (await this.localVersionExist(projectID)) {
this.$confirm(this.$t('Unsaved version found locally'), this.$t('Alert'), {
showClose: false,
closeOnClickModal: false,
closeOnPressEscape: false,
confirmButtonText: this.$t('Local Version'),
cancelButtonText: this.$t('Remote Version'),
type: 'warning'
}).then(() => {
this.loadLocalVersion(projectID);
}).catch((e) => {
if (e === 'cancel') {
this.loadRemoteVersion(projectID);
} else {
console.log(e);
}
});
} else {
this.loadRemoteVersion(projectID);
}
},
loadLocalVersion(projectID) {
this.ready = false;
this.loadFromLocal(projectID);
this.$nextTick(() => {
this.ready = true;
});
},
async loadRemoteVersion(projectID) {
if (projectID) {
this.ready = false;
await playWaiting(this.loadFromRemote(projectID), this.$t('Preparing')).catch(e => {
this.$alert(this.$t('Project does not exist'), this.$t('Alert'), {
confirmButtonText: this.$t('Confirm'),
callback: action => {
this.$router.replace({name: 'home'});
}
});
});
this.ready = true;
} else {
this.$router.push({name: 'home'})
}
},
getSize(id, side) {
let ratio = this.panesConfig[id];
return (side === 0 ? ratio : 1 - ratio) * 100
},
onPanesReSized(id, configs) {
this.panesConfig[id] = configs[0].width / 100;
localStorage.panesConfig = JSON.stringify(this.panesConfig);
},
async saveProject(closeLoading) {
await playWaiting(this.saveToRemote(), this.$t('Saving'), closeLoading);
this.$message({
message: i18n.t('Save project successfully'), //因为message是异步出现，但是当路由回退的时候，this.i18n的实例已经置空，所以要用全局的i18n实例
type: 'success'
});
},
async clickMenu(menuItem) {
switch (menuItem) {
case 'save':
try {
this.saveProject();
} catch (e) {
}
break;
case 'details':
this.$refs.dialogsDialog.show();
break;
case 'preview':
await this.pack(true);
break;
case 'pack':
await this.pack();
break;
case 'undo':
this.$store.commit('undoRedo', 1);
break;
case 'redo':
this.$store.commit('undoRedo', -1);
break;
case 'exit':
const {projectID} = this.$route.params;
if (await this.localVersionExist(projectID)) {
this.$confirm(this.$t('Unsaved Alert'), this.$t('Alert'), {
confirmButtonText: this.$t('Save'),
cancelButtonText: this.$t('Exit'),
type: 'warning'
}).then(() => {
try {
this.saveProject();
this.backToHome();
} catch (e) {
}
}).catch((e) => {
this.backToHome();
});
} else {
this.backToHome();
}
break;
}
},
async pack(debug = false) {
const loading = this.$loading({
lock: true,
text: this.$t('Packing'),
});
try {
await this.saveProject(false);
const packResult = await this.packProject(debug);
this.$message({
message: this.$t('Pack project successfully'),
type: 'success',
duration: 500,
});
if (debug) {
openPreview(packResult);
} else {
this.$refs.packResultDialog.show(packResult);
}
/*this.$confirm(this.$t('Pack project successfully'), this.$t('Alert'), {
confirmButtonText: this.$t('Open in new tab'),
cancelButtonText: this.$t('Close'),
type: 'warning'
}).then(() => {
setTimeout(()=>{
window.open(tplUrl, 'blank');
}, 500);
}).catch(() => {
});*/
} catch (e) {
this.$message({
message: this.$t('Pack project failed'),
type: 'error',
duration: 1000,
});
}
loading.close();
},
backToHome() {
this.$router.replace({name: 'home'});
},
...mapActions([
'localVersionExist',
'loadFromLocal',
'loadFromRemote',
"saveToLocal",
"saveToRemote",
'updateEnv',
'packProject',
])
}
}
</script>
<style lang="scss">
</style>
\ No newline at end of file
.history/src/views/Editor_20191203201436.vue deleted 100644 → 0
View file @ 79d92895
<template>
<div class="editor" v-if="ready">
<tool-bar @click-menu="clickMenu"/>
<split-panes class="pane-container" @resized="onPanesReSized(0, $event)">
<split-panes splitpanes-min="40" :splitpanes-size="getSize(0, 0)" horizontal @resized="onPanesReSized(1, $event)">
<split-panes splitpanes-min="20" :splitpanes-size="getSize(1, 0)" @resized="onPanesReSized(2, $event)">
<views splitpanes-min="20" :splitpanes-size="getSize(2, 0)"></views>
<playground splitpanes-min="20" :splitpanes-size="getSize(2, 1)"></playground>
</split-panes>
<assets splitpanes-min="20" :splitpanes-size="getSize(1, 1)"></assets>
</split-panes>
<inspector splitpanes-min="20" :splitpanes-size="getSize(0, 1)"></inspector>
</split-panes>
<details-dialog ref="dialogsDialog"/>
<pack-result-dialog ref="packResultDialog"/>
</div>
</template>
<script>
import {mapGetters, mapActions} from 'vuex'
import SplitPanes from 'splitpanes'
import ToolBar from "./Editor/ToolBar";
import Inspector from "./Editor/Inspector";
import Views from "./Editor/Views";
import Playground from "./Editor/Playground";
import Assets from "./Editor/Assets";
import DetailsDialog from "./Editor/dialogs/DetailsDialog";
import {openPreview, playWaiting} from "../utils";
import i18n from "../i18n";
import PackResultDialog from "./Editor/dialogs/PackResultDialog";
import events from "@/global-events.js"
export default {
name: 'Editor',
components: {
PackResultDialog,
DetailsDialog,
Assets,
Playground,
Views,
Inspector,
ToolBar,
SplitPanes,
},
data() {
const panesConfig = localStorage.panesConfig ? JSON.parse(localStorage.panesConfig) : [0.8, 0.8, 0.3];
return {
panesConfig,
ready: false,
}
},
watch: {
$route: {
handler: function (val, oldVal) {
console.log('router changed');
this.loadProject();
},
deep: true
}
},
computed: {
...mapGetters([]),
},
async mounted() {
document.addEventListener('keydown', this.onKeyPress);
await playWaiting(this.prepare(), this.$t('Preparing')).catch(e => {
});
this.loadProject();
},
destroyed() {
document.removeEventListener('keydown', this.onKeyPress)
},
created(){
events.$on('saveAndPreview',()=>{
this.clickMenu("preview");
});
},
methods: {
prepare() {
return Promise.all([
this.updateEnv(),
])
},
onKeyPress(e) {
if (e.key === 's' && (e.ctrlKey || e.metaKey)) {
e.preventDefault();
this.clickMenu("preview");
return false;
}
},
async loadProject() {
const {projectID} = this.$route.params;
if (await this.localVersionExist(projectID)) {
this.$confirm(this.$t('Unsaved version found locally'), this.$t('Alert'), {
showClose: false,
closeOnClickModal: false,
closeOnPressEscape: false,
confirmButtonText: this.$t('Local Version'),
cancelButtonText: this.$t('Remote Version'),
type: 'warning'
}).then(() => {
this.loadLocalVersion(projectID);
}).catch((e) => {
if (e === 'cancel') {
this.loadRemoteVersion(projectID);
} else {
console.log(e);
}
});
} else {
this.loadRemoteVersion(projectID);
}
},
loadLocalVersion(projectID) {
this.ready = false;
this.loadFromLocal(projectID);
this.$nextTick(() => {
this.ready = true;
});
},
async loadRemoteVersion(projectID) {
if (projectID) {
this.ready = false;
await playWaiting(this.loadFromRemote(projectID), this.$t('Preparing')).catch(e => {
this.$alert(this.$t('Project does not exist'), this.$t('Alert'), {
confirmButtonText: this.$t('Confirm'),
callback: action => {
this.$router.replace({name: 'home'});
}
});
});
this.ready = true;
} else {
this.$router.push({name: 'home'})
}
},
getSize(id, side) {
let ratio = this.panesConfig[id];
return (side === 0 ? ratio : 1 - ratio) * 100
},
onPanesReSized(id, configs) {
this.panesConfig[id] = configs[0].width / 100;
localStorage.panesConfig = JSON.stringify(this.panesConfig);
},
async saveProject(closeLoading) {
await playWaiting(this.saveToRemote(), this.$t('Saving'), closeLoading);
this.$message({
message: i18n.t('Save project successfully'), //因为message是异步出现，但是当路由回退的时候，this.i18n的实例已经置空，所以要用全局的i18n实例
type: 'success'
});
},
async clickMenu(menuItem) {
switch (menuItem) {
case 'save':
try {
this.saveProject();
} catch (e) {
}
break;
case 'details':
this.$refs.dialogsDialog.show();
break;
case 'preview':
await this.pack(true);
break;
case 'pack':
await this.pack();
break;
case 'undo':
this.$store.commit('undoRedo', 1);
break;
case 'redo':
this.$store.commit('undoRedo', -1);
break;
case 'exit':
const {projectID} = this.$route.params;
if (await this.localVersionExist(projectID)) {
this.$confirm(this.$t('Unsaved Alert'), this.$t('Alert'), {
confirmButtonText: this.$t('Save'),
cancelButtonText: this.$t('Exit'),
type: 'warning'
}).then(() => {
try {
this.saveProject();
this.backToHome();
} catch (e) {
}
}).catch((e) => {
this.backToHome();
});
} else {
this.backToHome();
}
break;
}
},
async pack(debug = false) {
const loading = this.$loading({
lock: true,
text: this.$t('Packing'),
});
try {
await this.saveProject(false);
const packResult = await this.packProject(debug);
this.$message({
message: this.$t('Pack project successfully'),
type: 'success',
duration: 500,
});
if (debug) {
openPreview(packResult);
} else {
this.$refs.packResultDialog.show(packResult);
}
/*this.$confirm(this.$t('Pack project successfully'), this.$t('Alert'), {
confirmButtonText: this.$t('Open in new tab'),
cancelButtonText: this.$t('Close'),
type: 'warning'
}).then(() => {
setTimeout(()=>{
window.open(tplUrl, 'blank');
}, 500);
}).catch(() => {
});*/
} catch (e) {
this.$message({
message: this.$t('Pack project failed'),
type: 'error',
duration: 1000,
});
}
loading.close();
},
backToHome() {
this.$router.replace({name: 'home'});
},
...mapActions([
'localVersionExist',
'loadFromLocal',
'loadFromRemote',
"saveToLocal",
"saveToRemote",
'updateEnv',
'packProject',
])
}
}
</script>
<style lang="scss">
</style>
\ No newline at end of file
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