jianghe2nd/mota-js
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

editor前端上切换模式

Browse Source
This commit is contained in:
YouWei Zhao 2018-03-08 19:00:20 +08:00
parent 05982bfaf4
commit a695dcd6cf
5 changed files with 66 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
_server/css/editor_mode.css
View File

@ -13,6 +13,13 @@
.leftTab > :first-child{margin-top:5px;} .leftTab > :first-child{margin-top:5px;}
.leftTab > :last-child{margin-bottom:5px;} .leftTab > :last-child{margin-bottom:5px;}
.leftTab {
left: 5px;
top: 10px;
width: 435px;
}
/*
#left1 { #left1 {
left: 5px; left: 5px;
top: 650px; top: 650px;
@ -42,7 +49,7 @@
top: 1290px; top: 1290px;
width: 440px; width: 440px;
} }
*/
#left6 { #left6 {
left: 5px; left: 5px;
/* top: 1930px; */ /* top: 1930px; */
@ -74,13 +81,13 @@
height: 700px; height: 700px;
width: 940px; width: 940px;
} }
/*
#left8 { #left8 {
left: 900px; left: 900px;
top: 1290px; top: 1290px;
width: 440px; width: 440px;
} }
*/
.etable table, .etable table,
.etable table td { .etable table td {
color: #000; color: #000;

4
_server/editor.js
View File

@ -363,7 +363,7 @@ editor.prototype.listen = function() {
if(!selectBox.isSelected) { if(!selectBox.isSelected) {
var loc = eToLoc(e); var loc = eToLoc(e);
var pos = locToPos(loc); var pos = locToPos(loc);
editor_mode.onmode('');//为了强制触发doAction editor_mode.onmode('nextChange');//为了强制触发doAction
editor_mode.onmode('loc'); editor_mode.onmode('loc');
editor_mode.loc(); editor_mode.loc();
tip.whichShow = 1; tip.whichShow = 1;
@ -521,7 +521,7 @@ editor.prototype.listen = function() {
} }
} }
tip.infos = JSON.parse(JSON.stringify(editor.info)); tip.infos = JSON.parse(JSON.stringify(editor.info));
editor_mode.onmode('');//为了强制触发doAction editor_mode.onmode('nextChange');//为了强制触发doAction
editor_mode.onmode('emenyitem'); editor_mode.onmode('emenyitem');
editor_mode.emenyitem(); editor_mode.emenyitem();
} }

20
_server/editor_mode.js
View File

@ -7,7 +7,10 @@ function editor_mode(){
'emenyitem':'left3', 'emenyitem':'left3',
'floor':'left4', 'floor':'left4',
'tower':'left5', 'tower':'left5',
'functions':'left8' 'functions':'left8',
'map':'left',
'appendpic':'left1',
} }
this._ids={} this._ids={}
this.dom={} this.dom={}
@ -179,11 +182,20 @@ editor_mode.prototype.onmode = function (mode) {
if (editor_mode.mode!=mode) { if (editor_mode.mode!=mode) {
console.log('change mode into : '+mode); console.log('change mode into : '+mode);
editor_mode.doActionList(editor_mode.mode,editor_mode.actionList); editor_mode.doActionList(editor_mode.mode,editor_mode.actionList);
if(editor_mode.mode==='nextChange' && mode)editor_mode.showMode(mode);
editor_mode.mode=mode; editor_mode.mode=mode;
editor_mode.actionList=[]; editor_mode.actionList=[];
} }
} }
editor_mode.prototype.showMode = function (mode) {
for(var name in this.dom){
editor_mode.dom[name].style='z-index:-1;opacity: 0;';
}
editor_mode.dom[mode].style='';
document.getElementById('editModeSelect').value=mode;
}
editor_mode.prototype.loc = function(callback){ editor_mode.prototype.loc = function(callback){
//editor.pos={x: 0, y: 0}; //editor.pos={x: 0, y: 0};
if (!core.isset(editor.pos))return; if (!core.isset(editor.pos))return;
@ -448,6 +460,12 @@ editor_mode.prototype.listen = function(callback){
}); });
} }
var editModeSelect = document.getElementById('editModeSelect');
editModeSelect.onchange = function(){
editor_mode.onmode('nextChange');
editor_mode.onmode(editModeSelect.value);
}
if (Boolean(callback))callback(); if (Boolean(callback))callback();
} }

15
_server/vm.js
View File

@ -1,7 +1,20 @@
// vue 相关处理 // vue 相关处理
document.body.onmousedown = function(e){ document.body.onmousedown = function(e){
selectBox.isSelected = false; console.log(e);
var eid=[];
e.path.forEach(function(node){
if(!node.getAttribute)return;
var id_ = node.getAttribute('id');
if (id_){
if(['left','left1','left2','left3','left4','left5','left8'].indexOf(id_)!==-1)eid.push('edit');
eid.push(id_);
}
});
console.log(eid);
if(eid.indexOf('edit')===-1){
if(eid.indexOf('tip')===-1)selectBox.isSelected = false;
}
editor_mode.onmode(''); editor_mode.onmode('');
editor.info = {}; editor.info = {};
} }

30
editor.html
View File

