Skip to content

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

内容太多，懒得写

parent 480c0363
Hide whitespace changes
Inline Side-by-side
Showing with 811 additions and 265 deletions
src/api/project.js
View file @ f771a7e7
......@@ -6,9 +6,9 @@
import {fetchApi} from "./common";
export async function fetchAll(currentPage, pageSize) {
export async function fetchAll(currentPage, pageSize, onlyMine) {
return await fetchApi('/api/project/query', {
params: {currentPage, pageSize,},
params: {currentPage, pageSize, isAll: onlyMine ? 0 : 1},
errMessage: 'Failed to fetch projects',
})
}
......@@ -45,6 +45,14 @@ export async function fetchOne(id) {
})
}
export async function fetchHistory(id, currentPage, pageSize) {
return await fetchApi('/api/project/history', {
params: {id, currentPage, pageSize},
method: 'get',
errMessage: 'Failed to history',
})
}
export async function saveOne(project) {
return await fetchApi('/api/project/update', {
params: project,
......
src/components/customElement/textinput/index.js 0 → 100644
View file @ f771a7e7
// import { set, lensPath } from 'ramda';
import properties from '../../../utils/properties';
export default {
component: require('./index.vue'),
properties: {
...properties.node,
...properties.textinput
},
props: {
type: 'textinput'
},
title: 'textinput'
};
src/components/customElement/textinput/index.vue 0 → 100644
View file @ f771a7e7
<template>
<div
class="zero-custom-text"
:class="showPlaceholder && 'placeholder'"
v-html="addNBSP + selfText"
></div>
</template>
<style>
.zero-custom-text.placeholder:after {
content: '请输入';
font-style: italic;
font-size: 12px;
}
</style>
<script>
export default {
name: 'customLabel',
props: {
properties: {
type: Object,
default: () => {}
},
isTyping: Boolean
},
data() {
return {
};
},
computed: {
showPlaceholder() {
return (
!this.isTyping &&
typeof this.properties.text !== 'undefined' &&
!this.properties.text.replace(/\s|(&nbsp;)/g, '')
);
},
addNBSP() {
return this.selfText.replace(/\s/g, '') ? '' : '&nbsp;';
},
selfText() {
return this.properties.text || '文字';
}
}
};
</script>
src/config.js
View file @ f771a7e7
......@@ -32,6 +32,7 @@ export const fileTypeIcon = {
'.json': 'file-text',
'.zip': 'file-zip',
'.fnt': 'file-font',
'.mp3': 'file-music',
'.jpg': 't',
'.jpeg': 't',
......
src/locales/en.json
View file @ f771a7e7
......@@ -12,6 +12,7 @@
"Exit": "Exit",
"Props": "Props",
"Behavior": "Behavior",
"Only mine": "Only mine",
"Add": "Add",
"Delete": "Delete",
"Delete all": "Delete all",
......@@ -24,6 +25,7 @@
"Edit": "Edit",
"EditEnv": "EditEnv",
"EditCustomModule": "EditCustomModule",
"Script": "Script",
"ID": "ID",
"Name": "Name",
"Alias": "Alias",
......@@ -80,6 +82,12 @@
"Env editor": "Env editor",
"As inline": "As inline",
"Project": "Project",
"Missing behavior": "Missing behavior",
"Input event name": "Input event name",
"Invalid event name": "Invalid event name",
"Event name exists": "Event name exists",
"Builtin event should add directly": "Builtin event should add directly",
"Rename event": "Rename event",
"Env constant": "Env constant",
"Custom module": "Custom module",
"Copy template to clipboard": "Copy template to clipboard",
......@@ -97,6 +105,7 @@
"Fetching projects": "Fetching projects…",
"Failed to fetch env": "Failed to fetch env",
"Failed to fetch projects": "Failed to fetch projects",
"Failed to fetch history": "Failed to fetch history",
"Failed to fetch project": "Failed to fetch project",
"Failed to create project": "Failed to create project",
"Failed to duplicate project": "Failed to duplicate project",
......@@ -111,6 +120,7 @@
"Remote Version": "Remote Version",
"Confirm to exit the editor": "Confirm to exit the editor?",
"Confirm to publish": "Confirm to publish?",
"Are you sure to delete it's process": "Are you sure to delete it's process",
"Are you sure to delete this asset": "Are you sure to delete this asset",
"Are you sure to delete all assets": "Are you sure to delete all assets",
"Are you sure to delete this item": "Are you sure to delete this item",
......
src/locales/zh-CN.json
View file @ f771a7e7
......@@ -12,6 +12,7 @@
"Exit": "退出",
"Props": "属性",
"Behavior": "行为",
"Only mine": "仅显示我的",
"Add": "添加",
"Delete": "删除",
"Delete all": "删除全部",
......@@ -24,6 +25,7 @@
"Edit": "编辑",
"EditEnv": "编辑环境",
"EditCustomModule": "编辑自定义模块",
"Script": "脚本",
"ID": "ID",
"Name": "名字",
"Alias": "别名",
......@@ -53,6 +55,7 @@
"Saving": "保存中…",
"Divider": "分流节点",
"Custom": "自定义节点",
"Custom event": "自定义事件",
"Entry": "入口",
"Packing": "打包",
"Type": "类型",
......@@ -80,6 +83,15 @@
"Env editor": "环境编辑器",
"As inline": "作为内联",
"Project": "项目",
"Missing behavior": "行为丢失",
"Add behavior": "添加行为",
"Edit trigger": "编辑触发",
"Delete trigger": "删除触发",
"Input event name": "输入事件名",
"Rename event": "事件重命名",
"Invalid event name": "无效的事件名",
"Event name exists": "事件名已存在",
"Builtin event should add directly": "内部事件请直接添加",
"Env constant": "自定义常量",
"Custom module": "自定义模块",
"Copy template to clipboard": "复制模板到粘贴板",
......@@ -97,6 +109,7 @@
"Fetching projects": "获取项目列表…",
"Failed to fetch env": "获取环境失败",
"Failed to fetch projects": "获取项目列表失败",
"Failed to fetch history": "获取历史记录失败",
"Failed to fetch project": "获取项目失败",
"Failed to create project": "创建项目失败",
"Failed to duplicate project": "复制项目失败",
......@@ -111,6 +124,7 @@
"Remote Version": "远程版本",
"Confirm to exit the editor": "确定退出编辑器吗?",
"Confirm to publish": "确定发布吗?",
"Are you sure to delete it's process": "确定删除这对应的过程吗",
"Are you sure to delete this asset": "确定删除这个素材吗",
"Are you sure to delete all assets": "确定删除全部素材吗",
"Are you sure to delete this item": "确定删除这一项吗",
......@@ -147,6 +161,8 @@
"image": "图片",
"label": "标签",
"rect": "矩形",
"circle": "圆形",
"textinput": "输入框",
"scrollView": "滚动视图"
},
"panes": {
......
src/store/modules/behavior.js
View file @ f771a7e7
......@@ -8,6 +8,7 @@ import Vue from "vue";
import i18n from "../../i18n";
import generateUUID from "uuid/v4";
import {clonePureObj, metaInUse, updateProcesses} from "../../utils";
import {arrayFind} from "element-ui/src/utils/util";
export const behaviorStore = {
state: {
......@@ -15,8 +16,6 @@ export const behaviorStore = {
currentBehavior: null,
processContext: [],
originData: null,
originBehaviors: null,
behaviors: null,
currentProcess: null,
processStack: [],
......@@ -30,49 +29,18 @@ export const behaviorStore = {
},
},
mutations: {
behavior_startEdit(state, {originData, behaviors, event}) {
behavior_startEdit(state, {originData, behavior}) {
state.originData = originData;
state.originBehaviors = behaviors;
state.behaviors = clonePureObj(behaviors);
state.data = clonePureObj(originData);
if (state.behaviors.length > 0) {
state.currentBehavior = state.behaviors[0];
} else {
let metaUUID = generateUUID();
state.currentBehavior = state.behaviors[0] = {
uuid: generateUUID(),
alias: event,
meta: metaUUID,
};
let subEntryUUID = generateUUID();
state.data.processes.push({
id: metaUUID,
name: event,
props: {},
subEntry: subEntryUUID,
sub: {
[subEntryUUID]: {
uuid: subEntryUUID,
alias: i18n.t('Entry'),
meta: 'entry',
design: {
x: 10,
y: 10,
}
},
},
});
}
state.currentBehavior = clonePureObj(behavior);
},
behavior_save(state) {
state.originData.processes = state.data.processes;
},
addProcessMeta(state, meta) {
state.data.processes.push(meta);
return process;
},
behavior_save(state) {
state.originData.processes = state.data.processes;
state.originBehaviors[0] = state.currentBehavior;
},
updateProcesses(state, {targetMetaID, replaceMetaID}) {
updateProcesses(state.data.processes, targetMetaID, replaceMetaID);
},
......@@ -84,14 +52,7 @@ export const behaviorStore = {
container = state.data.processes;
}
if (container) {
for (let i = 0, li = container.length; i < li; i++) {
const process = container[i];
if (process.id === meta.id) {
container.splice(i, 1);
break;
}
}
deleteProcessMeta(meta.id, container);
}
},
clearProcessStack(state) {
......@@ -156,6 +117,10 @@ export const behaviorStore = {
}
},
actions: {
behavior_save({commit, state}) {
commit('behavior_save');
return state.currentBehavior;
},
addCustomProcessMeta({commit, state}, {masterProcess, isInline, processId}) {
let meta = {
id: generateUUID(),
......@@ -209,9 +174,51 @@ function addProcessMeta(commit, isInline, masterProcess, meta) {
}
function searchMeta(processes, keyword, path) {
for(let process of processes){
for (let process of processes) {
/*if(process.id === keyword || process.name === keyword){
}*/
}
}
export function addBehavior(alias, processes) {
let metaUUID = generateUUID();
let behavior = {
uuid: generateUUID(),
meta: metaUUID,
};
let subEntryUUID = generateUUID();
processes.push({
id: metaUUID,
name: alias,
props: {},
subEntry: subEntryUUID,
sub: {
[subEntryUUID]: {
uuid: subEntryUUID,
alias: i18n.t('Entry'),
meta: 'entry',
design: {
x: 10,
y: 10,
}
},
},
});
return behavior;
}
export function deleteProcessMeta(metaId, processes) {
for (let i = 0, li = processes.length; i < li; i++) {
const process = processes[i];
if (process.id === metaId) {
processes.splice(i, 1);
break;
}
}
}
export function findProcess(metaId, processes) {
return arrayFind(processes, process => process.id === metaId);
}
src/store/modules/env.js
View file @ f771a7e7
......@@ -11,7 +11,7 @@ export const envStore = {
state: {
initialized: false,
name: 'Zeroing Editor',
version: '1.0.2',
version: '1.0.3',
templates: {
builtin: ['blank'],
custom: [],
......@@ -19,7 +19,6 @@ export const envStore = {
processes: [],
scripts: [],
customs: [],
projectCount: 0,
},
mutations: {
updateEnv(state, env) {
......
src/store/modules/project.js
View file @ f771a7e7
......@@ -12,6 +12,7 @@ import { template } from "../../template";
import { importView, uploadFile } from "../../api/project";
import events from "@/global-events";
import {packImages} from "../../utils/sheet-pack";
import {addBehavior, deleteProcessMeta, findProcess} from "./behavior";
const defaultOptions = {
pageTitle: 'no title',
......@@ -315,8 +316,8 @@ export const projectStore = {
})
},
replaceAsset(state, {uuid, url}) {
for(let asset of state.data.assets){
if(asset.uuid === uuid){
for (let asset of state.data.assets) {
if (asset.uuid === uuid) {
asset.url = url;
}
}
......@@ -451,7 +452,10 @@ export const projectStore = {
},
assets(state) {
return state.data.assets;
}
},
getProcess: state => behavior => {
return findProcess(behavior.meta, state.data.processes);
},
},
actions: {
saveToLocal({ getters, commit }) {
......@@ -621,7 +625,7 @@ export const projectStore = {
},
async packProject({state}, debug) {
let packedAssets;
if(!debug){
if (!debug) {
packedAssets = await packAssets(state.data.assets);
}
const result = await projectApi.pack(state.id, debug, packedAssets);
......@@ -638,7 +642,19 @@ export const projectStore = {
};
localStorage.setItem('preview-project-' + project.id, JSON.stringify(data));
localStorage.setItem('preview-ts', Date.now().toString());
}
},
addBehaviorDirect({state}, {behaviors, alias}) {
let behavior = addBehavior(alias, state.data.processes);
behaviors.push(behavior);
},
deleteBehaviorDirect({state}, {behaviors, index, deleteMeta}) {
let behavior = behaviors.splice(index, 1)[0];
if(deleteMeta){
deleteProcessMeta(behavior.meta, state.data.processes);
}
},
},
};
......
src/store/modules/projects.js
View file @ f771a7e7
......@@ -4,11 +4,16 @@
import {projectApi} from "../../api";
export const projectsStore = {
state: [],
state: {
projectCount: 0,
projects: [],
},
mutations: {
updateProjects(state, projects) {
state.splice(0);
state.push(...projects);
updateProjects(state, {projects, projectCount}) {
state.projects.splice(0);
state.projects.push(...projects);
state.projectCount = projectCount;
},
addProject(state, project) {
state.unshift(project);
......@@ -25,13 +30,16 @@ export const projectsStore = {
},
},
actions: {
async fetchProjects({commit}, {currentPage, pageSize}) {
const projects = await projectApi.fetchAll(currentPage, pageSize);
commit('updateProjects', projects);
async fetchProjects({commit, state}, {currentPage, pageSize, onlyMine}) {
const data = await projectApi.fetchAll(currentPage, pageSize, onlyMine);
commit('updateProjects', data);
},
async fetchProject({commit}, projectId) {
return await projectApi.fetchOne(projectId);
},
async fetchHistory({commit}, {projectId, currentPage, pageSize}) {
return await projectApi.fetchHistory(projectId, currentPage, pageSize);
},
async createProject({commit}, data) {
const project = await projectApi.createOne(data);
commit('addProject', project);
......
src/template.js
View file @ f771a7e7
......@@ -34,7 +34,7 @@ content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, u
<body>
<div id="$CONTAINER_ID$" style="line-height:0;font-size:0"></div>
<script src="${process.env.NODE_ENV === 'development' ? 'http://10.10.94.134:4002/dist/index.js' : 'http://yun.duiba.com.cn/editor/zeroing/libs/engine.d20665eae76962ad21c153fe7a719130b08e292c.js.js'}"></script>
<script src="${process.env.NODE_ENV === 'development' ? 'http://10.10.94.134:4002/dist/index.js' : 'http://yun.duiba.com.cn/editor/zeroing/libs/engine.d20665eae76962ad21c153fe7a719130b08e292c.js'}"></script>
$SCRIPTS$
<script>
engine.launch('//yun.duiba.com.cn/aurora/$VERSION$-data.json');
......
src/themes/light/behavior.scss
View file @ f771a7e7
......@@ -37,7 +37,7 @@ $dock-pin-width: 9px;
overflow: hidden;
font-size: 14px;
.current-node{
.current-node {
background-color: $--color-text-secondary;
color: $--color-white;
border-radius: 5px;
......@@ -64,13 +64,13 @@ $dock-pin-width: 9px;
display: flex;
flex-direction: column;
.el-button{
.el-button {
padding: 3px;
margin-top: 2px;
margin-right: 2px;
}
.top-bar{
.top-bar {
display: flex;
justify-content: space-between;
align-items: flex-start;
......@@ -85,7 +85,7 @@ $dock-pin-width: 9px;
}
.operate-bar{
.operate-bar {
padding: 3px;
border-bottom: 1px solid $--border-color-light;
......@@ -122,6 +122,7 @@ $dock-pin-width: 9px;
visibility: visible;
}
}
/*&:hover {
border-color: $block-border-hover-background-color;
......@@ -148,6 +149,10 @@ $dock-pin-width: 9px;
align-self: flex-end;
visibility: hidden;
.el-link {
padding: 3px 2px 2px 2px;
}
.el-link + .el-link {
margin-left: 5px;
}
......@@ -163,7 +168,7 @@ $dock-pin-width: 9px;
color: white;
display: flex;
i{
i {
display: block;
//color: $--color-warning;
margin-right: 3px;
......@@ -321,8 +326,31 @@ $dock-pin-width: 9px;
.scrollbar-view {
padding-right: 10px;
.input-wrapper {
.label {
p {
margin: 0;
//text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.alias {
line-height: 16px;
font-size: 14px;
}
.property-name {
line-height: 12px;
font-size: 12px;
color: $--color-text-secondary;
}
}
}
}
.el-form-item__content {
display: flex;
justify-content: flex-end;
......@@ -356,7 +384,7 @@ $dock-pin-width: 9px;
flex: 1;
}
.vue-codemirror{
.vue-codemirror {
flex: 1;
height: 0;
}
......@@ -421,3 +449,23 @@ $dock-pin-width: 9px;
margin-top: 5px;
}
}
.property-name-popover{
p {
margin: 0;
//text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.alias {
line-height: 16px;
font-size: 14px;
}
.property-name {
line-height: 12px;
font-size: 12px;
color: $--color-text-secondary;
}
}
src/themes/light/editor.scss
View file @ f771a7e7
......@@ -41,6 +41,7 @@
.pane-container {
flex: 1;
height: 0;
}
}
......
src/themes/light/inspector.scss
View file @ f771a7e7
@import "var";
.inspector-tabs {
flex: 1;
border: 0 !important;
......@@ -6,6 +8,11 @@
&>:last-child{
flex: 1;
height: 0;
}
.el-collapse-item__header{
height: 25px;
}
.el-tabs__item {
......@@ -45,12 +52,93 @@
}
}
.zero-inspector-behavior-form {
.zero-inspector-behavior {
height: 100%;
display: flex;
flex-direction: column;
.add-trigger{
align-self: flex-start;
}
.scrollbar{
margin-top: 5px;
height: 100%;
}
.el-button + .el-button {
margin-left: 2px;
}
.trigger-list{
color: $--color-text-regular;
font-size: 12px;
padding-right: 10px;
.trigger-item + .trigger-item {
margin-top: 5px;
}
.trigger-item {
border: 1px solid lightgray;
border-radius: 3px;
padding: 3px;
.el-button{
padding: 3px;
}
.top-bar{
display: flex;
justify-content: space-between;
align-items: center;
.name{
color: $--color-primary;
font-size: 14px;
font-weight: bold;
flex: 1;
cursor: default;
}
}
.behavior-list {
.behavior-item {
&:hover {
& > .delete-button {
visibility: visible;
}
}
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 2px;
.name-field{
flex: 1;
margin-left: 3px;
}
.missing-behavior{
color: $--color-danger;
}
.name-input {
border: 0;
outline: transparent;
}
.edit-button {
}
.delete-button {
visibility: hidden;
}
}
}
}
}
}
}
src/utils/common.js
View file @ f771a7e7
......@@ -22,6 +22,10 @@ export const componentsMap = [
label: '圆形',
value: 'circle'
},
{
label: '输入框',
value: 'textinput'
},
{
label: '滚动视图',
value: 'scrollView'
......@@ -298,7 +302,7 @@ export const styles = {
delete cmpSelfProps[prop];
});
if (component.type === 'label') {
if (component.type === 'label' || component.type === 'textinput') {
// 如果是label类型，把fillColor转换为color
cmpSelfProps.color = cmpSelfProps.fillColor;
delete cmpSelfProps.fillColor;
......
src/utils/properties.js
View file @ f771a7e7
......@@ -3,6 +3,14 @@
export default {
node: {
groupName: '基础',
visible: {
title: '是否可见',
type: 'switch',
props: {
width: 40
},
value: true
},
x: {
title: 'x坐标',
type: 'inputNumber',
......@@ -117,14 +125,6 @@ export default {
},
value: true
},
visible: {
title: '是否可见',
type: 'switch',
props: {
width: 40
},
value: true
}
},
label: {
......@@ -139,6 +139,14 @@ export default {
type: 'input',
value: ''
},
bold: {
title: '粗体',
type: 'switch',
props: {
width: 40
},
value: false,
},
fillColor: {
title: '颜色',
type: 'colorPicker',
......@@ -188,6 +196,43 @@ export default {
value: 'top'
},
},
textinput: {
groupName: '输入框',
text: {
title: '文本内容',
type: 'textArea',
value: ''
},
fillColor: {
title: '颜色',
type: 'colorPicker',
value: '#000'
},
size: {
title: '字体大小',
type: 'inputNumber',
/*type: 'swSelect',
props: {
optionType: 'fontSize'
},*/
value: 12
},
maxLength: {
title: '最大长度',
type: 'inputNumber',
value: undefined,
},
placeholder: {
title: '提示文字',
type: 'input',
value: ''
},
placeholderColor: {
title: '提示颜色',
type: 'colorPicker',
value: '#666666'
},
},
image: {
groupName: '来源',
source: {
......
src/views/Editor.vue
View file @ f771a7e7
......@@ -7,7 +7,7 @@
<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>
<assets splitpanes-min="25" :splitpanes-size="getSize(1, 1)"></assets>
</split-panes>
<inspector splitpanes-min="20" :splitpanes-size="getSize(0, 1)"></inspector>
</split-panes>
......
src/views/Editor/Assets/FileItem.vue
View file @ f771a7e7
......@@ -5,7 +5,7 @@
<img @dragstart="assetDragStart(data)" v-if="showThumbnail" draggable="true" class="thumbnail" :src="thumbnailUrl"
alt="thumb" @dblclick="onDbclick()">
<div class="operate-bar">
<el-button circle size="mini" type="success" icon="el-icon-upload2" @dblclick.native.stop
<el-button circle size="mini" type="success" icon="icon-upload" @dblclick.native.stop
@click="onClickReplace"/>
<el-button circle size="mini" type="success" icon="el-icon-edit" @dblclick.native.stop @click="onClickEdit"/>
<el-button circle size="mini" type="danger" icon="el-icon-delete" @dblclick.native.stop
......
src/views/Editor/Inspector/BehaviorTab.vue
View file @ f771a7e7
<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 class="zero-inspector-behavior" v-if="activeComponent.uuid">
<el-dropdown trigger="click" size="mini" @command="addTrigger" class="add-trigger">
<el-link icon="el-icon-plus">添加触发</el-link>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item :disabled="!!activeComponent.events[key]" v-for="(item, key) in builtinEvents" :command="key"
:key="key">{{item}}
</el-dropdown-item>
<el-dropdown-item divided command="custom">{{$t('Custom event')}}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<el-scrollbar class="scrollbar" wrap-class="wrap-x-hidden" view-class="trigger-list">
<div class="trigger-item" v-for="(trigger, name, index) in activeComponent.events" :key="index">
<div class="top-bar">
<span class="el-icon-caret-right el-tree-node__expand-icon expanded-arrow"
:class="{expanded: !trigger.collapse}"></span>
<span class="name" @click="toggleCollapse(trigger)">
{{$t('events')[name] || name}}({{trigger.behaviors.length}})
</span>
<el-dropdown trigger="click" size="mini" @command="command=>clickTriggerMore(command, trigger, name, index)">
<el-link icon="el-icon-more" :underline="false"></el-link>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item icon="el-icon-plus" command="addBehavior">{{$t('Add behavior')}}</el-dropdown-item>
<el-dropdown-item icon="el-icon-edit" command="editTrigger" :disabled="!trigger.custom" divided>{{$t('Edit trigger')}}
</el-dropdown-item>
<el-dropdown-item icon="el-icon-minus" command="deleteTrigger" :disabled="trigger.behaviors.length > 0">
{{$t('Delete trigger')}}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
<el-collapse-transition>
<div class="behavior-list" v-show="!trigger.collapse">
<div v-for="(behavior, index) in trigger.behaviors" class="behavior-item">
<enabled-setter :target="behavior"/>
<span v-if="!getBehavior(behavior)" class="name-field missing-behavior">{{$t('Missing behavior')}}</span>
<input v-else class="name-field name-input" type="text" v-model="getBehavior(behavior).name"></input>
<el-button icon="el-icon-minus" class="delete-button" type="danger" plain circle size="mini"
@click="deleteBehavior(index, trigger.behaviors)"/>
<el-button icon="el-icon-edit" class="edit-button" type="primary" plain circle size="mini"
@click="editBehavior(behavior, trigger.behaviors)"/>
</div>
</div>
</el-form-item>
</el-collapse-transition>
</div>
</el-form>
</el-scrollbar>
<behavior-editor-dialog :behaviors="behaviors" @change="isPreview => handleBehaviorsChange(isPreview)" ref="behaviorEditorDialog"></behavior-editor-dialog>
<behavior-editor-dialog @change="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"
import {mapGetters, mapActions, mapMutations} from 'vuex';
import BehaviorEditorDialog from "../dialogs/BehaviorEditorDialog";
import events from "@/global-events.js"
import EnabledSetter from "../components/EnabledSetter";
export default {
name: "BehaviorTab",
components: {EnabledSetter, BehaviorEditorDialog},
data() {
const builtinEvents = this.$t('events');
return {
builtinEvents,
}
},
watch: {
'activeComponent.uuid': function () {
this.updateEvents();
}
},
computed: {
...mapGetters(['activeComponent', 'componentList'])
},
methods: {
getBehavior(behavior) {
let process = this.$store.getters.getProcess(behavior);
if (!process) {
console.warn('missing process:', behavior.meta);
}
return process;
},
updateEvents() {
if (!this.activeComponent.events) {
this.$set(this.activeComponent, 'events', {});
}
},
addTrigger(command) {
let trigger = {behaviors: []};
if (command === 'custom') {
trigger.custom = true;
}
this.addBehavior(command, trigger.behaviors);
this.$set(this.activeComponent.events, command, trigger);
},
toggleCollapse(trigger) {
this.$set(trigger, 'collapse', !trigger.collapse);
},
clickTriggerMore(command, trigger, name, index) {
switch (command) {
case 'addBehavior':
this.addBehavior(name, trigger.behaviors);
this.$set(trigger, 'collapse', false);
break;
case 'editTrigger':
this.editTriggerName(name);
break;
case 'deleteTrigger':
this.deleteTrigger(name);
break;
}
},
addBehavior(eventName, behaviors) {
const alias = `${this.activeComponent.name}_${eventName}` + (behaviors.length > 0 ? '_' + (behaviors.length + 1) : '');
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 || {};
this.addBehaviorDirect({
alias, behaviors,
});
},
editTriggerName(name) {
this.$prompt(this.$t('Input event name'), this.$t('Rename event'), {
inputValue: name,
confirmButtonText: this.$t('Confirm'),
cancelButtonText: this.$t('Cancel'),
closeOnClickModal: false,
inputPattern: /^.{1,256}$/,
inputErrorMessage: this.$t('Invalid event name'),
}).then(({value}) => {
if (name !== value) {
const events = this.activeComponent.events;
if (events.hasOwnProperty(value)) {
this.$alert(this.$t('Event name exists'))
} else if (this.builtinEvents.hasOwnProperty(value)) {
this.$alert(this.$t('Builtin event should add directly'))
} else {
this.$set(events, value, events[name]);
this.$delete(events, name);
}
}
}).catch(() => {
});
},
deleteTrigger(name) {
this.$delete(this.activeComponent.events, name);
},
editBehavior(behavior, behaviors) {
this.$refs.behaviorEditorDialog.show(behavior, behaviors);
},
handleBehaviorsChange(isPreview) {
if (isPreview) {
events.$emit('saveAndPreview')
}
},
async deleteBehavior(index, behaviors) {
let deleteMeta = false;
await this.$confirm(this.$t('Are you sure to delete it\'s process'), this.$t('Alert'), {
showClose: false,
closeOnClickModal: false,
closeOnPressEscape: false,
confirmButtonText: this.$t('Confirm'),
cancelButtonText: this.$t('Cancel'),
type: 'warning'
}).then(() => {
deleteMeta = true;
}).catch((e) => {
});
_.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');
}
}
};
this.deleteBehaviorDirect({
behaviors,
index,
deleteMeta,
})
},
...mapActions([
'modifyActiveView',
'getProcess',
'addBehaviorDirect',
'deleteBehaviorDirect',
])
}
}
</script>
<style scoped>
<style scoped lang="scss">
</style>
\ No newline at end of file
src/views/Editor/Inspector/BehaviorTab2.vue 0 → 100644
View file @ f771a7e7
<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: 'BehaviorTab2',
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
src/views/Editor/Inspector/PropsTab.vue
View file @ f771a7e7
......@@ -3,8 +3,7 @@
<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-collapse-item :title="$t('Props')" name="properties">
<el-form-item label="名称">
<el-input v-model="form.name" @input="v => handleChange('name', v)"></el-input>
</el-form-item>
......@@ -24,9 +23,8 @@
</el-tooltip>
</el-form-item>
</template>
</div>
</el-collapse-item>
<el-collapse-item title="脚本" name="scripts">
<el-collapse-item :title="$t('Script')" 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">
......@@ -42,16 +40,12 @@
</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>
<el-dropdown trigger="click" @command="handleAddScript" placement="top" size="small">
<el-button size="mini">{{$t('Add')}}</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item v-for="(script, key) of scripts" :command="script.id" :key="key">{{script.name}}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</el-collapse-item>
</el-collapse>
......@@ -61,7 +55,7 @@
</template>
<script>
import { mapGetters } from 'vuex';
import { mapGetters, mapState } from 'vuex';
import _ from 'lodash';
import { componentsMap, getCmpProps } from '../../../utils/common';
import dynamicComponent from '../components/dynamicComponent';
......@@ -152,33 +146,26 @@ export default {
data() {
return {
componentsMap,
scriptDialog: false,
form: {
name: '',
type: '',
properties: {},
scripts: []
},
defaultProps: {
children: 'children',
label: 'name'
},
configColl: ['properties']
};
},
computed: {
...mapGetters(['activeComponent', 'activeComponentCopy', 'componentList']),
...mapState({
scripts(state){
return state.env.scripts;
}
}),
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: {
......@@ -199,10 +186,9 @@ export default {
/**
* 脚本预设对象选中
*/
handleNodeClick(script) {
console.log('handleNodeClick', script);
this.$store.dispatch('addNodeScript', script.id);
this.scriptDialog = false;
handleAddScript(command) {
console.log('handleAddScript', command);
this.$store.dispatch('addNodeScript', command);
},
/**
* 基础属性发生改变
......@@ -316,17 +302,11 @@ export default {
.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;
max-height: 500px;
}
}
.script-config-dialog {
......
src/views/Editor/Views.vue
View file @ f771a7e7
......@@ -12,21 +12,23 @@
</el-dropdown-menu>
</el-dropdown>
</div>
<el-input v-model="filterText" size="mini"/>
<el-scrollbar class="tree-scrollbar" wrap-class="wrap-x-hidden">
<el-tree
ref="tree"
:data="views"
:props="defaultProps"
:expand-on-click-node="false"
:default-expanded-keys="expandedKeys"
draggable
ref="tree"
node-key="uuid"
highlight-current
:default-expand-all="false"
@node-click="handleNodeClick"
empty-text=""
:allow-drag="allowDrag"
:allow-drop="allowDrop"
:filter-node-method="filterNodeMethod"
@node-click="handleNodeClick"
>
<div slot-scope="{ node, data }" class="tree-node">
<div class="node-name">
......@@ -67,6 +69,7 @@
components: {Pane},
data() {
return {
filterText: '',
defaultProps: {
children: 'children',
label: 'name'
......@@ -88,9 +91,20 @@
this.$refs.tree.setCheckedKeys([val]); // 设置选中节点
this.$refs.tree.setCurrentKey(val); // 设置高亮节点
this.expandedKeys = [val]; // 展开对应的节点
}
},
filterText(val) {
this.updateFilter();
},
},
methods: {
updateFilter(){
if(this.$refs.tree){
this.$refs.tree.filter(this.filterText);
}
},
filterNodeMethod(value, data) {
return data.name.toUpperCase().indexOf(value.toUpperCase()) >= 0;
},
allowDrag(draggingNode) {
return draggingNode.parent.parent;
},
......
src/views/Editor/behavior-editor/Board/EditPath.vue
View file @ f771a7e7
......@@ -18,7 +18,7 @@
},
methods: {
parseName(process){
return process.data.alias || process.meta.name;
return process.meta.name;
},
onClickItem(process, index){
this.$emit('pop', index);
......
src/views/Editor/behavior-editor/inputs/InputWrapper.vue
View file @ f771a7e7
<template>
<el-form-item class="input-wrapper" :label="property.alias || propertyName" content-float="right"
<el-form-item class="input-wrapper" :label="propertyName" content-float="right"
:content-width="contentWidth" :labelOffsetTop="labelOffsetTop">
<el-tooltip placement="top" class="label" slot="label" trigger="hover" :open-delay="500" :enterable="false">
<div slot="content" class="property-name-popover">
<p>{{$t('Alias')}}：{{property.alias}}</p>
<p>{{$t('Name')}}：{{propertyName}}</p>
</div>
<div>
<p class="alias">{{property.alias}}</p>
<p class="property-name">{{propertyName}}</p>
</div>
</el-tooltip>
<template v-if="linked">
<span class="linked">Linked to parent</span>
</template>
......@@ -48,13 +58,11 @@
default: 0,
},
},
data(){
return {
}
data() {
return {}
},
watch: {
value(v){
value(v) {
}
},
......
src/views/Editor/components/EnabledSetter.vue 0 → 100644
View file @ f771a7e7
<template>
<el-checkbox v-model="editValue"/>
</template>
<script>
export default {
name: "EnabledSetter",
props: ['target'],
computed: {
editValue: {
get() {
return !this.target.disabled;
},
set(v) {
this.$set(this.target, 'disabled', !v);
}
}
},
methods: {}
}
</script>
<style scoped>
</style>
\ No newline at end of file
src/views/Editor/dialogs/BehaviorEditorDialog.vue
View file @ f771a7e7
......@@ -11,7 +11,7 @@
</template>
<script>
import {mapState, mapMutations} from 'vuex'
import {mapState, mapMutations, mapActions} from 'vuex'
import BehaviorEditor from "../behavior-editor/BehaviorEditor";
import events from "@/global-events.js"
......@@ -36,19 +36,26 @@
});
},
methods: {
show(behaviors, event) {
show(behavior, behaviors) {
this.behaviors = behaviors;
this.behavior_startEdit({
originData: this.data,
behaviors,
event,
behavior,
});
this.editorReady = false;
this.visible = true;
},
onSave(isPreview) {
this.behavior_save();
async onSave(isPreview) {
const behavior = await this.behavior_save();
for (let i = 0, li = this.behaviors.length; i < li; i++) {
const b = this.behaviors[i];
if (b.uuid === behavior.uuid) {
this.$set(this.behaviors, i, behavior);
break;
}
}
this.$emit('change', isPreview);
if(!isPreview){
if (!isPreview) {
this.visible = false;
}
},
......@@ -77,9 +84,11 @@
},
...mapMutations([
'behavior_startEdit',
'behavior_save',
'behavior_cancel',
]),
...mapActions([
'behavior_save',
])
}
}
</script>
......
src/views/Home.vue
View file @ f771a7e7
......@@ -6,7 +6,7 @@
<main>
<div class="project-list">
<el-table
:data="projects"
:data="projects.projects"
:empty-text="$t('No projects')"
height="100%"
>
......@@ -23,6 +23,11 @@
<el-table-column
fixed="right"
width="140">
<template slot="header" slot-scope="scope">
<el-checkbox
v-model="onlyMine"
size="mini">{{$t('Only mine')}}</el-checkbox>
</template>
<template slot-scope="scope">
<el-button
@click.native.prevent="selectProject(scope.row)"
......@@ -36,7 +41,7 @@
</el-button>
<el-button
@click.native.prevent="exportProject(scope.row)"
type="warning" icon="el-icon-receiving"
type="warning" icon="icon-download"
size="small" circle plain>
</el-button>
<!--<el-button
......@@ -58,7 +63,7 @@
:current-page.sync="currentPage"
:page-size="pageSize"
layout="prev, pager, next, jumper"
:total="env.projectCount">
:total="projects.projectCount">
</el-pagination>
</div>
<create-project-dialog ref="createProjectDialog" @success="onCreateProject"/>
......@@ -83,6 +88,7 @@
appVersion: 'v1.0.0',
currentPage: 1,
pageSize: PAGE_SIZE,
onlyMine: true,
}
},
mounted() {
......@@ -95,6 +101,11 @@
'env',
]),
},
watch: {
onlyMine(){
this.handleCurrentChange(1);
}
},
methods: {
prepare() {
return Promise.all([
......@@ -157,12 +168,14 @@
lock: true,
text: this.$t('In processing'),
});
await this.fetchProjects({currentPage: page, pageSize: this.pageSize});
this.currentPage = page;
await this.fetchProjects({currentPage: page, pageSize: this.pageSize, onlyMine: this.onlyMine});
loading.close();
},
...mapActions([
'fetchProjects',
'fetchProject',
'fetchHistory',
'createProject',
'deleteProject',
'updateEnv',
......
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