瀏覽代碼

[oozie] Disable drop on sides of the same widget row

Enrico Berti 11 年之前
父節點
當前提交
b9f8734

+ 9 - 9
apps/oozie/src/oozie/templates/editor/workflow_editor.mako

@@ -37,21 +37,21 @@ ${ commonheader(_("Workflow Editor"), "Oozie", user) | n,unicode }
   <%def name="widgets()">
     <div data-bind="css: { 'draggable-widget': true },
                     draggable: {data: draggableHiveAction(), isEnabled: true,
-                    options: {'refreshPositions': true, 'start': function(event, ui){$root.setCurrentDraggedWidget(draggableHiveAction());}}}"
+                    options: {'refreshPositions': true, 'start': function(event, ui){$root.currentlyDraggedWidget(draggableHiveAction());}}}"
          title="${_('Hive Script')}" rel="tooltip" data-placement="top">
          <a class="draggable-icon"><img src="/oozie/static/art/icon_beeswax_48.png" class="app-icon"></a>
     </div>
 
     <div data-bind="css: { 'draggable-widget': true},
                     draggable: {data: draggablePigAction(), isEnabled: true,
-                    options: {'refreshPositions': true, 'start': function(event, ui){$root.setCurrentDraggedWidget(draggablePigAction());}}}"
+                    options: {'refreshPositions': true, 'start': function(event, ui){$root.currentlyDraggedWidget(draggablePigAction());}}}"
          title="${_('Pig Script')}" rel="tooltip" data-placement="top">
          <a class="draggable-icon"><img src="/oozie/static/art/icon_pig_48.png" class="app-icon"></a>
     </div>
 
     <div data-bind="css: { 'draggable-widget': true },
                     draggable: {data: draggableJavaAction(), isEnabled: true,
-                    options: {'start': function(event, ui){$root.setCurrentDraggedWidget(draggableJavaAction());}}}"
+                    options: {'start': function(event, ui){$root.currentlyDraggedWidget(draggableJavaAction());}}}"
          title="${_('Java program')}" rel="tooltip" data-placement="top">
          <a class="draggable-icon"><i class="fa fa-file-code-o"></i></a>
     </div>
@@ -72,7 +72,7 @@ ${ commonheader(_("Workflow Editor"), "Oozie", user) | n,unicode }
 
     <div data-bind="css: { 'draggable-widget': true },
                     draggable: {data: draggableSubworkflowAction(), isEnabled: true,
-                    options: {'start': function(event, ui){$root.setCurrentDraggedWidget(draggableSubworkflowAction());}}}"
+                    options: {'start': function(event, ui){$root.currentlyDraggedWidget(draggableSubworkflowAction());}}}"
          title="${_('Sub workflow')}" rel="tooltip" data-placement="top">
          <a class="draggable-icon"><i class="fa fa-code-fork"></i></a>
     </div>
@@ -124,7 +124,7 @@ ${ commonheader(_("Workflow Editor"), "Oozie", user) | n,unicode }
 
     <div data-bind="css: { 'draggable-widget': true },
                     draggable: {data: draggableKillNode(), isEnabled: true,
-                    options: {'start': function(event, ui){$root.setCurrentDraggedWidget(draggableKillNode());}}}"
+                    options: {'start': function(event, ui){$root.currentlyDraggedWidget(draggableKillNode());}}}"
          title="${_('Kill')}" rel="tooltip" data-placement="top">
          <a class="draggable-icon"><i class="fa fa-stop"></i></a>
     </div>
@@ -271,7 +271,7 @@ ${ commonheader(_("Workflow Editor"), "Oozie", user) | n,unicode }
     </div>
     <div class="row-fluid">
       <div data-bind="css: {'span1': true, 'readonly': ! $root.isEditing()}">
-        <div data-bind="visible: $root.isEditing() && !($data.widgets().length > 0 && $data.widgets()[0].widgetType() == 'join-widget'), css: {'drop-target drop-target-side': true, 'is-editing': $root.isEditing}, droppable: {enabled: $root.isEditing, onDrop: function(){ var _w = $root.addSideDraggedWidget($data, true); widgetDraggedAdditionalHandler(_w); } }"></div>
+        <div data-bind="visible: $root.isEditing() && enableOozieDropOnSide() && !($data.widgets().length > 0 && $data.widgets()[0].widgetType() == 'join-widget'), css: {'drop-target drop-target-side': true, 'is-editing': $root.isEditing}, droppable: {enabled: $root.isEditing, onDrop: function(){ var _w = $root.addSideDraggedWidget($data, true); widgetDraggedAdditionalHandler(_w); } }"></div>
       </div>
       <div  data-bind="css: {'span10': true, 'readonly': ! $root.isEditing()}">
         <div data-bind="visible: columns().length == 0, css: {'row-fluid': true, 'row-container':true, 'is-editing': $root.isEditing},
