add

src/css/style.css

@@ -52,6 +52,7 @@
   z-index: 1;
   transform: translate3d(0px, 0px, 0px) rotateZ(0deg);
   opacity: 1;
+  user-select: none;
 }
 .outer-box div{
   box-sizing: border-box;
@@ -71,6 +72,7 @@
   -webkit-writing-mode: horizontal-tb;
   writing-mode: horizontal-tb;
   min-height: 50px;
+  outline: none;
 }
 .eqc-select {
   z-index: 103;

src/js/box/boxContent.js

@@ -51,48 +51,85 @@ boxContent.prototype.renderBoxDom = function() {
   circleDom.append(this.boxTpl);
   this.vdom.append(editorDom);
   this.vdom.append(circleDom);
+
   this.bindDragEvent(this.vdom);
+  //这个是双击事件
   this.bindEditorEvent(this.vdom);
-  //以下是各个方向的拖拽
+  //以下是各个方向的
   this.bindMoveSEvent(this.vdom);
+  this.bindMoveEEvent();
+  this.bindMoveNEvent(this.vdom);
+  this.bindMoveWEvent(this.vdom);
+
+  //东南西北的朝向
+  this.bindMoveNWEvent(this.vdom);
+  this.bindMoveSWEvent(this.vdom);
+  this.bindMoveSEEvent(this.vdom);
 };
 
 //拖动属性
 boxContent.prototype.bindDragEvent = function (el) {
   let _this = this;
   el.on('mousedown' , function(e) {
+    console.log(123);
     let $this = $(this);
     _this.ox = e.pageX;//原始x位置
     _this.oy = e.pageY;
     _this.top = parseInt($this.css('top').replace('px', ''));
     _this.left = parseInt($this.css('left').replace('px', ''));
     _this.drag = true;
+    el.on('mousemove', function (e) {
+      if(_this.drag){
+        let x = e.pageX - _this.ox;
+        let y = e.pageY - _this.oy;
+        $(this).css({
+          left: _this.left + x,
+          top: _this.top + y,
+          opacity: .5
+        });
+      }
+    }).on('mouseup',function(e){
+      _this.drag = false;
+      $(this).css('opacity',1);
+    });
   });
-  el.on('mousemove', function (e) {
-    if(_this.drag){
-      let x = e.pageX - _this.ox;
-      let y = e.pageY - _this.oy;
-      $(this).css({
-        left: _this.left + x,
-        top: _this.top + y,
-        opacity: .5
+
+};
+
+// 朝东方向
+boxContent.prototype.bindMoveEEvent = function () {
+  let _this = this;
+  this.vdom.on('mousedown','.line-e', function(e){
+    e.stopPropagation();
+    _this.ox = e.pageX;//原始x位置
+    _this.width = _this.vdom.width();
+    _this.emove = true;
+    $(document).on('mousemove', function(e){
+      if(_this.emove){
+        let x = (e.pageX - parseInt(_this.ox));
+        _this.vdom.css({
+          width: parseInt(_this.width) + x,
+        }).find('.editable-text').css({
+          width: parseInt(_this.width) + x
+        })
+      }
+    })
+      .on('mouseup', function(){
+        _this.emove = false;
+        $(document).off('mousemove');
       });
-    }
-  }).on('mouseup',function(e){
-    _this.drag = false;
-    $(this).css('opacity',1);
   });
-
 };
 
 //朝南方向拖拽
 boxContent.prototype.bindMoveSEvent = function(el) {
   let _this = this;
-  el.on('mousedown','.line-s, .line-s .circle', function(e){
+  el.on('mousedown','.line-s', function(e){
+    e.stopPropagation();
     _this.oy = e.pageY;//原始x位置
     _this.height = el.height();
     _this.smove = true;
-    el.on('mousemove','.line-s, .line-s .circle', function(e){
+    $(document).on('mousemove', function(e){
       if(_this.smove){
         let y = (e.pageY - parseInt(_this.oy));
         _this.vdom.css({
@@ -104,7 +141,7 @@ boxContent.prototype.bindMoveSEvent = function(el) {
     })
       .on('mouseup', function(){
       _this.smove = false;
-      $(this).off('mousemove');
+      $(document).off('mousemove');
     });
   });
 };
@@ -112,12 +149,14 @@ boxContent.prototype.bindMoveSEvent = function(el) {
 //朝北方向
 boxContent.prototype.bindMoveNEvent = function(el) {
   let _this = this;
-  el.on('mousedown','.line-n, .line-n .circle', function(e){
+  el.on('mousedown','.line-n', function(e){
+    e.stopPropagation();
+    console.log(123);
     _this.oy = e.pageY;//原始x位置
     _this.height = el.height();
     _this.top = parseInt(_this.vdom.css('top').replace('px', ''));
     _this.nmove = true;
-    el.on('mousemove','.line-n, .line-n .circle', function(e){
+    $(document).on('mousemove', function(e){
       if(_this.nmove){
         let y = (e.pageY - parseInt(_this.oy));
         _this.vdom.css({
@@ -130,7 +169,7 @@ boxContent.prototype.bindMoveNEvent = function(el) {
     })
       .on('mouseup', function(){
         _this.nmove = false;
-        $(this).off('mousemove');
+        $(document).off('mousemove');
       });
   });
 };
@@ -138,12 +177,13 @@ boxContent.prototype.bindMoveNEvent = function(el) {
 //朝西方向
 boxContent.prototype.bindMoveWEvent = function(el) {
   let _this = this;
-  el.on('mousedown','.line-w, .line-w .circle', function(e){
-    _this.oy = e.pageX;//原始x位置
+  el.on('mousedown','.line-w', function(e){
+    e.stopPropagation();
+    _this.ox = e.pageX;//原始x位置
     _this.width = el.width();
     _this.wmove = true;
     _this.left = parseInt(_this.vdom.css('left').replace('px', ''));
-    el.on('mousemove','.line-w, .line-w .circle', function(e){
+    $(document).on('mousemove', function(e){
       if(_this.wmove){
         let x = (e.pageX - parseInt(_this.ox));
         _this.vdom.css({
@@ -156,31 +196,7 @@ boxContent.prototype.bindMoveWEvent = function(el) {
     })
       .on('mouseup', function(){
         _this.wmove = false;
-        $(this).off('mousemove');
-      });
-  });
-};
-
-// 朝东方向
-boxContent.prototype.bindMoveEEvent = function (el) {
-  let _this = this;
-  el.on('mousedown','.line-e, .line-e .circle', function(e){
-    _this.oy = e.pageX;//原始x位置
-    _this.width = el.width();
-    _this.emove = true;
-    el.on('mousemove','.line-e, .line-e .circle', function(e){
-      if(_this.emove){
-        let x = (e.pageX - parseInt(_this.ox));
-        _this.vdom.css({
-          width: parseInt(_this.width) + x,
-        }).find('.editable-text').css({
-          width: parseInt(_this.width) - x
-        })
-      }
-    })
-      .on('mouseup', function(){
-        _this.emove = false;
-        $(this).off('mousemove');
+        $(document).off('mousemove');
       });
   });
 };
@@ -189,43 +205,42 @@ boxContent.prototype.bindMoveEEvent = function (el) {
 boxContent.prototype.bindMoveNWEvent = function (el) {
   let _this = this;
   el.on('mousedown','.circle-nw',function(e){
+    e.stopPropagation();
     _this.ox = e.pageX;//原始x位置
     _this.oy = e.pageY;
-    _this.width = _this.vdom.width();
-    _this.height = _this.vdom.height();
+    _this.width = el.width();
+    _this.height = el.height();
     _this.top = parseInt(_this.vdom.css('top').replace('px', ''));
     _this.left = parseInt(_this.vdom.css('left').replace('px', ''));
     _this.nwmove = true;
 
-    el.on('mousemove','.circle-nw', function(e){
+    $(document).on('mousemove', function(e){
       if(_this.nwmove){
         let x = e.pageX - _this.ox;
         let y = e.pageY - _this.oy;
-        el.css({
-          height: _this.height - y,
-          // top: otop + y,
-          width: _this.width - x,
-          // left: oleft + x
-        });
         _this.vdom.css({
           height: _this.height - y,
           top: _this.top + y,
           width: _this.width - x,
           left: _this.left + x
+        }).find('.editable-text').css({
+          height: _this.height - y,
+          width: _this.width - x,
         });
       }
     })
       .on('mouseup', function(){
         _this.nwmove = false;
-        $(this).off('mousemove');
+        $(document).off('mousemove');
       });
   });
 };
 
 // 朝西南
-boxContent.prototype.bindMoveNWEvent = function (el) {
+boxContent.prototype.bindMoveSWEvent = function (el) {
   let _this = this;
-  el.on('mousedown','.circle-nw',function(e){
+  el.on('mousedown','.circle-sw',function(e){
+    e.stopPropagation();
     _this.ox = e.pageX;//原始x位置
     _this.oy = e.pageY;
     _this.width = _this.vdom.width();
@@ -233,24 +248,23 @@ boxContent.prototype.bindMoveNWEvent = function (el) {
     _this.left = parseInt(_this.vdom.css('left').replace('px', ''));
     _this.swmove = true;
 
-    el.on('mousemove','.circle-nw', function(e){
+    $(document).on('mousemove', function(e){
       if(_this.swmove){
         let x = e.pageX - _this.ox;
         let y = e.pageY - _this.oy;
-        el.css({
-          height: _this.height + y,
-          width: _this.width - x,
-        });
         _this.vdom.css({
           height: _this.height + y,
           width: _this.width - x,
           left: _this.left + x
+        }).find('.editable-text').css({
+          height: _this.height + y,
+          width: _this.width - x,
         });
       }
     })
       .on('mouseup', function(){
         _this.swmove = false;
-        $(this).off('mousemove');
+        $(document).off('mousemove');
       });
   });
 };
@@ -259,21 +273,22 @@ boxContent.prototype.bindMoveNWEvent = function (el) {
 boxContent.prototype.bindMoveSEEvent = function (el){
   let _this = this;
   el.on('mousedown','.circle-se',function(e){
+    e.stopPropagation();
     _this.ox = e.pageX;//原始x位置
     _this.oy = e.pageY;
-    _this.width = _this.vdom.width();
-    _this.height = _this.vdom.height();
+    _this.width = el.width();
+    _this.height = el.height();
     _this.semove = true;
 
-    el.on('mousemove','.circle-se', function(e){
+    $(document).on('mousemove', function(e){
       if(_this.semove){
         let x = e.pageX - _this.ox;
         let y = e.pageY - _this.oy;
-        el.css({
+
+        _this.vdom.css({
           height: _this.height + y,
           width: _this.width + x,
-        });
-        _this.vdom.css({
+        }).find('.editable-text').css({
           height: _this.height + y,
           width: _this.width + x,
         });
@@ -281,7 +296,7 @@ boxContent.prototype.bindMoveSEEvent = function (el){
     })
       .on('mouseup', function(){
         _this.semove = false;
-        $(this).off('mousemove');
+        $(document).off('mousemove');
       });
   });
 };
@@ -294,6 +309,11 @@ boxContent.prototype.bindEditorEvent = function(el) {
     let range = window.getSelection();// 创建range
     range.selectAllChildren(child);// range 选择obj下所有子内容
   });
+
+  this.vdom.find('.comp_paragraph').on('blur',function(){
+    $(this).css('pointer-events','none');
+  });
+
 };
 
 

src/js/box/yzComponents.js

@@ -12,6 +12,12 @@ yzComponent.prototype.addComponent = function () {
   this.boxes.push(box);
 };
 
+
+//添加下划线
+yzComponent.prototype.addUnderline = function() {
+
+};
+
 yzComponent.prototype.renderDom = function() {
   let len = this.boxes.length;
   for(let i = 0;i<len;i++){
@@ -29,4 +35,5 @@ yzComponent.prototype.getBoxes = function() {
 yzComponent.prototype.setContent = function (content)  {
   this.parentDom = content;
 };
+
  export default yzComponent;

src/js/yzToolbar.js

@@ -54,6 +54,13 @@ yzToolbar.prototype.toolbarContent = function () {
         this.addComponent(liDom);
       },!0);
     }
+
+    if( item.name == 'underline' ){
+      liDom.addEventListener('click', () => {
+        this.addUnderline();
+      },!0);
+    }
+
   });
   toolDom.className = 'toolbar';
   toolDom.appendChild(ulDom);
@@ -81,4 +88,8 @@ yzToolbar.prototype.addComponent = function() {
   this.currentContent.addComponent();
 };
 
+yzToolbar.prototype.addUnderline = function() {
+  this.currentContent.addUnderline();
+};
+
 export default yzToolbar;