Merge pull request #198 from Jesus89/191-drag-replace

Drag & replace blocks
FPGAwars · Jan 21, 2018 · 0d9cd05 · 0d9cd05
2 parents 1f332ee + 00898a0
commit 0d9cd05
Show file tree

Hide file tree

Showing 7 changed files with 214 additions and 124 deletions.
diff --git a/app/package.json b/app/package.json
@@ -41,6 +41,7 @@
     "glob": "^7.1.2",
     "is-online": "^5.2.0",
     "jquery": "^3.2.1",
+    "lodash.debounce": "^4.0.8",
     "marked": "^0.3.12",
     "node-emoji": "^1.8.1",
     "node-lang-info": "^0.2.1",

diff --git a/app/scripts/factories/node.js b/app/scripts/factories/node.js
@@ -58,6 +58,9 @@ angular.module('icestudio')
   .factory('nodeTemp', function() {
     return require('temporary');
   })
+  .factory('nodeDebounce', function() {
+    return require('lodash.debounce');
+  })
   .factory('SVGO', function() {
     var config = {
       full: true,

diff --git a/app/scripts/graphics/joint.command.js b/app/scripts/graphics/joint.command.js
@@ -178,7 +178,7 @@ joint.dia.CommandManager = Backbone.Model.extend({
 
   initBatchCommand: function() {
 
-    //console.log('initBatchCommand', this.batchCommand);
+    // console.log('initBatchCommand', this.batchCommand);
 
     if (!this.batchCommand) {
 
@@ -198,30 +198,30 @@ joint.dia.CommandManager = Backbone.Model.extend({
 
   storeBatchCommand: function() {
 
-    //console.log('storeBatchCommand', this.batchCommand, this.batchLevel);
+    // console.log('storeBatchCommand', this.batchCommand, this.batchLevel);
 
     // In order to store batch command it is necesary to run storeBatchCommand as many times as
     // initBatchCommand was executed
     if (this.batchCommand && this.batchLevel <= 0) {
 
-    // checking if there is any valid command in batch
-    // for example: calling `initBatchCommand` immediately followed by `storeBatchCommand`
-    if (this.lastCmdIndex >= 0) {
+      // checking if there is any valid command in batch
+      // for example: calling `initBatchCommand` immediately followed by `storeBatchCommand`
+      if (this.lastCmdIndex >= 0) {
 
-	    this.redoStack = [];
+  	    this.redoStack = [];
 
-      this.undoStack.push(this.batchCommand);
-      if (this.batchCommand && this.batchCommand[0] && this.batchCommand[0].action !== 'lang') {
-        // Do not store lang in changesStack
-        this.changesStack.push(this.batchCommand);
-        this.triggerChange();
+        this.undoStack.push(this.batchCommand);
+        if (this.batchCommand && this.batchCommand[0] && this.batchCommand[0].action !== 'lang') {
+          // Do not store lang in changesStack
+          this.changesStack.push(this.batchCommand);
+          this.triggerChange();
+        }
+        this.trigger('add', this.batchCommand);
       }
-      this.trigger('add', this.batchCommand);
-    }
 
-    delete this.batchCommand;
-    delete this.lastCmdIndex;
-    delete this.batchLevel;
+      delete this.batchCommand;
+      delete this.lastCmdIndex;
+      delete this.batchLevel;
 
     } else if (this.batchCommand && this.batchLevel > 0) {
 
@@ -249,7 +249,9 @@ joint.dia.CommandManager = Backbone.Model.extend({
       switch (cmd.action) {
 
         case 'add':
-        	cell.remove();
+          if (cell) {
+            cell.remove();
+          }
         	break;
 
         case 'remove':

diff --git a/app/scripts/graphics/joint.selection.js b/app/scripts/graphics/joint.selection.js
@@ -103,18 +103,16 @@ joint.ui.SelectionView = Backbone.View.extend({
     }
   },
 
-  startTranslatingSelection: function(evt, noBatch) {
+  startTranslatingSelection: function(evt) {
 
-    if (evt.which === 1 || noBatch) {
+    if (this._action !== 'adding' && evt.which === 1) {
       // Mouse left button
 
       if (!evt.shiftKey) {
         this._action = 'translating';
 
-        if (!noBatch) {
-          this.options.graph.trigger('batch:stop');
-          this.options.graph.trigger('batch:start');
-        }
+        this.options.graph.trigger('batch:stop');
+        this.options.graph.trigger('batch:start');
 
         var snappedClientCoords = this.options.paper.snapToGrid(g.point(evt.clientX, evt.clientY));
         this._snappedClientX = snappedClientCoords.x;
@@ -125,9 +123,15 @@ joint.ui.SelectionView = Backbone.View.extend({
     }
   },
 
-  isTranslating: function() {
+  startAddingSelection: function(evt) {
+
+    this._action = 'adding';
+
+    var snappedClientCoords = this.options.paper.snapToGrid(g.point(evt.clientX, evt.clientY));
+    this._snappedClientX = snappedClientCoords.x;
+    this._snappedClientY = snappedClientCoords.y;
 
-    return this._action === 'translating';
+    this.trigger('selection-box:pointerdown', evt);
   },
 
   startSelecting: function(evt/*, x, y*/) {
@@ -179,6 +183,7 @@ joint.ui.SelectionView = Backbone.View.extend({
         });
         break;
 
+      case 'adding':
       case 'translating':
 
         var snappedClientCoords = this.options.paper.snapToGrid(g.point(evt.clientX, evt.clientY));
@@ -233,6 +238,8 @@ joint.ui.SelectionView = Backbone.View.extend({
       		this._snappedClientY = snappedClientY;
       	}
 
+        this.trigger('selection-box:pointermove', evt);
+
         break;
     }
   },
@@ -281,6 +288,9 @@ joint.ui.SelectionView = Backbone.View.extend({
         // Everything else is done during the translation.
         break;
 
+      case 'adding':
+        break;
+
       case 'cherry-picking':
         // noop;  All is done in the `createSelectionBox()` function.
         // This is here to avoid removing selection boxes as a reaction on mouseup event and

diff --git a/app/scripts/graphics/joint.shapes.js b/app/scripts/graphics/joint.shapes.js
@@ -190,7 +190,7 @@ joint.shapes.ice.Model = joint.shapes.basic.Generic.extend({
         attrs[portLabelSelector]['y'] = -5-offset;
         attrs[portLabelSelector]['text-anchor'] = 'end';
         attrs[portWireSelector]['y'] = position;
-        attrs[portWireSelector]['d'] = 'M 0 0 L 16 0';
+        attrs[portWireSelector]['d'] = 'M 0 0 L 8 0';
         break;
       case 'right':
         attrs[portSelector]['ref-dx'] = 8;
@@ -199,7 +199,7 @@ joint.shapes.ice.Model = joint.shapes.basic.Generic.extend({
         attrs[portLabelSelector]['y'] = -5-offset;
         attrs[portLabelSelector]['text-anchor'] = 'start';
         attrs[portWireSelector]['y'] = position;
-        attrs[portWireSelector]['d'] = 'M 0 0 L -16 0';
+        attrs[portWireSelector]['d'] = 'M 0 0 L -8 0';
         break;
       case 'top':
         attrs[portSelector]['ref-y'] = -8;
@@ -208,7 +208,7 @@ joint.shapes.ice.Model = joint.shapes.basic.Generic.extend({
         attrs[portLabelSelector]['y'] = 2;
         attrs[portLabelSelector]['text-anchor'] = 'start';
         attrs[portWireSelector]['x'] = position;
-        attrs[portWireSelector]['d'] = 'M 0 0 L 0 16';
+        attrs[portWireSelector]['d'] = 'M 0 0 L 0 8';
         break;
       case 'bottom':
         attrs[portSelector]['ref-dy'] = 8;
@@ -217,7 +217,7 @@ joint.shapes.ice.Model = joint.shapes.basic.Generic.extend({
         attrs[portLabelSelector]['y'] = -2;
         attrs[portLabelSelector]['text-anchor'] = 'start';
         attrs[portWireSelector]['x'] = position;
-        attrs[portWireSelector]['d'] = 'M 0 0 L 0 -16';
+        attrs[portWireSelector]['d'] = 'M 0 0 L 0 -8';
         break;
     }
 
@@ -296,10 +296,14 @@ joint.shapes.ice.ModelView = joint.dia.ElementView.extend({
       return;
     }
 
+    var type = self.model.get('type');
     var size = self.model.get('size');
     var state = self.model.get('state');
     var gridstep = 8 * 2;
-    var minSize = { width: 64, height: 32 };
+    var minSize = {
+      width: type === 'ice.Code' ? 96 : 64,
+      height: type === 'ice.Code' ? 64 : 32
+    };
 
     var clientCoords = snapToGrid({ x: event.clientX, y: event.clientY });
     var oldClientCoords = snapToGrid({ x: self._clientX, y: self._clientY });