Merge pull request #68 from zhaouv/v2.0-editor-20180304

editor前端上切换模式
2018-03-08 19:30:45 +08:00 · 2018-03-08 19:30:45 +08:00 · 6e1d4b61e8
commit 6e1d4b61e8
parent c57f3072bb e578fba8f0
6 changed files with 66 additions and 16 deletions
--- a/_server/css/editor_mode.css
+++ b/_server/css/editor_mode.css
@ -13,6 +13,13 @@
 .leftTab > :first-child{margin-top:5px;}
 .leftTab > :last-child{margin-bottom:5px;}

+.leftTab {
+  left: 5px;
+  top: 10px;
+  width: 435px;
+}
+
+/*
 #left1 {
  left: 5px;
  top: 650px;
@ -42,7 +49,7 @@
  top: 1290px;
  width: 440px;
 }
-
+ */
 #left6 {
  left: 5px;
  /* top: 1930px; */
@ -74,13 +81,13 @@
  height: 700px;
  width: 940px;
 }
-
+/* 
 #left8 {
  left: 900px;
  top: 1290px;
  width: 440px;
 }
-
+ */
 .etable table,
 .etable table td {
  color: #000;
--- a/_server/editor.js
+++ b/_server/editor.js
@ -363,7 +363,7 @@ editor.prototype.listen = function() {
    if(!selectBox.isSelected) {
      var loc = eToLoc(e);
      var pos = locToPos(loc);
-      editor_mode.onmode('');//为了强制触发doAction
+      editor_mode.onmode('nextChange');//为了强制触发doAction
      editor_mode.onmode('loc');
      editor_mode.loc();
      tip.whichShow = 1;
@ -521,7 +521,7 @@ editor.prototype.listen = function() {
          }
        }
        tip.infos = JSON.parse(JSON.stringify(editor.info));
-        editor_mode.onmode('');//为了强制触发doAction
+        editor_mode.onmode('nextChange');//为了强制触发doAction
        editor_mode.onmode('emenyitem');
        editor_mode.emenyitem();
      }
--- a/_server/editor_mode.js
+++ b/_server/editor_mode.js
@ -7,7 +7,10 @@ function editor_mode(){
    'emenyitem':'left3',
    'floor':'left4',
    'tower':'left5',
-    'functions':'left8'
+    'functions':'left8',
+
+    'map':'left',
+    'appendpic':'left1',
  }
  this._ids={}
  this.dom={}
@ -179,11 +182,20 @@ editor_mode.prototype.onmode = function (mode) {
  if (editor_mode.mode!=mode) {
    console.log('change mode into : '+mode);
    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.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.pos={x: 0, y: 0};
  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();
 }

--- a/_server/vm.js
+++ b/_server/vm.js
@ -1,7 +1,20 @@
 // vue 相关处理

 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.info = {};
 }
--- a/editor.html
+++ b/editor.html
@ -8,7 +8,7 @@
  </head>
 <body>
  <div class="main">
-    <div id="left">
+    <div id="left" style="z-index:-1;opacity: 0;"><!-- map -->
      <div id="arrEditor">
        <table class="col" id='arrColMark'></table>
        <table class="row" id='arrRowMark'></table>
@ -32,7 +32,7 @@
      </div>
      
    </div>
-    <div id="left1" class='leftTab'><div ><!-- appendpic -->
+    <div id="left1" class='leftTab' style="z-index:-1;opacity: 0;"><div ><!-- appendpic -->
      <h3>追加素材</h3>
      <p>
        <input id="selectFileBtn" type="button" value="导入文件到画板"/>
@ -52,7 +52,7 @@
        </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>
      <p id='pos_a6771a78_a099_417c_828f_0a24851ebfce'>0,0</p>
      <div class='etable'>
@ -63,7 +63,7 @@
        </table>
      </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>
      <div id='newIdIdnum'><!-- id and idnum -->
        <input placeholder="输入新id"/>
@ -79,7 +79,7 @@
        </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>
      <div class='etable'>
        <table>
@ -89,7 +89,7 @@
        </table>
      </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>
      <div class='etable'>
        <table>
@ -128,12 +128,12 @@
        <textarea id="codeArea" spellcheck="false"></textarea>
      </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.cancel()">cancel</button>
      <textarea id="multiLineCode" name="multiLineCode"></textarea>
    </div></div>
-    <div id="left8" class='leftTab'><div><!-- tower -->
+    <div id="left8" class='leftTab' style="z-index:-1;opacity: 0;"><div><!-- functions -->
      <h3>脚本编辑</h3>
      <div class='etable'>
        <table>
@ -170,7 +170,17 @@
        <input class='btn' id='clear' type="button" value="清除地图" v-on:click="clearMap"/>
        <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>
          <select v-model="selectedBg">
            <option disabled value="">请选择地板</option>
@ -183,6 +193,7 @@
              <input class='btn' type="button" value="确定" v-on:click="updatebg"/>
          </div>
        </div>
+        <!--  -->
      </div>
    </div>
    <div id="right">
@ -342,6 +353,7 @@ main.init('editor', function() {
    editor.mode.floor();
    editor.mode.tower();
    editor.mode.functions();
+    editor.mode.showMode('loc');
    editor.mode.listen();
    editor_multi=editor_multi();
    editor_blockly=editor_blockly();
--- a/启动服务.exe
+++ b/启动服务.exe