@ -8,7 +8,7 @@
</head> </head>
<body> <body>
<div class="main"> <div class="main">
<div id="left"> <div id="left" style="z-index:-1;opacity: 0;"><!-- map -->
<div id="arrEditor"> <div id="arrEditor">
<table class="col" id='arrColMark'></table> <table class="col" id='arrColMark'></table>
<table class="row" id='arrRowMark'></table> <table class="row" id='arrRowMark'></table>
@ -32,7 +32,7 @@
</div> </div>
</div> </div>
<div id="left1" class='leftTab'><div ><!-- appendpic --> <div id="left1" class='leftTab' style="z-index:-1;opacity: 0;"><div ><!-- appendpic -->
<h3>追加素材</h3> <h3>追加素材</h3>
<p> <p>
<input id="selectFileBtn" type="button" value="导入文件到画板"/> <input id="selectFileBtn" type="button" value="导入文件到画板"/>
@ -52,7 +52,7 @@
</div> </div>
</div> </div>
</div></div> </div></div>
<div id="left2" class='leftTab'><div><!-- loc --> <div id="left2" class='leftTab' style="z-index:-1;opacity: 0;"><div><!-- loc -->
<h3>地图选点</h3> <h3>地图选点</h3>
<p id='pos_a6771a78_a099_417c_828f_0a24851ebfce'>0,0</p> <p id='pos_a6771a78_a099_417c_828f_0a24851ebfce'>0,0</p>
<div class='etable'> <div class='etable'>
@ -63,7 +63,7 @@
</table> </table>
</div> </div>
</div></div> </div></div>
<div id="left3" class='leftTab'><div><!-- emenyitem --> <div id="left3" class='leftTab' style="z-index:-1;opacity: 0;"><div><!-- emenyitem -->
<h3>图块属性</h3> <h3>图块属性</h3>
<div id='newIdIdnum'><!-- id and idnum --> <div id='newIdIdnum'><!-- id and idnum -->
<input placeholder="输入新id"/> <input placeholder="输入新id"/>
@ -79,7 +79,7 @@
</div> </div>
</div> </div>
</div></div> </div></div>
<div id="left4" class='leftTab'><div><!-- floor --> <div id="left4" class='leftTab' style="z-index:-1;opacity: 0;"><div><!-- floor -->
<h3>楼层属性</h3> <h3>楼层属性</h3>
<div class='etable'> <div class='etable'>
<table> <table>
@ -89,7 +89,7 @@
</table> </table>
</div> </div>
</div></div> </div></div>
<div id="left5" class='leftTab'><div><!-- tower --> <div id="left5" class='leftTab' style="z-index:-1;opacity: 0;"><div><!-- tower -->
<h3>全塔属性</h3> <h3>全塔属性</h3>
<div class='etable'> <div class='etable'>
<table> <table>
@ -128,12 +128,12 @@
<textarea id="codeArea" spellcheck="false"></textarea> <textarea id="codeArea" spellcheck="false"></textarea>
</div> </div>
</div></div> </div></div>
<div id="left7" style="z-index:-1;opacity: 0;"><div> <div id="left7" style="z-index:-1;opacity: 0;"><div><!-- 多行文本编辑器 -->
<button onclick="editor_multi.confirm()">confirm</button> <button onclick="editor_multi.confirm()">confirm</button>
<button onclick="editor_multi.cancel()">cancel</button> <button onclick="editor_multi.cancel()">cancel</button>
<textarea id="multiLineCode" name="multiLineCode"></textarea> <textarea id="multiLineCode" name="multiLineCode"></textarea>
</div></div> </div></div>
<div id="left8" class='leftTab'><div><!-- tower --> <div id="left8" class='leftTab' style="z-index:-1;opacity: 0;"><div><!-- functions -->
<h3>脚本编辑</h3> <h3>脚本编辑</h3>
<div class='etable'> <div class='etable'>
<table> <table>
@ -170,7 +170,17 @@
<input class='btn' id='clear' type="button" value="清除地图" v-on:click="clearMap"/> <input class='btn' id='clear' type="button" value="清除地图" v-on:click="clearMap"/>
<input class='btn' type="button" value="导出地图" id="exportM" v-on:click="exportMap"/> <input class='btn' type="button" value="导出地图" id="exportM" v-on:click="exportMap"/>
<div id="bgSelect" v-cloak> <select id="editModeSelect">
<option value="loc">地图选点</option>
<option value="emenyitem">图块属性</option>
<option value="floor">楼层属性</option>
<option value="tower">全塔属性</option>
<option value="functions">脚本编辑</option>
<option value="map">地图编辑</option>
<option value="appendpic">追加素材</option>
</select>
<!-- -->
<div id="bgSelect" v-cloak style="display:none">
<span>当前地板: </span> <span>当前地板: </span>
<select v-model="selectedBg"> <select v-model="selectedBg">
<option disabled value="">请选择地板</option> <option disabled value="">请选择地板</option>
@ -183,6 +193,7 @@
<input class='btn' type="button" value="确定" v-on:click="updatebg"/> <input class='btn' type="button" value="确定" v-on:click="updatebg"/>
</div> </div>
</div> </div>
<!-- -->
</div> </div>
</div> </div>
<div id="right"> <div id="right">
@ -342,6 +353,7 @@ main.init('editor', function() {
editor.mode.floor(); editor.mode.floor();
editor.mode.tower(); editor.mode.tower();
editor.mode.functions(); editor.mode.functions();
editor.mode.showMode('loc');
editor.mode.listen(); editor.mode.listen();
editor_multi=editor_multi(); editor_multi=editor_multi();
editor_blockly=editor_blockly(); editor_blockly=editor_blockly();