contextmenu delete function

README.md

@@ -9,7 +9,7 @@ Web-based visual editor for generating atx testcase.
 ## Installation
 using pip:
 ```
-$ pip install atx-webide
+$ pip install -U atx-webide
 ```
 
 or clone this repository and run:
@@ -38,14 +38,9 @@ It will start the server and open the web browser. Just do as follows:
 Have Fun!
 
 ## Todo
-- [x] track history screens.
-- [x] select device from web
-- [x] add atx_start_app & atx_stop_app
-- [x] add resize handle, fix #1
-- [x] step runner
 - [ ] control device from web
 - [ ] auto update screen image (dynamic interval)
-- [ ] add ext scripts
+- [ ] canvas size fit
 
 ## Refs
 1. [ATX (AutomatorX)](https://github.com/codeskyblue/AutomatorX)

atxweb/server.py

@@ -87,6 +87,16 @@ def get(self):
             'baseURL': self.request.protocol + '://' + self.request.host+'/static_imgs/'
         })
 
+    def delete(self):
+        imgpath = self.get_argument('imgpath')
+        imgpath = os.path.abspath(os.path.join('.', imgpath))
+        try:
+            os.remove(imgpath)
+            print 'deleted', imgpath
+        except (IOError, WindowsError):
+            self.set_status(404)
+            self.write('Image (%s) Not Found' % imgpath)
+            self.finish()
 
 class MainHandler(tornado.web.RequestHandler):
     def get(self):

atxweb/static/index.html

@@ -66,15 +66,15 @@
               </div>
               <div @click="hideContextMenu" @contextmenu="hideContextMenu" style="position:absolute; background-color:white; top:0px;right:0px;bottom:0px;display:block;width:30%;min-width:100px;z-index:2; padding:2px;">
                 <ul class="clearfix">
-                  <li v-for="img in images" v-if="manual.usedimages[img.name]" @contextmenu.prevent.stop="showContextMenu($event, img.name)" style="float:left;margin-right:5px;">
+                  <li v-for="img in images" v-if="manual.usedimages[img.name]" @contextmenu.prevent.stop="showContextMenu($event, img)" style="float:left;margin-right:5px;">
                     <div v-bind:style="{'background-color': img.name == manual.row_image ? 'red' :'transparent'}" style="text-align:center">
                       <img src="${img.path}" style="height:50px"><p>${img.name | imagename}</p>
                     </div>
                   </li>
                 </ul>
                 <hr/>
                 <ul class="clearfix">
-                  <li v-for="img in images" v-if="!manual.usedimages[img.name]" @contextmenu.prevent.stop="showContextMenu($event, img.name)" style="float:left;margin-right:5px;">
+                  <li v-for="img in images" v-if="!manual.usedimages[img.name]" @contextmenu.prevent.stop="showContextMenu($event, img)" style="float:left;margin-right:5px;">
                     <div v-bind:style="{'background-color': img.name == manual.row_image ? 'red' :'transparent'}" style="text-align:center">
                       <img src="${img.path}" style="height:50px"><p>${img.name | imagename}</p>
                     </div>

atxweb/static/js/index.js

@@ -527,14 +527,47 @@ var vm = new Vue({
     },
     onMenuDelete: function() {
       if (!this.manual.contextmenu.img) {return;}
-      notify('还没实现:(', 'warn');
+      var name = this.manual.contextmenu.img.name;
+      if (this.manual.usedimages[name]) {
+        notify('图片已被使用，无法删除！');
+        this.manual.contextmenu.img = null;
+        return;
+      }
+      var prefix = window.blocklyBaseURL.length;
+      var imgpath = this.manual.contextmenu.img.path.substr(prefix);
+      var idx = this.images.indexOf(this.manual.contextmenu.img);
+      // locate idx in blocklyImageList
+      for (var i = 0, info, blkidx=-1; i < window.blocklyImageList.length; i++) {
+        info = window.blocklyImageList[i];
+        if (info[1] == imgpath) {
+          blkidx = i;
+          break
+        }
+      }
+      var self = this;
+      $.ajax({
+        url: '/api/images',
+        method: 'DELETE',
+        data: {'imgpath': imgpath},
+        success: function(data){
+          self.images.splice(idx, 1);
+          if (blkidx != -1) {
+            window.blocklyImageList.splice(blkidx, 1);
+          }
+          notify('删除成功', 'success');
+        },
+        error: function(e){
+          console.log('删除失败:\n', e);
+          notify(e.responseText || '删除失败，请检查服务器连接是否正常', 'warn');
+        },
+      });
       this.manual.contextmenu.img = null;
     },
     onMenuInsertClickImage: function(){
       if (!this.manual.contextmenu.img) {return;}
       var cursor = pymaneditor.getCursorPosition();
       var line = pymaneditor.session.getLine(cursor.row);
-      var script = 'd.click_image(u"'+ this.manual.contextmenu.img +'")\n';
+      var script = 'd.click_image(u"'+ this.manual.contextmenu.img.name +'")\n';
       if (line !== '') {
         cursor = {row: cursor.row+1, column:0};
       }
@@ -547,10 +580,11 @@ var vm = new Vue({
       var row = this.manual.cursor.row;
       var text = pymaneditor.session.getLine(row);
       var regexp = /[^"]+\.png(?="|')/;
-      text = text.replace(regexp, this.manual.contextmenu.img);
+      var name = this.manual.contextmenu.img.name;
+      text = text.replace(regexp, name);
       pymaneditor.session.doc.insertFullLines(row+1, [text]);
       pymaneditor.session.doc.removeFullLines(row, row);
-      this.manual.row_image = this.manual.contextmenu.img;
+      this.manual.row_image = name;
       this.manual.contextmenu.img = null;
     }
   },