Skip to content

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

--

parent 9871db96
Hide whitespace changes
Inline Side-by-side
Showing with 599 additions and 4 deletions
.history/src/views/Editor/dialogs/BehaviorEditorDialog_20191203201330.vue 0 → 100644
View file @ 79d92895
<template>
<el-dialog :title="$t('Behavior Editor')" :visible.sync="visible" :before-close="beforeClose" @opened="onOpened"
:fullscreen="true" :close-on-click-modal="false" :close-on-press-escape="false"
:append-to-body="true" custom-class="behavior-editor-dialog">
<behavior-editor v-if="editorReady" ref="behaviorEditor" class="full-size"></behavior-editor>
<div slot="footer" class="dialog-footer">
<el-button size="mini" type="primary" @click="onSave(false)">{{$t('Save')}}</el-button>
<el-button size="mini" type="primary" @click="onSave(true)">{{$t('Save And Preview')}}</el-button>
</div>
</el-dialog>
</template>
<script>
import {mapState, mapMutations} from 'vuex'
import BehaviorEditor from "../behavior-editor/BehaviorEditor";
import events from "@/global-events.js"
export default {
name: "BehaviorEditorDialog",
components: {BehaviorEditor},
data() {
return {
visible: false,
editorReady: false,
}
},
computed: {
...mapState({
data: state => state.project.data,
}),
},
created(){
events.$on('behaviorSave',(isPreview)=>{
this.onSave(isPreview)
});
},
methods: {
show(behaviors, event) {
this.behavior_startEdit({
originData: this.data,
behaviors,
event,
});
this.editorReady = false;
this.visible = true;
},
onSave(isPreview) {
this.behavior_save();
this.$emit('change',isPreview);
},
beforeClose(done) {
this.$confirm(this.$t('Save this behavior before'), this.$t('Alert'), {
showClose: false,
closeOnClickModal: false,
closeOnPressEscape: false,
confirmButtonText: this.$t('Confirm'),
cancelButtonText: this.$t('Still Close'),
type: 'warning'
}).then(() => {
this.onSave();
done();
}).catch((e) => {
this.$emit('cancel');
done();
});
},
onOpened() {
this.editorReady = true;
this.$nextTick(() => {
this.$refs.behaviorEditor.edit();
});
},
...mapMutations([
'behavior_startEdit',
'behavior_save',
'behavior_cancel',
]),
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
.history/src/views/Editor_20191203201400.vue 0 → 100644
View file @ 79d92895
<template>
<div class="editor" v-if="ready">
<tool-bar @click-menu="clickMenu"/>
<split-panes class="pane-container" @resized="onPanesReSized(0, $event)">
<split-panes splitpanes-min="40" :splitpanes-size="getSize(0, 0)" horizontal @resized="onPanesReSized(1, $event)">
<split-panes splitpanes-min="20" :splitpanes-size="getSize(1, 0)" @resized="onPanesReSized(2, $event)">
<views splitpanes-min="20" :splitpanes-size="getSize(2, 0)"></views>
<playground splitpanes-min="20" :splitpanes-size="getSize(2, 1)"></playground>
</split-panes>
<assets splitpanes-min="20" :splitpanes-size="getSize(1, 1)"></assets>
</split-panes>
<inspector splitpanes-min="20" :splitpanes-size="getSize(0, 1)"></inspector>
</split-panes>
<details-dialog ref="dialogsDialog"/>
<pack-result-dialog ref="packResultDialog"/>
</div>
</template>
<script>
import {mapGetters, mapActions} from 'vuex'
import SplitPanes from 'splitpanes'
import ToolBar from "./Editor/ToolBar";
import Inspector from "./Editor/Inspector";
import Views from "./Editor/Views";
import Playground from "./Editor/Playground";
import Assets from "./Editor/Assets";
import DetailsDialog from "./Editor/dialogs/DetailsDialog";
import {openPreview, playWaiting} from "../utils";
import i18n from "../i18n";
import PackResultDialog from "./Editor/dialogs/PackResultDialog";
import events from "@/global-events.js"
export default {
name: 'Editor',
components: {
PackResultDialog,
DetailsDialog,
Assets,
Playground,
Views,
Inspector,
ToolBar,
SplitPanes,
},
data() {
const panesConfig = localStorage.panesConfig ? JSON.parse(localStorage.panesConfig) : [0.8, 0.8, 0.3];
return {
panesConfig,
ready: false,
}
},
watch: {
$route: {
handler: function (val, oldVal) {
console.log('router changed');
this.loadProject();
},
deep: true
}
},
computed: {
...mapGetters([]),
},
async mounted() {
document.addEventListener('keydown', this.onKeyPress);
await playWaiting(this.prepare(), this.$t('Preparing')).catch(e => {
});
this.loadProject();
},
destroyed() {
document.removeEventListener('keydown', this.onKeyPress)
},
created(){
events.$on('saveAndPreview',()=>{
this.clickMenu("preview");
});
},
methods: {
prepare() {
return Promise.all([
this.updateEnv(),
])
},
onKeyPress(e) {
if (e.key === 's' && (e.ctrlKey || e.metaKey)) {
e.preventDefault();
this.saveProject(this.clickMenu("preview"));
return false;
}
},
async loadProject() {
const {projectID} = this.$route.params;
if (await this.localVersionExist(projectID)) {
this.$confirm(this.$t('Unsaved version found locally'), this.$t('Alert'), {
showClose: false,
closeOnClickModal: false,
closeOnPressEscape: false,
confirmButtonText: this.$t('Local Version'),
cancelButtonText: this.$t('Remote Version'),
type: 'warning'
}).then(() => {
this.loadLocalVersion(projectID);
}).catch((e) => {
if (e === 'cancel') {
this.loadRemoteVersion(projectID);
} else {
console.log(e);
}
});
} else {
this.loadRemoteVersion(projectID);
}
},
loadLocalVersion(projectID) {
this.ready = false;
this.loadFromLocal(projectID);
this.$nextTick(() => {
this.ready = true;
});
},
async loadRemoteVersion(projectID) {
if (projectID) {
this.ready = false;
await playWaiting(this.loadFromRemote(projectID), this.$t('Preparing')).catch(e => {
this.$alert(this.$t('Project does not exist'), this.$t('Alert'), {
confirmButtonText: this.$t('Confirm'),
callback: action => {
this.$router.replace({name: 'home'});
}
});
});
this.ready = true;
} else {
this.$router.push({name: 'home'})
}
},
getSize(id, side) {
let ratio = this.panesConfig[id];
return (side === 0 ? ratio : 1 - ratio) * 100
},
onPanesReSized(id, configs) {
this.panesConfig[id] = configs[0].width / 100;
localStorage.panesConfig = JSON.stringify(this.panesConfig);
},
async saveProject(closeLoading) {
await playWaiting(this.saveToRemote(), this.$t('Saving'), closeLoading);
this.$message({
message: i18n.t('Save project successfully'), //因为message是异步出现，但是当路由回退的时候，this.i18n的实例已经置空，所以要用全局的i18n实例
type: 'success'
});
},
async clickMenu(menuItem) {
switch (menuItem) {
case 'save':
try {
this.saveProject();
} catch (e) {
}
break;
case 'details':
this.$refs.dialogsDialog.show();
break;
case 'preview':
await this.pack(true);
break;
case 'pack':
await this.pack();
break;
case 'undo':
this.$store.commit('undoRedo', 1);
break;
case 'redo':
this.$store.commit('undoRedo', -1);
break;
case 'exit':
const {projectID} = this.$route.params;
if (await this.localVersionExist(projectID)) {
this.$confirm(this.$t('Unsaved Alert'), this.$t('Alert'), {
confirmButtonText: this.$t('Save'),
cancelButtonText: this.$t('Exit'),
type: 'warning'
}).then(() => {
try {
this.saveProject();
this.backToHome();
} catch (e) {
}
}).catch((e) => {
this.backToHome();
});
} else {
this.backToHome();
}
break;
}
},
async pack(debug = false) {
const loading = this.$loading({
lock: true,
text: this.$t('Packing'),
});
try {
await this.saveProject(false);
const packResult = await this.packProject(debug);
this.$message({
message: this.$t('Pack project successfully'),
type: 'success',
duration: 500,
});
if (debug) {
openPreview(packResult);
} else {
this.$refs.packResultDialog.show(packResult);
}
/*this.$confirm(this.$t('Pack project successfully'), this.$t('Alert'), {
confirmButtonText: this.$t('Open in new tab'),
cancelButtonText: this.$t('Close'),
type: 'warning'
}).then(() => {
setTimeout(()=>{
window.open(tplUrl, 'blank');
}, 500);
}).catch(() => {
});*/
} catch (e) {
this.$message({
message: this.$t('Pack project failed'),
type: 'error',
duration: 1000,
});
}
loading.close();
},
backToHome() {
this.$router.replace({name: 'home'});
},
...mapActions([
'localVersionExist',
'loadFromLocal',
'loadFromRemote',
"saveToLocal",
"saveToRemote",
'updateEnv',
'packProject',
])
}
}
</script>
<style lang="scss">
</style>
\ No newline at end of file
.history/src/views/Editor_20191203201436.vue 0 → 100644
View file @ 79d92895
<template>
<div class="editor" v-if="ready">
<tool-bar @click-menu="clickMenu"/>
<split-panes class="pane-container" @resized="onPanesReSized(0, $event)">
<split-panes splitpanes-min="40" :splitpanes-size="getSize(0, 0)" horizontal @resized="onPanesReSized(1, $event)">
<split-panes splitpanes-min="20" :splitpanes-size="getSize(1, 0)" @resized="onPanesReSized(2, $event)">
<views splitpanes-min="20" :splitpanes-size="getSize(2, 0)"></views>
<playground splitpanes-min="20" :splitpanes-size="getSize(2, 1)"></playground>
</split-panes>
<assets splitpanes-min="20" :splitpanes-size="getSize(1, 1)"></assets>
</split-panes>
<inspector splitpanes-min="20" :splitpanes-size="getSize(0, 1)"></inspector>
</split-panes>
<details-dialog ref="dialogsDialog"/>
<pack-result-dialog ref="packResultDialog"/>
</div>
</template>
<script>
import {mapGetters, mapActions} from 'vuex'
import SplitPanes from 'splitpanes'
import ToolBar from "./Editor/ToolBar";
import Inspector from "./Editor/Inspector";
import Views from "./Editor/Views";
import Playground from "./Editor/Playground";
import Assets from "./Editor/Assets";
import DetailsDialog from "./Editor/dialogs/DetailsDialog";
import {openPreview, playWaiting} from "../utils";
import i18n from "../i18n";
import PackResultDialog from "./Editor/dialogs/PackResultDialog";
import events from "@/global-events.js"
export default {
name: 'Editor',
components: {
PackResultDialog,
DetailsDialog,
Assets,
Playground,
Views,
Inspector,
ToolBar,
SplitPanes,
},
data() {
const panesConfig = localStorage.panesConfig ? JSON.parse(localStorage.panesConfig) : [0.8, 0.8, 0.3];
return {
panesConfig,
ready: false,
}
},
watch: {
$route: {
handler: function (val, oldVal) {
console.log('router changed');
this.loadProject();
},
deep: true
}
},
computed: {
...mapGetters([]),
},
async mounted() {
document.addEventListener('keydown', this.onKeyPress);
await playWaiting(this.prepare(), this.$t('Preparing')).catch(e => {
});
this.loadProject();
},
destroyed() {
document.removeEventListener('keydown', this.onKeyPress)
},
created(){
events.$on('saveAndPreview',()=>{
this.clickMenu("preview");
});
},
methods: {
prepare() {
return Promise.all([
this.updateEnv(),
])
},
onKeyPress(e) {
if (e.key === 's' && (e.ctrlKey || e.metaKey)) {
e.preventDefault();
this.clickMenu("preview");
return false;
}
},
async loadProject() {
const {projectID} = this.$route.params;
if (await this.localVersionExist(projectID)) {
this.$confirm(this.$t('Unsaved version found locally'), this.$t('Alert'), {
showClose: false,
closeOnClickModal: false,
closeOnPressEscape: false,
confirmButtonText: this.$t('Local Version'),
cancelButtonText: this.$t('Remote Version'),
type: 'warning'
}).then(() => {
this.loadLocalVersion(projectID);
}).catch((e) => {
if (e === 'cancel') {
this.loadRemoteVersion(projectID);
} else {
console.log(e);
}
});
} else {
this.loadRemoteVersion(projectID);
}
},
loadLocalVersion(projectID) {
this.ready = false;
this.loadFromLocal(projectID);
this.$nextTick(() => {
this.ready = true;
});
},
async loadRemoteVersion(projectID) {
if (projectID) {
this.ready = false;
await playWaiting(this.loadFromRemote(projectID), this.$t('Preparing')).catch(e => {
this.$alert(this.$t('Project does not exist'), this.$t('Alert'), {
confirmButtonText: this.$t('Confirm'),
callback: action => {
this.$router.replace({name: 'home'});
}
});
});
this.ready = true;
} else {
this.$router.push({name: 'home'})
}
},
getSize(id, side) {
let ratio = this.panesConfig[id];
return (side === 0 ? ratio : 1 - ratio) * 100
},
onPanesReSized(id, configs) {
this.panesConfig[id] = configs[0].width / 100;
localStorage.panesConfig = JSON.stringify(this.panesConfig);
},
async saveProject(closeLoading) {
await playWaiting(this.saveToRemote(), this.$t('Saving'), closeLoading);
this.$message({
message: i18n.t('Save project successfully'), //因为message是异步出现，但是当路由回退的时候，this.i18n的实例已经置空，所以要用全局的i18n实例
type: 'success'
});
},
async clickMenu(menuItem) {
switch (menuItem) {
case 'save':
try {
this.saveProject();
} catch (e) {
}
break;
case 'details':
this.$refs.dialogsDialog.show();
break;
case 'preview':
await this.pack(true);
break;
case 'pack':
await this.pack();
break;
case 'undo':
this.$store.commit('undoRedo', 1);
break;
case 'redo':
this.$store.commit('undoRedo', -1);
break;
case 'exit':
const {projectID} = this.$route.params;
if (await this.localVersionExist(projectID)) {
this.$confirm(this.$t('Unsaved Alert'), this.$t('Alert'), {
confirmButtonText: this.$t('Save'),
cancelButtonText: this.$t('Exit'),
type: 'warning'
}).then(() => {
try {
this.saveProject();
this.backToHome();
} catch (e) {
}
}).catch((e) => {
this.backToHome();
});
} else {
this.backToHome();
}
break;
}
},
async pack(debug = false) {
const loading = this.$loading({
lock: true,
text: this.$t('Packing'),
});
try {
await this.saveProject(false);
const packResult = await this.packProject(debug);
this.$message({
message: this.$t('Pack project successfully'),
type: 'success',
duration: 500,
});
if (debug) {
openPreview(packResult);
} else {
this.$refs.packResultDialog.show(packResult);
}
/*this.$confirm(this.$t('Pack project successfully'), this.$t('Alert'), {
confirmButtonText: this.$t('Open in new tab'),
cancelButtonText: this.$t('Close'),
type: 'warning'
}).then(() => {
setTimeout(()=>{
window.open(tplUrl, 'blank');
}, 500);
}).catch(() => {
});*/
} catch (e) {
this.$message({
message: this.$t('Pack project failed'),
type: 'error',
duration: 1000,
});
}
loading.close();
},
backToHome() {
this.$router.replace({name: 'home'});
},
...mapActions([
'localVersionExist',
'loadFromLocal',
'loadFromRemote',
"saveToLocal",
"saveToRemote",
'updateEnv',
'packProject',
])
}
}
</script>
<style lang="scss">
</style>
\ No newline at end of file
src/views/Editor.vue
View file @ 79d92895
......@@ -74,7 +74,7 @@
},
created(){
events.$on('saveAndPreview',()=>{
this.saveProject(this.clickMenu("preview"));
this.clickMenu("preview");
});
},
......@@ -87,7 +87,7 @@
onKeyPress(e) {
if (e.key === 's' && (e.ctrlKey || e.metaKey)) {
e.preventDefault();
this.saveProject(this.clickMenu("preview"));
this.clickMenu("preview");
return false;
}
},
......
src/views/Editor/dialogs/BehaviorEditorDialog.vue
View file @ 79d92895
......@@ -49,8 +49,6 @@
onSave(isPreview) {
this.behavior_save();
this.$emit('change',isPreview);
//this.visible=false;
//events.$emit('saveAndPreview')
},
beforeClose(done) {
this.$confirm(this.$t('Save this behavior before'), this.$t('Alert'), {
......
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