Skip to content

Z
zeroing-editor
Commit 7756514c authored by 张晨辰's avatar 张晨辰
Browse files
Options

feat: scripts alias & enum

parents 7ebafe76 91d21a31
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 669 additions and 311 deletions
.env
View file @ 7756514c
VUE_APP_I18N_LOCALE=en VUE_APP_I18N_LOCALE=zh-CN
VUE_APP_I18N_FALLBACK_LOCALE=en VUE_APP_I18N_FALLBACK_LOCALE=en
docs/todo.md
View file @ 7756514c
# 问题 # 问题
1. 新建的label选中会报错 1. [x] 新建的label选中会报错
2. 脚本中属性无法渲染 2. [x] 脚本中属性无法渲染
# 修改 # 修改
1. node类型增加属性：`left,top,right,bottom,horizonCenter,verticalCenter` 1. [ ] node类型增加属性：`left,top,right,bottom,horizonCenter,verticalCenter`
2. rect类型增加属性：`borderRadius` 2. [x] rect类型增加属性：`borderRadius`
3. label类型增加属性：`verticalAlign(options: up,middle,down)` 3. [ ] label类型增加属性：`verticalAlign(options: up,middle,down)`
4. 增加circle类型，属性同rect 4. [x] 增加circle类型，属性同rect
5. 属性中增加alias为别名，用来呈现中文别名(`{alias: '文本', type: 'string', default: '你好'}`) 5. [x] 属性中增加alias为别名，用来呈现中文别名(`{alias: '文本', type: 'string', default: '你好'}`)
6. 属性中枚举的类型，type改为enum，增加以enum为名字的字符串存放枚举项(`{alias: '类型', type: 'enum', enum: ['rotate', 'jump', 'breath'], default: 'rotate'}`) 6. [x] 属性中枚举的类型，type改为enum，增加以enum为名字的字符串存放枚举项(`{alias: '类型', type: 'enum', enum: ['rotate', 'jump', 'breath'], default: 'rotate'}`)
7. 编辑区需要能设置尺寸，默认`750*1334`，增加缩放功能，缩放可由按钮或者滚轮控制 7. [ ] 编辑区需要能设置尺寸，默认`750*1334`，增加缩放功能，缩放可由按钮或者滚轮控制
8. 增加删除脚本功能 8. [x] 增加删除脚本功能
9. 增加删除行为功能 9. [x] 增加删除行为功能
mock/api/editor/info/index.js
View file @ 7756514c
This diff is collapsed.
public/index.html
View file @ 7756514c
...@@ -14,7 +14,8 @@ ...@@ -14,7 +14,8 @@
</noscript> </noscript>
<script> <script>
window.__data = { window.__data = {
token : "<%= process.env.NODE_ENV === 'development' ? 'eyJhbGciOiJIUzI1NiJ9.5Yqz55Cq5bOw.wixVqBeqGS2FBY_VWF1cC_Vg5Zr0vYgRTfuncjGthYY' : '$TOKEN$' %>" token : "<%= process.env.NODE_ENV === 'development' ? 'eyJhbGciOiJIUzI1NiJ9.5Y2e6b6Z5Lqt.2fNMm0oJt0l0ZzsSYwo4ie8Bs7yLU9EmS2mtrmLPktY' : '$TOKEN$' %>",
apiHost : "<%= process.env.NODE_ENV === 'development' ? 'http://beacon.duibadev.com.cn' : '$API_HOST$' %>"
} }
</script> </script>
<div id="app"></div> <div id="app"></div>
......
src/config.js
View file @ 7756514c
...@@ -3,12 +3,12 @@ ...@@ -3,12 +3,12 @@
*/ */
export let API_HOST; export let API_HOST;
if(process.env.NODE_ENV === 'development'){ if (process.env.NODE_ENV === 'development') {
//API_HOST = 'http://10.10.95.74:7777'; //API_HOST = 'http://10.10.95.74:7777';
//API_HOST = 'http://localhost:3002'; //API_HOST = 'http://localhost:3002';
API_HOST = 'http://beacon.duibadev.com.cn' API_HOST = window.__data.apiHost;
}else{ } else {
API_HOST = 'http://beacon.duibadev.com.cn' API_HOST = window.__data.apiHost;
} }
export const UPLOAD_FILE_URL = API_HOST + '/api/uploadFile'; export const UPLOAD_FILE_URL = API_HOST + '/api/uploadFile';
......
src/locales/en.json
View file @ 7756514c
{ {
"Alert": "Alert", "Alert": "Alert",
"Confirm": "Confirm", "Confirm": "Confirm",
"Cancel": "Cancel", "Cancel": "Cancel",
"Close": "Close", "Close": "Close",
"Still Close": "Still Close", "Still Close": "Still Close",
"Save": "Save", "Save": "Save",
"Copy": "Copy", "Copy": "Copy",
"Exit": "Exit", "Exit": "Exit",
"Add": "Add", "Props": "Props",
"Delete": "Delete", "Behavior": "Behavior",
"Import": "Import", "Add": "Add",
"Export": "Export", "Delete": "Delete",
"Upload": "Upload", "Import": "Import",
"Edit": "Edit", "Export": "Export",
"ID": "ID", "Upload": "Upload",
"Name": "Name", "Edit": "Edit",
"Alias": "Alias", "ID": "ID",
"Output": "Output", "Name": "Name",
"Code": "Code", "Alias": "Alias",
"Desc": "Desc", "Output": "Output",
"Empty": "Empty", "Code": "Code",
"Event": "Event", "Desc": "Desc",
"No desc": "No desc", "Empty": "Empty",
"Description": "Description", "Key": "Key",
"Failed to fetch": "Network error!", "Default": "Default",
"In processing": "In processing", "Event": "Event",
"Projects": "Projects", "No desc": "No desc",
"copy": "copy", "Description": "Description",
"No projects": "No projects", "Failed to fetch": "Network error!",
"Create": "Create", "In processing": "In processing",
"Project details": "Project details", "Projects": "Projects",
"Project does not exist": "Project does not exist", "copy": "copy",
"Project name": "Project name", "No projects": "No projects",
"Data mapping": "Data mapping", "Create": "Create",
"Behavior Editor": "Behavior Editor", "Project details": "Project details",
"Template": "Template", "Project does not exist": "Project does not exist",
"Preparing": "Preparing…", "Project name": "Project name",
"Deleting": "Deleting…", "Data mapping": "Data mapping",
"Saving": "Saving…", "Behavior Editor": "Behavior Editor",
"Divider": "Divider", "Template": "Template",
"Custom": "Custom", "Preparing": "Preparing…",
"Entry": "Entry", "Deleting": "Deleting…",
"Packing": "Packing", "Saving": "Saving…",
"Type": "Type", "Divider": "Divider",
"Group": "Group", "Custom": "Custom",
"Access denied": "Access denied", "Entry": "Entry",
"Invalid router": "Invalid router", "Packing": "Packing",
"Jump after": "Jump after {cd}s", "Type": "Type",
"Open in new tab": "Open in new tab", "Group": "Group",
"Pack project successfully": "Pack project successfully", "Access denied": "Access denied",
"Pack project failed": "Pack project failed", "Invalid router": "Invalid router",
"Create project": "Create project", "Jump after": "Jump after {cd}s",
"Open in new tab": "Open in new tab",
"Pack project successfully": "Pack project successfully",
"Pack project failed": "Pack project failed",
"Create project": "Create project",
"Rename project": "Rename project", "Rename project": "Rename project",
"Entry scene view": "Entry scene view", "Entry scene view": "Entry scene view",
"Page title": "Page title", "Page title": "Page title",
"Container ID": "Container ID", "Container ID": "Container ID",
"Design width": "Design width", "Design width": "Design width",
"Design height": "Design height", "Design height": "Design height",
"Frame Rate": "Frame Rate", "Frame Rate": "Frame Rate",
"Scale Mode": "Scale Mode", "Scale Mode": "Scale Mode",
"Renderer Type": "Renderer Type", "Renderer Type": "Renderer Type",
"Props Editor": "Props Editor", "Props Editor": "Props Editor",
"Edit Behavior": "Edit Behavior",
"Trigger once": "Trigger once", "Trigger once": "Trigger once",
"Meta Editor": "Meta Editor", "Meta Editor": "Meta Editor",
"As inline": "As inline", "As inline": "As inline",
"Link to parent": "Link to parent", "Link to parent": "Link to parent",
"Input project name": "Input project name", "Input project name": "Input project name",
"Invalid project name": "Invalid project name", "Invalid project name": "Invalid project name",
"Creating project": "Creating project…", "Creating project": "Creating project…",
"Create project success": "Create project success", "Create project success": "Create project success",
"Duplicate project": "Duplicate project", "Duplicate project": "Duplicate project",
"Duplicating project": "Duplicating project…", "Duplicating project": "Duplicating project…",
"Duplicate project success": "Duplicate project success", "Duplicate project success": "Duplicate project success",
"Project name cannot be empty": "Project name cannot be empty", "Project name cannot be empty": "Project name cannot be empty",
"This action will permanently delete project": "This action will permanently delete project[{projectName}], continue?", "This action will permanently delete project": "This action will permanently delete project[{projectName}], continue?",
"Fetching projects": "Fetching projects…", "Fetching projects": "Fetching projects…",
"Failed to fetch env": "Failed to fetch env", "Failed to fetch env": "Failed to fetch env",
"Failed to fetch projects": "Failed to fetch projects", "Failed to fetch projects": "Failed to fetch projects",
"Failed to fetch project": "Failed to fetch project", "Failed to fetch project": "Failed to fetch project",
"Failed to create project": "Failed to create project", "Failed to create project": "Failed to create project",
"Failed to duplicate project": "Failed to duplicate project", "Failed to duplicate project": "Failed to duplicate project",
"Failed to delete project": "Failed to delete project", "Failed to delete project": "Failed to delete project",
"Failed to get project": "Failed to get project", "Failed to get project": "Failed to get project",
"Failed to save project": "Failed to save project", "Failed to save project": "Failed to save project",
"Save project successfully": "Save project successfully", "Save project successfully": "Save project successfully",
"Input view name": "Input view name", "Input view name": "Input view name",
"Invalid view name": "Invalid view name", "Invalid view name": "Invalid view name",
"Unsaved version found locally": "Unsaved version found locally, please select version to open", "Unsaved version found locally": "Unsaved version found locally, please select version to open",
"Local Version": "Local Version", "Local Version": "Local Version",
"Remote Version": "Remote Version", "Remote Version": "Remote Version",
"Confirm to exit the editor": "Confirm to exit the editor?", "Confirm to exit the editor": "Confirm to exit the editor?",
"Confirm to publish": "Confirm to publish?", "Confirm to publish": "Confirm to publish?",
"Are you sure to delete this asset": "Are you sure to delete this asset", "Are you sure to delete this asset": "Are you sure to delete this asset",
"Are you sure to delete this link": "Are you sure to delete this link", "Are you sure to delete this link": "Are you sure to delete this link",
"Rename asset": "Rename asset", "Rename asset": "Rename asset",
"Input asset name": "Input asset name", "Input asset name": "Input asset name",
"Invalid asset name": "Invalid asset name", "Invalid asset name": "Invalid asset name",
"Copied field to clipboard": "Copied {field} to clipboard", "Copied field to clipboard": "Copied {field} to clipboard",
"Unsaved Alert": "You are leaving, but the project is not saved. Do you want to save it?", "Unsaved Alert": "You are leaving, but the project is not saved. Do you want to save it?",
"Meta is in use, can not delete": "Meta is in use, can not delete!", "Meta is in use, can not delete": "Meta is in use, can not delete!",
"Are you sure to delete this meta": "Are you sure to delete this meta?", "Are you sure to delete this meta": "Are you sure to delete this meta?",
"This Meta ID is in use, can not save": "This Meta ID is in use, can not save!", "This Meta ID is in use, can not save": "This Meta ID is in use, can not save!",
"Custom node desc": "Custom node", "Custom node desc": "Custom node",
"Divider node desc": "Divider node, exit will be executed in sequence", "Divider node desc": "Divider node, exit will be executed in sequence",
"Save this behavior before": "Save this behavior before?", "Save this behavior before": "Save this behavior before?",
"menu": { "menu": {
"save": "Save", "save": "Save",
"details": "Details", "details": "Details",
"preview": "Preview", "preview": "Preview",
"pack": "Pack", "pack": "Pack",
"data-mapping": "DataMapping", "data-mapping": "DataMapping",
"exit": "Exit", "exit": "Exit",
"undo": "Undo", "undo": "Undo",
"redo": "Redo" "redo": "Redo"
}, },
"view_node_menu": { "view_node_menu": {
"node": "Node", "node": "Node",
"image": "Image", "image": "Image",
"label": "Label", "label": "Label",
"rect": "Rect" "rect": "Rect"
}, },
"panes": { "panes": {
"Assets": "Assets", "Assets": "Assets",
"Inspector": "Inspector", "Inspector": "Inspector",
"Playground": "Playground", "Playground": "Playground",
"Views": "Views" "Views": "Views"
}, },
"dataTypes": { "dataTypes": {
"static": "Static", "static": "Static",
"arguments": "Arguments", "arguments": "Arguments",
"data-center": "DataCenter" "data-center": "DataCenter"
} },
"prosTypes": {
"boolean": "Boolean",
"string": "String",
"number": "Number",
"enum": "Enum",
"color": "Color",
"asset": "Asset",
"node": "Node",
"data": "Data"
},
"events": {
"init": "Init",
"awake": "Awake",
"sleep": "Sleep",
"data-center": "DataCenter",
"click": "Click",
"touchstart": "Touchstart",
"touchend": "Touchend",
"touchmove": "Touchmove"
},
"scaleMode": {
"exactFit": "EXACT_FIT",
"noBorder": "NO_BORDER",
"noScale": "NO_SCALE",
"showAll": "SHOW_ALL",
"fixedWidth": "FIXED_WIDTH",
"fixedHeight": "FIXED_HEIGHT"
},
"rendererType": {
"webgl": "WEBGL",
"canvas": "CANVAS"
}
} }
\ No newline at end of file
src/locales/zh-CN.json
View file @ 7756514c
{ {
"Alert": "提示", "Alert": "提示",
"Confirm": "确定", "Confirm": "确认",
"Cancel": "取消", "Cancel": "取消",
"In processing": "处理中…", "Close": "关闭",
"Projects": "项目列表", "Still Close": "仍然关闭",
"copy": "副本", "Save": "保存",
"No projects": "没有项目", "Copy": "复制",
"Create": "创建", "Exit": "退出",
"Project name": "项目名称", "Props": "属性",
"Template": "模板", "Behavior": "行为",
"Preparing": "准备中…", "Add": "添加",
"Create project": "创建项目", "Delete": "删除",
"Creating project": "项目创建中…", "Import": "导入",
"Create project success": "创建项目成功", "Export": "导出",
"Duplicate project": "复制项目", "Upload": "上传",
"Duplicating project": "项目复制中…", "Edit": "编辑",
"Duplicate project success": "复制项目成功", "ID": "ID",
"Project name cannot be empty": "项目名不能为空", "Name": "名字",
"This action will permanently delete project": "即将永久删除项目[{projectName}], 是否继续?", "Alias": "别名",
"Failed to fetch env": "环境获取失败", "Output": "输出",
"Failed to fetch projects": "项目列表获取失败", "Code": "代码",
"Failed to create project": "创建项目失败", "Desc": "描述",
"Failed to duplicate project": "复制项目失败", "Empty": "空",
"Failed to delete project": "删除项目失败", "Key": "属性名",
"Failed to get project": "获取项目失败", "Default": "默认值",
"Failed to save project": "保存项目失败", "Event": "事件",
"menu": { "No desc": "无描述",
"save": "保存", "Description": "描述",
"details": "详情", "Failed to fetch": "网络错误!",
"preview": "预览", "In processing": "处理中……",
"publish": "发布", "Projects": "项目",
"data-mapping": "数据映射", "copy": "复制",
"exit": "退出" "No projects": "无项目",
}, "Create": "创建",
"panes": { "Project details": "项目详情",
"Assets": "素材", "Project does not exist": "项目不存在",
"Inspector": "属性", "Project name": "项目名",
"Playground": "编辑", "Data mapping": "数据映射",
"Views": "视图" "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": "过程元配置",
"As inline": "作为内联",
"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 this link": "确定删除映射吗",
"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": "是否先保存这个行为?",
"menu": {
"save": "保存",
"details": "详情",
"preview": "预览",
"pack": "发布",
"data-mapping": "数据映射",
"exit": "退出",
"undo": "撤销",
"redo": "重做"
},
"view_node_menu": {
"node": "节点",
"image": "图片",
"label": "标签",
"rect": "矩形"
},
"panes": {
"Assets": "素材",
"Inspector": "属性",
"Playground": "画布",
"Views": "视图"
},
"dataTypes": {
"static": "静态",
"arguments": "入参",
"data-center": "数据中心"
},
"prosTypes": {
"boolean": "布尔",
"string": "字符串",
"number": "数字",
"enum": "枚举",
"color": "颜色",
"asset": "素材",
"node": "节点",
"data": "数据"
},
"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
src/store/modules/behavior.js
View file @ 7756514c
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
import Vue from "vue"; import Vue from "vue";
import i18n from "../../i18n"; import i18n from "../../i18n";
import generateUUID from "uuid/v4"; import generateUUID from "uuid/v4";
import {metaInUse, updateProcesses} from "../../utils"; import {clonePureObj, metaInUse, updateProcesses} from "../../utils";
export const behaviorStore = { export const behaviorStore = {
state: { state: {
...@@ -25,14 +25,15 @@ export const behaviorStore = { ...@@ -25,14 +25,15 @@ export const behaviorStore = {
targetUUID: '', targetUUID: '',
lineID: 0, lineID: 0,
boardOffset: {x: 0, y: 0}, boardOffset: {x: 0, y: 0},
boardScale: 1,
}, },
}, },
mutations: { mutations: {
behavior_startEdit(state, {originData, behaviors, event}) { behavior_startEdit(state, {originData, behaviors, event}) {
state.originData = originData; state.originData = originData;
state.originBehaviors = behaviors; state.originBehaviors = behaviors;
state.behaviors = JSON.parse(JSON.stringify(behaviors)); state.behaviors = clonePureObj(behaviors);
state.data = JSON.parse(JSON.stringify(originData)); state.data = clonePureObj(originData);
if (state.behaviors.length > 0) { if (state.behaviors.length > 0) {
state.currentBehavior = state.behaviors[0]; state.currentBehavior = state.behaviors[0];
...@@ -78,12 +79,12 @@ export const behaviorStore = { ...@@ -78,12 +79,12 @@ export const behaviorStore = {
}, },
deleteProcessMeta(state, {meta, process}) { deleteProcessMeta(state, {meta, process}) {
let container; let container;
if(meta.isInline){ if (meta.isInline) {
container = process.meta.metas; container = process.meta.metas;
}else{ } else {
container = state.data.processes; container = state.data.processes;
} }
if(container){ if (container) {
for (let i = 0, li = container.length; i < li; i++) { for (let i = 0, li = container.length; i < li; i++) {
const process = container[i]; const process = container[i];
...@@ -106,6 +107,15 @@ export const behaviorStore = { ...@@ -106,6 +107,15 @@ export const behaviorStore = {
state.processStack.splice(index); state.processStack.splice(index);
updatePropsEditable(state); updatePropsEditable(state);
}, },
setScale(state, value) {
let scale = state.drawState.boardScale;
if (value === 0) {
scale = 1;
} else {
scale += value;
}
state.drawState.boardScale = Math.max(Math.min(4, scale), 0.1);
}
}, },
getters: { getters: {
customProcessMap: state => { customProcessMap: state => {
...@@ -143,7 +153,7 @@ export const behaviorStore = { ...@@ -143,7 +153,7 @@ export const behaviorStore = {
} }
}, },
actions: { actions: {
addCustomProcessMeta({commit, state}, {process, isInline, processId}) { addCustomProcessMeta({commit, state}, {masterProcess, isInline, processId}) {
let meta = { let meta = {
id: generateUUID(), id: generateUUID(),
script: '', script: '',
...@@ -161,19 +171,33 @@ export const behaviorStore = { ...@@ -161,19 +171,33 @@ export const behaviorStore = {
meta.isDivider = true; meta.isDivider = true;
break; break;
} }
if (isInline) {
if (!process.meta.metas) { addProcessMeta(commit, isInline, masterProcess, meta);
Vue.set(process.meta, 'metas', []);
}
process.meta.metas.push(meta);
} else {
commit('addProcessMeta', meta);
}
return meta; return meta;
}, },
addProcessFromPrefab({commit, state}, {masterProcess, isInline, meta: pMeta}){
let meta = clonePureObj(pMeta);
meta.id = generateUUID();
meta.isInline = isInline;
delete meta.type;
addProcessMeta(commit, isInline, masterProcess, meta);
return meta;
}
} }
}; };
function updatePropsEditable(state) { function updatePropsEditable(state) {
state.editable = state.processStack.filter(item => item.meta.type === 'builtin') <= 0; state.editable = state.processStack.filter(item => item.meta.type === 'builtin') <= 0;
} }
function addProcessMeta(commit, isInline, masterProcess, meta){
if (isInline) {
if (!masterProcess.meta.metas) {
Vue.set(masterProcess.meta, 'metas', []);
}
masterProcess.meta.metas.push(meta);
} else {
commit('addProcessMeta', meta);
}
}
src/store/modules/env.js
View file @ 7756514c
...@@ -22,8 +22,8 @@ export const envStore = { ...@@ -22,8 +22,8 @@ export const envStore = {
mutations: { mutations: {
updateEnv(state, env) { updateEnv(state, env) {
Object.assign(state, env); Object.assign(state, env);
parseItem(state.processes); state.processes = parseItem(state.processes);
parseItem(state.scripts); state.scripts = parseItem(state.scripts);
state.initialized = true; state.initialized = true;
}, },
...@@ -90,7 +90,16 @@ function groupProcesses(processes, filterFunc) { ...@@ -90,7 +90,16 @@ function groupProcesses(processes, filterFunc) {
} }
function parseItem(list) { function parseItem(list) {
let hasError, result = [];
for (let i = 0, li = list.length; i < li; i++) { for (let i = 0, li = list.length; i < li; i++) {
list[i] = JSON.parse(list[i].data); try {
result.push(JSON.parse(list[i].data));
} catch (e) {
hasError = true;
}
}
if (hasError) {
console.warn('parse env error');
} }
return result;
} }
src/store/modules/project.js
View file @ 7756514c
...@@ -7,7 +7,7 @@ import { projectApi } from "../../api"; ...@@ -7,7 +7,7 @@ import { projectApi } from "../../api";
import path from "path"; import path from "path";
import generateUUID from "uuid/v4"; import generateUUID from "uuid/v4";
import { getCmpProps, flattenViews, getCmpByUUID } from '../../utils/common'; import { getCmpProps, flattenViews, getCmpByUUID } from '../../utils/common';
import { saveAs } from "../../utils"; import {clonePureObj, saveAs} from "../../utils";
import { template } from "../../template"; import { template } from "../../template";
const defaultOptions = { const defaultOptions = {
...@@ -25,7 +25,7 @@ const defaultOptions = { ...@@ -25,7 +25,7 @@ const defaultOptions = {
const OPERATE_MAX_LENGTH = 200; // 撤销重做栈最大值 const OPERATE_MAX_LENGTH = 200; // 撤销重做栈最大值
function getDefaultOptions() { function getDefaultOptions() {
return JSON.parse(JSON.stringify(defaultOptions)); return clonePureObj(defaultOptions);
} }
export const projectStore = { export const projectStore = {
......
src/themes/light/behavior.scss
View file @ 7756514c
...@@ -62,6 +62,12 @@ $dock-pin-width: 9px; ...@@ -62,6 +62,12 @@ $dock-pin-width: 9px;
border-bottom: 1px solid $--border-color-light; border-bottom: 1px solid $--border-color-light;
} }
.operate-bar{
padding: 3px;
border-bottom: 1px solid $--border-color-light;
}
} }
.board { .board {
......
src/themes/light/index.scss
View file @ 7756514c
...@@ -47,3 +47,12 @@ ...@@ -47,3 +47,12 @@
padding: 5px 0 5px 5px; padding: 5px 0 5px 5px;
} }
.el-input-number.is-controls-right .el-input__inner {
padding-left: 5px;
padding-right: 40px;
}
.el-input-number--mini .el-input-number__increase, .el-input-number--mini .el-input-number__decrease {
width: 16px;
}
src/utils/common.js
View file @ 7756514c
...@@ -18,10 +18,10 @@ export const componentsMap = [ ...@@ -18,10 +18,10 @@ export const componentsMap = [
label: '矩形', label: '矩形',
value: 'rect' value: 'rect'
}, },
/*{ {
label: '圆形', label: '圆形',
value: 'circle' value: 'circle'
},*/ }
]; ];
// 属性的计算方法 // 属性的计算方法
...@@ -293,6 +293,11 @@ export const styles = { ...@@ -293,6 +293,11 @@ export const styles = {
}); });
result += `background-position: center;background-size: 100% 100%;` result += `background-position: center;background-size: 100% 100%;`
if (component.type === 'circle' && !onlyOpera) {
// 如果是circle类型，加圆角
result += 'border-radius: 50%;'
}
// console.log('getComponentStyle',component.name, result); // console.log('getComponentStyle',component.name, result);
return result; return result;
} }
......
src/utils/events.js deleted 100644 → 0
View file @ 7ebafe76
export default ['init', 'awake', 'sleep', 'datacenter', 'click', 'touchstart', 'touchend', 'touchmove']
\ No newline at end of file
src/utils/index.js
View file @ 7756514c
...@@ -6,20 +6,6 @@ import {Message, Loading} from "element-ui"; ...@@ -6,20 +6,6 @@ import {Message, Loading} from "element-ui";
import i18n from '../i18n' import i18n from '../i18n'
import generateUUID from "uuid/v4"; import generateUUID from "uuid/v4";
export const SCALE_MODES = {
EXACT_FIT: "exactFit",
NO_BORDER: "noBorder",
NO_SCALE: "noScale",
SHOW_ALL: "showAll",
FIXED_WIDTH: "fixedWidth",
FIXED_HEIGHT: "fixedHeight",
};
export const RENDERER_TYPES= {
WEBGL: 'webgl',
CANVAS: 'canvas',
};
export function messageError(e) { export function messageError(e) {
Message({ Message({
dangerouslyUseHTMLString: true, dangerouslyUseHTMLString: true,
...@@ -103,3 +89,7 @@ export function metaInUse(process, targetMetaID) { ...@@ -103,3 +89,7 @@ export function metaInUse(process, targetMetaID) {
} }
return result; return result;
} }
export function clonePureObj(obj){
return JSON.parse(JSON.stringify(obj));
}
src/views/Editor.vue
View file @ 7756514c
...@@ -170,15 +170,15 @@ ...@@ -170,15 +170,15 @@
duration: 1000, duration: 1000,
}); });
this.$confirm(this.$t('Pack project successfully'), this.$t('Alert'), { this.$confirm(this.$t('Pack project successfully'), this.$t('Alert'), {
confirmButtonText: this.$t('Close'), confirmButtonText: this.$t('Open in new tab'),
cancelButtonText: this.$t('Open in new tab'), cancelButtonText: this.$t('Close'),
type: 'warning' type: 'warning'
}).then(() => { }).then(() => {
}).catch(() => {
setTimeout(()=>{ setTimeout(()=>{
window.open(tplUrl, 'blank'); window.open(tplUrl, 'blank');
}, 500); }, 500);
}).catch(() => {
}); });
}catch (e) { }catch (e) {
this.$message({ this.$message({
......
src/views/Editor/Inspector.vue
View file @ 7756514c
<template> <template>
<pane icon="el-icon-s-operation" :title="$t('panes.Inspector')"> <pane icon="el-icon-s-operation" :title="$t('panes.Inspector')">
<el-tabs v-model="tab" type="border-card" class="inspector-tabs"> <el-tabs v-model="tab" type="border-card" class="inspector-tabs">
<el-tab-pane label="Props" name="properties"> <el-tab-pane :label="$t('Props')" name="properties">
<props-tab/> <props-tab/>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="Behavior" name="behavior"> <el-tab-pane :label="$t('Behavior')" name="behavior">
<behavior-tab/> <behavior-tab/>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
......
src/views/Editor/Inspector/BehaviorTab.vue
View file @ 7756514c
...@@ -4,14 +4,13 @@ ...@@ -4,14 +4,13 @@
<el-form ref="form" size="mini" label-width="60px"> <el-form ref="form" size="mini" label-width="60px">
<div v-for="(evn, key) in eventsObj" :key="key"> <div v-for="(evn, key) in eventsObj" :key="key">
<el-form-item :label="$t('Event') + ':'"> <el-form-item :label="$t('Event') + ':'">
<div>{{key}}</div> <div>{{events[key]}}</div>
<div > <div >
<el-tooltip :content="$t('Trigger once')" placement="top"> <!--<el-tooltip :content="$t('Trigger once')" placement="top">
<el-switch v-model="evn.once" @change="v => handleOnceChange(key, v)"></el-switch> <el-switch v-model="evn.once" @change="v => handleOnceChange(key, v)"></el-switch>
</el-tooltip> </el-tooltip>-->
<el-button size="mini" @click="showBehaviorEditor(evn, key)" style="margin-left: 20px;"> <el-button size="mini" @click="showBehaviorEditor(evn, key)" style="margin-left: 20px;" icon="el-icon-edit">
{{$t('Edit Behavior')}} <!--<i v-if="evn.behaviors && evn.behaviors.length" class="el-icon-check el-icon&#45;&#45;right"></i>-->
<i v-if="evn.behaviors && evn.behaviors.length" class="el-icon-check el-icon--right"></i>
</el-button> </el-button>
<el-button icon="el-icon-delete" size="mini" v-if="evn.behaviors && evn.behaviors.length" @click="deleteBehavior(key)"> <el-button icon="el-icon-delete" size="mini" v-if="evn.behaviors && evn.behaviors.length" @click="deleteBehavior(key)">
</el-button> </el-button>
...@@ -27,20 +26,21 @@ ...@@ -27,20 +26,21 @@
<script> <script>
import { mapGetters } from 'vuex'; import { mapGetters } from 'vuex';
import _ from 'lodash'; import _ from 'lodash';
import events from '../../../utils/events';
import BehaviorEditorDialog from '../dialogs/BehaviorEditorDialog'; import BehaviorEditorDialog from '../dialogs/BehaviorEditorDialog';
export default { export default {
name: 'BehaviorTab', name: 'BehaviorTab',
data() { data() {
let eventsObj = {}; let eventsObj = {};
events.forEach(event => { const events = this.$t('events');
Object.keys(events).forEach(event => {
eventsObj[event] = { eventsObj[event] = {
once: false, once: false,
behaviors: [] behaviors: []
}; };
}); });
return { return {
events,
eventsObj, eventsObj,
behaviors: [], behaviors: [],
currentEvent: '' currentEvent: ''
......
src/views/Editor/Inspector/PropsTab.vue
View file @ 7756514c
...@@ -31,7 +31,7 @@ ...@@ -31,7 +31,7 @@
<template v-for="(script, index) in activeComponent.scripts"> <template v-for="(script, index) in activeComponent.scripts">
<el-collapse-item :title="getScriptName(script.script)" :key="script + index"> <el-collapse-item :title="getScriptName(script.script)" :key="script + index">
<template v-for="(p, key) in getScriptOptions(script.script)"> <template v-for="(p, key) in getScriptOptions(script.script)">
<el-form-item :key="activeComponent.uuid + index + key" :label="key"> <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> <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> </el-form-item>
</template> </template>
...@@ -167,6 +167,8 @@ export default { ...@@ -167,6 +167,8 @@ export default {
return getCmpProps(this.activeComponent.type); return getCmpProps(this.activeComponent.type);
}, },
scripts: function() { scripts: function() {
console.log('scripts', this.$store.state.env.scripts);
return _.filter(this.$store.state.env.scripts, s => { return _.filter(this.$store.state.env.scripts, s => {
return s !== null && s !== undefined; return s !== null && s !== undefined;
}); });
...@@ -253,7 +255,7 @@ export default { ...@@ -253,7 +255,7 @@ export default {
getScriptProps(item, index) { getScriptProps(item, index) {
let _type = item.type; let _type = item.type;
let _options = []; let _options = [];
if (type === 'enum') { if (_type === 'enum') {
// 如果脚本选项对应的类型是数组，说明是枚举类型 // 如果脚本选项对应的类型是数组，说明是枚举类型
_options = item.enum.map(i => { _options = item.enum.map(i => {
return { return {
...@@ -277,7 +279,10 @@ export default { ...@@ -277,7 +279,10 @@ export default {
}, },
getScriptType(item, index) { getScriptType(item, index) {
// 如果脚本选项对应的类型是数组，说明是枚举类型 // 如果脚本选项对应的类型是数组，说明是枚举类型
let _type = _.isArray(item.type) ? 'select' : item.type; let _type = item.type;
if (_type === 'enum') {
_type = 'select';
}
return scriptTypeMap[_type].component; return scriptTypeMap[_type].component;
}, },
getScriptName(id) { getScriptName(id) {
......
src/views/Editor/behavior-editor/BehaviorEditor.vue
View file @ 7756514c
...@@ -11,6 +11,13 @@ ...@@ -11,6 +11,13 @@
</split-panes> </split-panes>
<div class="center full-size background" splitpanes-min="20" :splitpanes-size="70"> <div class="center full-size background" splitpanes-min="20" :splitpanes-size="70">
<edit-path :processStack="processStack" @pop="onPop"/> <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"/> <board ref="board" @select-process-node="onSelectProcessNode" @edit-process="editProcess" @edit-meta="onEditMeta"/>
</div> </div>
<div class="properties background full-size" splitpanes-min="20" :splitpanes-size="20"> <div class="properties background full-size" splitpanes-min="20" :splitpanes-size="20">
...@@ -106,7 +113,7 @@ ...@@ -106,7 +113,7 @@
cancelButtonText: this.$t('Cancel'), cancelButtonText: this.$t('Cancel'),
type: 'warning' type: 'warning'
}).then(() => { }).then(() => {
this.deleteProcessMeta(meta.id); this.deleteProcessMeta({meta});
}).catch((e) => { }).catch((e) => {
}); });
} }
...@@ -132,6 +139,7 @@ ...@@ -132,6 +139,7 @@
'clearProcessStack', 'clearProcessStack',
'pushProcessStack', 'pushProcessStack',
'popProcessStack', 'popProcessStack',
'setScale',
]), ]),
...mapGetters([ ...mapGetters([
'metaInUse', 'metaInUse',
......
src/views/Editor/behavior-editor/Board.vue
View file @ 7756514c
<template> <template>
<div class="board" @dragover="onDragOver" @drop="onDrop" v-resize="onResize"> <div class="board" @dragover="onDragOver" @drop="onDrop" v-resize="onResize">
<svg class="svg-board full-size" version="1.1" xmlns="http://www.w3.org/2000/svg" <!--<el-scrollbar class="full-size">-->
xmlns:xlink="http://www.w3.org/1999/xlink"> <svg ref="board" class="svg-board full-size" version="1.1" xmlns="http://www.w3.org/2000/svg"
<g id="layer" stroke-width="2" fill="none" fill-rule="evenodd"> xmlns:xlink="http://www.w3.org/1999/xlink" @mousedown="onBoardMouseDown">
<link-line v-for="(line, key, index) in lines" :data="line" :key="index" @dblclick="onDeleteLine"></link-line> <g ref="borderWrapper" :style="boardStyle">
<path v-show="lineDrawing.visible" class="line hover" :d="lineDrawing.path"></path> <g id="layer" stroke-width="2" fill="none" fill-rule="evenodd">
</g> <link-line v-for="(line, key, index) in lines" :data="line" :key="index" @dblclick="onDeleteLine"></link-line>
<g id="nodes"> <path v-show="lineDrawing.visible" class="line hover" :d="lineDrawing.path"></path>
<process-node v-for="(process, key, index) of subProcessMap" :ref="'pn_' + key" :process="process" :key="index" </g>
@click="onClickProcessNode(process, key)" <g id="nodes">
@hover-pin="onPinHover" <process-node v-for="(process, key, index) of subProcessMap" :ref="'pn_' + key" :process="process"
@leave-pin="onPinLeave" :key="index"
@down-pin="onPintDown" @click="onClickProcessNode(process, key)"
@delete="onProcessNodeDelete" @hover-pin="onPinHover"
@edit-meta="onEditMeta" @leave-pin="onPinLeave"
@dblclick="editSubProcess(process)" @down-pin="onPintDown"
@meta-modified="onProcessMetaModified" @delete="onProcessNodeDelete"
/> @edit-meta="onEditMeta"
@dblclick="editSubProcess(process)"
@meta-modified="onProcessMetaModified"
/>
</g>
</g> </g>
</svg> </svg>
<!--</el-scrollbar>-->
<tool-tip ref="toolTip"/> <tool-tip ref="toolTip"/>
<inline-choose-dialog ref="inlineChooseDialog"/> <inline-choose-dialog ref="inlineChooseDialog"/>
</div> </div>
</template> </template>
<script> <script>
//:style="boardStyle"
import {mapState, mapMutations, mapGetters, mapActions} from 'vuex' import {mapState, mapMutations, mapGetters, mapActions} from 'vuex'
import ProcessNode from "./Board/ProcessNode"; import ProcessNode from "./Board/ProcessNode";
import Process from "./Board/Process"; import Process from "./Board/Process";
...@@ -36,7 +42,7 @@ ...@@ -36,7 +42,7 @@
import InlineChooseDialog from "./InlineChooseDialog"; import InlineChooseDialog from "./InlineChooseDialog";
const customs = ['custom', 'divider']; const customs = ['custom', 'divider'];
//todo 缩放功能
export default { export default {
name: "Board", name: "Board",
components: {InlineChooseDialog, ToolTip, LinkLine, ProcessNode,}, components: {InlineChooseDialog, ToolTip, LinkLine, ProcessNode,},
...@@ -52,6 +58,10 @@ ...@@ -52,6 +58,10 @@
path: '', path: '',
process: null, process: null,
}, },
boardOffset: {
x: 0,
y: 0,
}
} }
}, },
mounted() { mounted() {
...@@ -61,17 +71,27 @@ ...@@ -61,17 +71,27 @@
...mapState({ ...mapState({
drawState: state => state.behavior.drawState, drawState: state => state.behavior.drawState,
editable: state => state.behavior.editable, editable: state => state.behavior.editable,
}) scale: state => state.behavior.drawState.boardScale,
}),
boardStyle() {
return {
transform: `scale(${this.scale}) translate(${this.boardOffset.x}px, ${this.boardOffset.y}px)`
}
},
}, },
methods: { methods: {
...mapActions([ ...mapActions([
'addCustomProcessMeta', 'addCustomProcessMeta',
'addDividerProcessMeta', 'addProcessFromPrefab',
]), ]),
...mapMutations([ ...mapMutations([
'deleteProcessMeta', 'deleteProcessMeta',
'setScale',
]), ]),
async edit(process, resolveProcess) { async edit(process, resolveProcess) {
this.boardOffset.x = 0;
this.boardOffset.y = 0;
this.setScale(0);
this.selectedProcessNode = null; this.selectedProcessNode = null;
this.process = process; this.process = process;
this.resolveProcess = resolveProcess; this.resolveProcess = resolveProcess;
...@@ -96,7 +116,7 @@ ...@@ -96,7 +116,7 @@
this.$set(this.subProcessMap, uuid, process); this.$set(this.subProcessMap, uuid, process);
}, },
async addSubProcessData(processId, pos) { async addSubProcessData(processId, pos) {
let process, processMeta, isInline; let meta, isInline;
if (customs.includes(processId)) { if (customs.includes(processId)) {
try { try {
...@@ -106,15 +126,24 @@ ...@@ -106,15 +126,24 @@
return; return;
} }
processMeta = await this.addCustomProcessMeta({process: this.process, isInline, processId}); meta = await this.addCustomProcessMeta({masterProcess: this.process, isInline, processId});
processId = processMeta.id; }else{
meta = this.process.resolveMeta(processId);
} }
process = this.process.resolveMeta(processId); if(meta.isPrefab){
try {
const result = await this.$refs.inlineChooseDialog.show();
isInline = result.isInline;
} catch (e) {
return;
}
meta = await this.addProcessFromPrefab({masterProcess: this.process, isInline, meta})
}
let data = { let data = {
uuid: generateUUID(), uuid: generateUUID(),
meta: process.id, meta: meta.id,
design: { design: {
x: pos.x, x: pos.x,
y: pos.y, y: pos.y,
...@@ -140,10 +169,10 @@ ...@@ -140,10 +169,10 @@
} }
const data = await this.addSubProcessData(processId, { const data = await this.addSubProcessData(processId, {
x: e.offsetX - 9, x: e.offsetX - this.boardOffset.x - 9,
y: e.offsetY, y: e.offsetY - this.boardOffset.y,
}); });
if(!data){ if (!data) {
return; return;
} }
this.addSubProcess(data.uuid, data); this.addSubProcess(data.uuid, data);
...@@ -154,8 +183,8 @@ ...@@ -154,8 +183,8 @@
}, },
onResize() { onResize() {
const {x, y} = this.$el.getBoundingClientRect(); const {x, y} = this.$el.getBoundingClientRect();
this.drawState.boardOffset.x = x; this.drawState.boardOffset.x = x + this.boardOffset.x;
this.drawState.boardOffset.y = y; this.drawState.boardOffset.y = y + this.boardOffset.y;
}, },
measure() { measure() {
this.onResize(); this.onResize();
...@@ -213,9 +242,10 @@ ...@@ -213,9 +242,10 @@
this.onMouseMove(e); this.onMouseMove(e);
}, },
onMouseMove(e) { onMouseMove(e) {
const scale = this.scale;
let x = e.x - this.drawState.boardOffset.x; let x = e.x - this.drawState.boardOffset.x;
let y = e.y - this.drawState.boardOffset.y; let y = e.y - this.drawState.boardOffset.y;
this.lineDrawing.path = this.drawingLineStart + `${x},${y} ${x},${y}`; this.lineDrawing.path = this.drawingLineStart + `${x / scale},${y / scale} ${x / scale},${y / scale}`;
}, },
onMouseUp(e) { onMouseUp(e) {
document.removeEventListener("mousemove", this.onMouseMove); document.removeEventListener("mousemove", this.onMouseMove);
...@@ -256,11 +286,11 @@ ...@@ -256,11 +286,11 @@
}); });
} }
}, },
onEditMeta(data, meta){ onEditMeta(data, meta) {
this.$emit('edit-meta', meta); this.$emit('edit-meta', meta);
}, },
editSubProcess(process) { editSubProcess(process) {
if (!process.meta.isDivider && (this.editable || process.meta.sub && Object.keys(process.meta.sub).length > 0)) { if (!process.meta.isDivider && this.editable && (process.meta.type !== 'builtin' || process.meta.sub && Object.keys(process.meta.sub).length > 0)) {
this.$emit('edit-process', process); this.$emit('edit-process', process);
} }
}, },
...@@ -309,7 +339,45 @@ ...@@ -309,7 +339,45 @@
} }
} }
}); });
} },
onBoardMouseDown(e) {
if (e.target !== this.$refs.board) {
return;
}
document.addEventListener("mousemove", this.onBoardMouseMove);
document.addEventListener("mouseup", this.onBoardMouseUp);
const {screenX, screenY} = e;
this.boardDragDownPos = {x: screenX, y: screenY};
this.boardDragStartPos = {
x: this.boardOffset.x,
y: this.boardOffset.y,
}
},
onBoardMouseMove(e) {
if (!this.boardDragDownPos) {
return;
}
const {x, y} = this.boardDragDownPos;
const {screenX, screenY} = e;
const offset = {
x: screenX - x,
y: screenY - y,
};
this.boardOffset.x = this.boardDragStartPos.x + offset.x / this.scale;
this.boardOffset.y = this.boardDragStartPos.y + offset.y / this.scale;
//console.log(this.boardOffset.x, this.boardOffset.y);
},
onBoardMouseUp(e) {
if (!this.boardDragDownPos) {
return;
}
this.onResize();
this.boardDragDownPos = null;
},
} }
} }
</script> </script>
......
src/views/Editor/behavior-editor/Board/ProcessNode.vue
View file @ 7756514c
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
@mouseleave="onMouseLeave" @click="onClick" @dblclick="onDblclick"> @mouseleave="onMouseLeave" @click="onClick" @dblclick="onDblclick">
<div class="top-bar" v-if="meta.id !== 'entry' && editable"> <div class="top-bar" v-if="meta.id !== 'entry' && editable">
<el-link icon="el-icon-delete" :underline="false" @mousedown.stop.prevent @click.stop="onClickDelete"/> <el-link icon="el-icon-delete" :underline="false" @mousedown.stop.prevent @click.stop="onClickDelete"/>
<el-link icon="el-icon-edit" :underline="false" v-if="meta.type !== 'builtin'" @mousedown.stop.prevent @click.stop="onClickEdit"/> <el-link icon="el-icon-edit" :underline="false" v-if="meta.type !== 'builtin' && !meta.isDivider" @mousedown.stop.prevent @click.stop="onClickEdit"/>
</div> </div>
<div class="header"> <div class="header">
<i v-if="meta.isInline">i</i> <i v-if="meta.isInline">i</i>
...@@ -158,8 +158,8 @@ ...@@ -158,8 +158,8 @@
const {x, y, dx, dy} = this.mouseDownPos; const {x, y, dx, dy} = this.mouseDownPos;
const offset = this.offset = {x: e.screenX - x, y: e.screenY - y}; const offset = this.offset = {x: e.screenX - x, y: e.screenY - y};
const tx = offset.x + dx; const tx = offset.x / this.drawState.boardScale + dx;
const ty = offset.y + dy; const ty = offset.y / this.drawState.boardScale + dy;
this.data.design.x = tx; this.data.design.x = tx;
this.data.design.y = ty; this.data.design.y = ty;
......
src/views/Editor/behavior-editor/MetaEditorDialog.vue
View file @ 7756514c
...@@ -5,13 +5,13 @@ ...@@ -5,13 +5,13 @@
<div class="meta-editor-wrapper"> <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> <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> <template>
<el-form-item prop="id" label="ID"> <el-form-item prop="id" :label="$t('ID')">
<el-input v-model="meta.id" :placeholder="$t('ID')" :readonly="!editable"/> <el-input v-model="meta.id" :placeholder="$t('ID')" :readonly="!editable"/>
</el-form-item> </el-form-item>
<el-form-item prop="name" label="Name"> <el-form-item prop="name" :label="$t('Name')">
<el-input v-model="meta.name" :placeholder="$t('Name')" :readonly="!editable"/> <el-input v-model="meta.name" :placeholder="$t('Name')" :readonly="!editable"/>
</el-form-item> </el-form-item>
<el-form-item prop="desc" label="Desc"> <el-form-item prop="desc" :label="$t('Desc')">
<el-input v-model="meta.desc" :placeholder="$t('Description')" :readonly="!editable"/> <el-input v-model="meta.desc" :placeholder="$t('Description')" :readonly="!editable"/>
</el-form-item> </el-form-item>
<!--<el-form-item prop="type" label="Type"> <!--<el-form-item prop="type" label="Type">
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
<el-form-item prop="group" label="Group"> <el-form-item prop="group" label="Group">
<el-input v-model="meta.group" :placeholder="$t('Group')" :readonly="!editable"/> <el-input v-model="meta.group" :placeholder="$t('Group')" :readonly="!editable"/>
</el-form-item>--> </el-form-item>-->
<el-form-item label="Props"> <el-form-item :label="$t('Props')">
<el-link :underline="false" @click="onClickEditProps" :disabled="!editable"> <el-link :underline="false" @click="onClickEditProps" :disabled="!editable">
<template v-if="Object.keys(meta.props).length"> <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> <el-tag type="success" size="mini" v-for="(option, key) in meta.props" :key="key">{{key}}</el-tag>
...@@ -28,7 +28,7 @@ ...@@ -28,7 +28,7 @@
<template v-else>{{$t('Empty')}}</template> <template v-else>{{$t('Empty')}}</template>
</el-link> </el-link>
</el-form-item> </el-form-item>
<el-form-item label="Output"> <el-form-item :label="$t('Output')">
<div style="display: flex;flex: 1;"> <div style="display: flex;flex: 1;">
<el-select style="flex: 1;" v-model="meta.output" :disabled="!editable" allow-create filterable multiple <el-select style="flex: 1;" v-model="meta.output" :disabled="!editable" allow-create filterable multiple
:placeholder="$t('Output')"/> :placeholder="$t('Output')"/>
...@@ -48,8 +48,8 @@ ...@@ -48,8 +48,8 @@
<el-button size="mini" slot="reference" plain @click="pasteMeta">PasteMeta</el-button> <el-button size="mini" slot="reference" plain @click="pasteMeta">PasteMeta</el-button>
</el-popover> </el-popover>
</el-button-group> </el-button-group>
<el-button size="mini" plain @click="cancel">Cancel</el-button> <el-button size="mini" plain @click="cancel">{{$t('Cancel')}}</el-button>
<el-button size="mini" plain @click="save">Save</el-button> <el-button size="mini" plain @click="save">{{$t('Save')}}</el-button>
</div> </div>
</div> </div>
<props-editor-dialog ref="propsEditorDialog"/> <props-editor-dialog ref="propsEditorDialog"/>
...@@ -60,6 +60,7 @@ ...@@ -60,6 +60,7 @@
import ElFormItem from "./inputs/form-item"; import ElFormItem from "./inputs/form-item";
import PropsEditorDialog from "./PropsEditorDialog"; import PropsEditorDialog from "./PropsEditorDialog";
import copy from 'copy-to-clipboard' import copy from 'copy-to-clipboard'
import {clonePureObj} from "../../../utils";
export default { export default {
name: "MetaEditorDialog", name: "MetaEditorDialog",
...@@ -91,7 +92,7 @@ ...@@ -91,7 +92,7 @@
methods: { methods: {
edit(meta) { edit(meta) {
this.visible = true; this.visible = true;
this.meta = JSON.parse(JSON.stringify(meta)); this.meta = clonePureObj(meta);
this.oldMetaID = this.meta.id; this.oldMetaID = this.meta.id;
}, },
onClickEditProps() { onClickEditProps() {
......
src/views/Editor/behavior-editor/PropsEditorDialog.vue
View file @ 7756514c
...@@ -11,13 +11,13 @@ ...@@ -11,13 +11,13 @@
:data="props" :data="props"
style="width: 100%"> style="width: 100%">
<el-table-column <el-table-column
label="Type" :label="$t('Type')"
width="100"> width="100">
<template slot-scope="scope"> <template slot-scope="scope">
<el-select v-model="scope.row.option.type" size="mini"> <el-select v-model="scope.row.option.type" size="mini">
<el-option v-for="type in types" <el-option v-for="(str, type) in types"
:key="type" :key="type"
:label="type" :label="str"
:value="type" :value="type"
> >
</el-option> </el-option>
...@@ -25,21 +25,21 @@ ...@@ -25,21 +25,21 @@
</template> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column
label="Key" :label="$t('Key')"
width="120"> width="200">
<template slot-scope="scope"> <template slot-scope="scope">
<el-input v-model="scope.row.key" size="mini"/> <el-input v-model="scope.row.key" size="mini"/>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column
label="Alias" :label="$t('Alias')"
width="100"> width="200">
<template slot-scope="scope"> <template slot-scope="scope">
<el-input v-model="scope.row.option.alias" size="mini"/> <el-input v-model="scope.row.option.alias" size="mini"/>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column
label="Default"> :label="$t('Default')">
<template slot-scope="scope"> <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 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-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"/>
...@@ -72,14 +72,16 @@ ...@@ -72,14 +72,16 @@
</div> </div>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
<div class="button-bar"> <div class="button-bar">
<el-button size="mini" plain @click="cancel">Cancel</el-button> <el-button size="mini" plain @click="cancel">{{$t('Cancel')}}</el-button>
<el-button size="mini" plain @click="save">Save</el-button> <el-button size="mini" plain @click="save">{{$t('Save')}}</el-button>
</div> </div>
</div> </div>
</el-dialog> </el-dialog>
</template> </template>
<script> <script>
import {clonePureObj} from "../../../utils";
export default { export default {
name: "PropsEditorDialog", name: "PropsEditorDialog",
data() { data() {
...@@ -88,23 +90,14 @@ ...@@ -88,23 +90,14 @@
originProps: null, originProps: null,
copiedProps: null, copiedProps: null,
props: [], props: [],
types: [ types: this.$t('prosTypes'),
'boolean',
'string',
'number',
'enum',
'color',
'asset',
'node',
'data',
],
} }
}, },
methods: { methods: {
edit(props) { edit(props) {
this.visible = true; this.visible = true;
this.originProps = props; this.originProps = props;
this.copiedProps = JSON.parse(JSON.stringify(props)); this.copiedProps = clonePureObj(props);
this.props.splice(0); this.props.splice(0);
for (let key in this.copiedProps) { for (let key in this.copiedProps) {
let option = this.copiedProps[key]; let option = this.copiedProps[key];
......
src/views/Editor/behavior-editor/inputs/DataInput.vue
View file @ 7756514c
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
:disabled="!editable" :disabled="!editable"
> >
<el-radio-group v-model="editValue.type" size="mini" @change="onChange" :disabled="!editable"> <el-radio-group v-model="editValue.type" size="mini" @change="onChange" :disabled="!editable">
<el-radio-button v-for="(item, key) in dataTypes" :label="key">{{item}}</el-radio-button> <el-radio-button v-for="(item, key) in dataTypes" :label="key" :key="key">{{item}}</el-radio-button>
</el-radio-group> </el-radio-group>
<el-input clearable slot="reference" :value="editValue.value" @input="onInput" @change="onChange" <el-input clearable slot="reference" :value="editValue.value" @input="onInput" @change="onChange"
:readonly="!editable" :readonly="!editable"
......
src/views/Editor/dialogs/ProjectDetailsDialog.vue
View file @ 7756514c
...@@ -33,19 +33,19 @@ ...@@ -33,19 +33,19 @@
</el-form-item> </el-form-item>
<el-form-item prop="scaleMode" :label="$t('Scale Mode')"> <el-form-item prop="scaleMode" :label="$t('Scale Mode')">
<el-select v-model="options.scaleMode"> <el-select v-model="options.scaleMode">
<el-option v-for="(value, key) in SCALE_MODES" <el-option v-for="(label, key) in scaleMode"
:key="key" :key="key"
:value="value" :value="key"
:label="key" :label="label"
></el-option> ></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item prop="rendererType" :label="$t('Renderer Type')"> <el-form-item prop="rendererType" :label="$t('Renderer Type')">
<el-select v-model="options.rendererType"> <el-select v-model="options.rendererType">
<el-option v-for="(value, key) in RENDERER_TYPES" <el-option v-for="(label, key) in rendererType"
:key="key" :key="key"
:value="value" :value="key"
:label="key" :label="label"
></el-option> ></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
...@@ -65,13 +65,16 @@ ...@@ -65,13 +65,16 @@
import {mapState, mapGetters, mapMutations} from 'vuex'; import {mapState, mapGetters, mapMutations} from 'vuex';
import {RENDERER_TYPES, SCALE_MODES} from "../../../utils"; import {RENDERER_TYPES, SCALE_MODES} from "../../../utils";
export default { export default {
name: "ProjectDetailsDialog", name: "ProjectDetailsDialog",
data() { data() {
const scaleMode = this.$t('scaleMode');
const rendererType = this.$t('rendererType');
return { return {
visible: false, visible: false,
SCALE_MODES, scaleMode,
RENDERER_TYPES, rendererType,
} }
}, },
computed: { computed: {
......
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