@@ -289,7 +289,7 @@ ${ commonheader(_("Workflow Editor"), "Oozie", user) | n,unicode }
         </div>
       </div>
       <div  data-bind="css: {'span1': true, 'readonly': ! $root.isEditing()}">
-        <div data-bind="visible: $root.isEditing() && !($data.widgets().length > 0 && $data.widgets()[0].widgetType() == 'join-widget'),, css: {'drop-target drop-target-side': true, 'is-editing': $root.isEditing}, droppable: {enabled: $root.isEditing, onDrop: function(){ var _w = $root.addSideDraggedWidget($data, false); widgetDraggedAdditionalHandler(_w); } }"></div>
+        <div data-bind="visible: $root.isEditing() && enableOozieDropOnSide() && !($data.widgets().length > 0 && $data.widgets()[0].widgetType() == 'join-widget'),, css: {'drop-target drop-target-side': true, 'is-editing': $root.isEditing}, droppable: {enabled: $root.isEditing, onDrop: function(){ var _w = $root.addSideDraggedWidget($data, false); widgetDraggedAdditionalHandler(_w); } }"></div>
       </div>
     </div>
   </div>
@@ -297,7 +297,7 @@ ${ commonheader(_("Workflow Editor"), "Oozie", user) | n,unicode }
 </script>
 
 <script type="text/html" id="widget-template">
-  <div data-bind="attr: {'id': 'wdg_'+ id(),}, css: klass, draggable: {data: $data, isEnabled: true, options: {'handle': '.move-widget', 'opacity': 0.7, 'refreshPositions': true, 'start': function(event, ui){ $root.setCurrentDraggedWidget($data); }, 'helper': function(event){lastWindowScrollPosition = $(window).scrollTop();  var _par = $('<div>');_par.addClass('card card-widget');var _title = $('<h2>');_title.addClass('card-heading simple');_title.text($(event.toElement).text());_title.appendTo(_par);_par.height(80);_par.width(180);return _par;}}}">
+  <div data-bind="attr: {'id': 'wdg_'+ id(),}, css: klass, draggable: {data: $data, isEnabled: true, options: {'handle': '.move-widget', 'opacity': 0.7, 'refreshPositions': true, 'start': function(event, ui){ $root.currentlyDraggedWidget($data); }, 'stop': function(event, ui){ $root.enableSideDrop($data); }, 'helper': function(event){lastWindowScrollPosition = $(window).scrollTop();  var _par = $('<div>');_par.addClass('card card-widget');var _title = $('<h2>');_title.addClass('card-heading simple');_title.text($(event.toElement).text());_title.appendTo(_par);_par.height(80);_par.width(180);return _par;}}}">
     <h2 class="card-heading simple">
       <span data-bind="visible: $root.isEditing">
         <a href="javascript:void(0)" class="move-widget"><i class="fa fa-arrows"></i></a>
@@ -1141,7 +1141,7 @@ ${ dashboard.import_bindings() }
 
   function widgetDraggedAdditionalHandler(widget) {
     $("canvas").remove();
-    if (viewModel.currentlyDraggedWidget && viewModel.currentlyDraggedWidget.id() == ""){
+    if (viewModel.currentlyDraggedWidget() && viewModel.currentlyDraggedWidget().id() == ""){
       viewModel.workflow.newNode(widget);
       showAddActionDemiModal(widget);
     }

+ 36 - 23
apps/oozie/static/js/workflow-editor.ko.js

@@ -403,18 +403,31 @@ var WorkflowEditorViewModel = function (layout_json, workflow_json, credentials_
   self.selectedSubWorkflow = ko.observable();
 
 
-  self.currentlyDraggedWidget = null;
+  self.currentlyDraggedWidget = ko.observable(null);
+  self.currentlyDraggedWidget.subscribe(function (widget) {
+    toggleSideDrop(widget, false);
+  });
+
+  self.enableSideDrop = function (widget) {
+    toggleSideDrop(widget, true);
+  }
+
+  function toggleSideDrop(widget, enable) {
+    if (widget != null && widget.id() != "") {
+      var _row = self.getWidgetParentRow(widget.id());
+      if (_row) {
+        _row.enableOozieDropOnSide(enable);
+      }
+    }
+  }
+
   self.currentlyCreatingFork = false;
   self.currentlyCreatedFork = null;
   self.currentlyCreatedJoin = null;
   self.isDragging = ko.observable(false);
 
-  self.setCurrentDraggedWidget = function (widget) {
-    self.currentlyDraggedWidget = widget;
-  }
-
   self.addDraggedWidget = function (target, atBeginning) {
-    if (self.currentlyDraggedWidget != null) {
+    if (self.currentlyDraggedWidget() != null) {
       var _parentCol = target instanceof Column ? target : self.getRowParentColumn(target.id());
 
       var _newRow = null;
@@ -443,19 +456,19 @@ var WorkflowEditorViewModel = function (layout_json, workflow_json, credentials_
       }
 
       var _w = new Widget({
-          size: self.currentlyDraggedWidget.size(),
+          size: self.currentlyDraggedWidget().size(),
           id: UUID(),
-          name: self.currentlyDraggedWidget.name(),
-          widgetType: self.currentlyDraggedWidget.widgetType(),
-          properties: self.currentlyDraggedWidget.properties(),
-          offset: self.currentlyDraggedWidget.offset(),
+          name: self.currentlyDraggedWidget().name(),
+          widgetType: self.currentlyDraggedWidget().widgetType(),
+          properties: self.currentlyDraggedWidget().properties(),
+          offset: self.currentlyDraggedWidget().offset(),
           loading: true,
           vm: self
         });
 
-      if (self.currentlyDraggedWidget.id() != ""){
-        self.removeWidgetById(self.currentlyDraggedWidget.id());
-        _w = self.currentlyDraggedWidget;
+      if (self.currentlyDraggedWidget().id() != ""){
+        self.removeWidgetById(self.currentlyDraggedWidget().id());
+        _w = self.currentlyDraggedWidget();
       }
 
       _newRow.widgets([_w]);
@@ -465,7 +478,7 @@ var WorkflowEditorViewModel = function (layout_json, workflow_json, credentials_
   }
 
   self.addSideDraggedWidget = function (row, atBeginning) {
-    if (self.currentlyDraggedWidget != null) {
+    if (self.currentlyDraggedWidget() != null) {
       var _parentCol = self.getRowParentColumn(row.id());
       var _rowIdx = 0;
       $.each(_parentCol.rows(), function (i, irow) {
@@ -494,19 +507,19 @@ var WorkflowEditorViewModel = function (layout_json, workflow_json, credentials_
       }
 
       var _w = new Widget({
-        size: self.currentlyDraggedWidget.size(),
+        size: self.currentlyDraggedWidget().size(),
         id: UUID(),
-        name: self.currentlyDraggedWidget.name(),
-        widgetType: self.currentlyDraggedWidget.widgetType(),
-        properties: self.currentlyDraggedWidget.properties(),
-        offset: self.currentlyDraggedWidget.offset(),
+        name: self.currentlyDraggedWidget().name(),
+        widgetType: self.currentlyDraggedWidget().widgetType(),
+        properties: self.currentlyDraggedWidget().properties(),
+        offset: self.currentlyDraggedWidget().offset(),
         loading: true,
         vm: self
       });
 
-      if (self.currentlyDraggedWidget.id() != ""){
-        self.removeWidgetById(self.currentlyDraggedWidget.id());
-        _w = self.currentlyDraggedWidget;
+      if (self.currentlyDraggedWidget().id() != ""){
+        self.removeWidgetById(self.currentlyDraggedWidget().id());
+        _w = self.currentlyDraggedWidget();
       }
 
       if (row.columns().length == 0) {

+ 2 - 0
desktop/core/static/js/ko.layout.js

@@ -97,6 +97,8 @@ var Row = function (widgets, vm, columns) {
     return vm.isEditing && vm.isEditing() && self.widgets && self.widgets().length < 1
   });
 
+  self.enableOozieDropOnSide = ko.observable(true);
+
   self.addWidget = function (widget) {
     self.widgets.push(widget);
   };