topcoderinc · dedywahyudi · Oct 21, 2017 · Oct 21, 2017
diff --git a/example/notebook/bundle.js b/example/notebook/bundle.js
@@ -160,7 +160,8 @@ define([
                     "category": "embed",
                     "depends":[
                       "dialogService",
-                      "dndService"
+                      "dndService",
+                      "$rootScope",
                     ]
                 },                
                 {

diff --git a/example/notebook/res/sass/_notebook-base.scss b/example/notebook/res/sass/_notebook-base.scss
@@ -338,7 +338,24 @@
     padding-right: 0;
 }
 
-@media only screen and (max-device-width: 1024px){
+.overlay.l-dialog .outer-holder.annotation-dialog{
+    width: 90%;
+    height: 90%;
+}
+
+.snap-annotation-wrapper{
+    padding-top: 40px;
+}
+
+.annotate-new{
+    .s-button{
+        margin-left: 25px;
+        margin-top: 10px;
+        z-index: 9;
+    }
+}
+
+@media screen and (max-width: 1024px){
     .entries-wrapper{
         font-size: 14px;
     }
@@ -355,6 +372,17 @@
             white-space: normal;
         }
     }
+
+    .ptro-color-main{
+        height: 80px;
+        .tool-controls,>div>span:not(.ptro-info){
+            float: left;
+        }
+    }
+
+    .ptro-wrapper{
+        top: 80px;
+    }
 }
 
 @media screen and (max-width: 768px){

diff --git a/example/notebook/res/templates/controls/embedControl.html b/example/notebook/res/templates/controls/embedControl.html
@@ -46,6 +46,11 @@
                 </div>
 
              </div>
+             <div class="l-flex-row embed annotate-new" ng-if="snapToggle">  
+                <a class="s-button icon-pencil" title="Edit" ng-click="annotateSnapshot()">
+                    <span class="title-label">Annotate</span>
+                </a>     
+             </div>
            </div>            
         </div>
     </ng-form>

diff --git a/example/notebook/res/templates/entry.html b/example/notebook/res/templates/entry.html
@@ -29,7 +29,7 @@
             </mct-representation>
         </div>
     </div>
-    <div class="abs object-holder" data-entry = "{{parameters.entry}}" data-embed = "{{parameters.embed}}" mct-snapshot>
+    <div class="abs object-holder" data-entry = "{{parameters.entry}}" data-embed = "{{parameters.embed}}" mct-snapshot ng-if="representation.selected.key">
         <mct-representation
                 key="representation.selected.key"
                 mct-object="representation.selected.key && domainObject">

diff --git a/example/notebook/src/actions/annotateSnapshot.js b/example/notebook/src/actions/annotateSnapshot.js
@@ -42,13 +42,14 @@ define(
             }]            
         };
 
-        function annotateSnapshot(dialogService,dndService,context) {
+        function annotateSnapshot(dialogService,dndService,$rootScope,context) {
             context = context || {};
 
             // Choose the object to be opened into a new tab
             this.domainObject = context.selectedObject || context.domainObject;
             this.dialogService = dialogService;
             this.dndService = dndService;
+            this.$rootScope = $rootScope;
         }
 
 
@@ -61,26 +62,37 @@ define(
             this.dialogService.getUserChoice(ANNOTATION_STRUCT)
                         .then(saveNotes);
 
+            var rootscope = this.$rootScope;
+
             var painterro;
 
             var tracker = function(){
+                $(document.body).find('.l-dialog .outer-holder').addClass('annotation-dialog');
                 painterro = Painterro({
                 id: 'snap-annotation',
                 backgroundFillColor: '#eee',
                 hiddenTools:['save', 'open', 'close','eraser'],
                 saveHandler: function (image, done) {
-                        var elementPos = domainObject.model.entries.map(function(x) {return x.createdOn; }).indexOf(entryId)
-                        var entryEmbeds = domainObject.model.entries[elementPos].embeds;
-                        var embedPos = entryEmbeds.map(function(x) {return x.id; }).indexOf(embedId);
-                        $scope.saveSnap(image.asBlob(),embedPos,elementPos);
+                        if(entryId && embedId){
+                            var elementPos = domainObject.model.entries.map(function(x) {return x.createdOn; }).indexOf(entryId)
+                            var entryEmbeds = domainObject.model.entries[elementPos].embeds;
+                            var embedPos = entryEmbeds.map(function(x) {return x.id; }).indexOf(embedId);
+                            $scope.saveSnap(image.asBlob(),embedPos,elementPos);
+                        }else{  
+                            rootscope.snapshot = {'src':image.asDataURL('image/png'),
+                                                  'modified':Date.now()};                             
+                        }
+
                    done(true); 
-
                }
                 }).show(snapshot);
+
             }
 
             ANNOTATION_STRUCT.model = {'tracker':tracker};
 
+
+
             function saveNotes(param){
                 if(param=='ok'){
                     painterro.save();

diff --git a/example/notebook/src/actions/newEntryContextual.js b/example/notebook/src/actions/newEntryContextual.js
@@ -89,7 +89,7 @@ define(
             var notification = this.notificationService; 
             var linkService = this.linkService; 
             var dialogService = this.dialogService;
-
+            var rootScope = this.$rootScope;
              // Create the overlay element and add it to the document's body
             this.$rootScope.selObj = domainObj;
             this.$rootScope.selValue = "";
@@ -99,7 +99,30 @@ define(
 
             function setSnapshot(value){
                 if(value){
-                    dialogService.getUserInput(NEW_TASK_FORM,{}).then(addNewEntry);
+                    var overlayModel = {
+                        title: NEW_TASK_FORM.name,
+                        message: NEW_TASK_FORM.message,
+                        structure: NEW_TASK_FORM,
+                        value: {'entry': rootScope.newEntryText || ""}
+                    };
+
+                    // Provide result from the model
+                    function resultGetter() {
+                        return overlayModel.value;
+                    }
+
+                    if(value !== rootScope.lastValue){
+                         rootScope.currentDialog = overlayModel;
+
+                        dialogService.getDialogResponse(
+                            "overlay-dialog",
+                            overlayModel,
+                            resultGetter
+                        ).then(addNewEntry);
+                    }
+
+
+                    rootScope.lastValue = value;
                 }                
             }
 
@@ -151,11 +174,13 @@ define(
                                      }]   
                         };
                     }                                 
-            });
+                });
 
                 notification.info({
                     title: "Notebook Entry created"
                 }); 
+
+                self.$rootScope.newEntryText = '';
             }
         };
 

diff --git a/example/notebook/src/controllers/newEntryController.js b/example/notebook/src/controllers/newEntryController.js
@@ -30,23 +30,33 @@ define(
 
             $scope.snapshot = undefined;
             $scope.snapToggle = true;
+            $scope.entryText = '';
             var annotateAction = $rootScope.selObj.getCapability('action').getActions(
                                                                             {category: 'embed'})[1];
 
             $scope.$parent.$parent.ngModel[$scope.$parent.$parent.field] = $rootScope.selObj;
             $scope.objectName = $rootScope.selObj.getModel().name;
             $scope.cssClass= $rootScope.selObj.getCapability('type').typeDef.cssClass;
 
+            $scope.annotateSnapshot = function($event){
+                if($rootScope.currentDialog.value){
+                    $rootScope.newEntryText = $scope.$parent.$parent.ngModel['entry'];
+                    $rootScope.currentDialog.cancel();
+                    annotateAction.perform($event,$rootScope.snapshot.src);
+                    $rootScope.currentDialog = undefined;
+                }                
+            };
+
             function updateSnapshot(img){
                 $scope.snapshot = img;
-            }
+            };
             // Update set of actions whenever the action capability
             // changes or becomes available.
             $rootScope.$watch("snapshot", updateSnapshot);
 
-            $rootScope.$watch("selValue", selValueFn);
+            $rootScope.$watch("selValue", toggleEmbed);
 
-            function selValueFn(value){
+            function toggleEmbed(value){
                 $scope.snapToggle =value;
             }
         }

diff --git a/example/notebook/src/directives/MCTSnapshot.js b/example/notebook/src/directives/MCTSnapshot.js
@@ -44,15 +44,11 @@ define([
                 document.body.appendChild(snapshot);             
             }
 
-            function closeOverlay(newForm) {
-                if(!newForm){
-                    if(snapshot){
-                        snapshot.removeChild(element);
-                        layoutContainer.remove(); 
-                    }   
-                }else{
-                    layoutContainer.appendChild(element);
-                }    
+            function closeOverlay() {
+                if(snapshot){
+                    snapshot.removeChild(element);
+                    layoutContainer.remove(); 
+                }   
                 document.body.removeChild(snapshot); 
                 snapshot = undefined;                             
             }
@@ -93,6 +89,7 @@ define([
                                                                      'size':img.size,
                                                                      'modified':Date.now()
                                                                   };
+                                            closeOverlay(false);
                                         };
 
                                     } 
@@ -114,10 +111,12 @@ define([
             }
 
             saveImg = function(url,entryId,embedId){         
-                $scope.$parent.$parent.saveSnap(url,embedId,entryId);                
+                $scope.$parent.$parent.$parent.saveSnap(url,embedId,entryId);                
+            }
+            if($(document.body).find('.overlay.snapshot').length == 0){
+                toggleOverlay();
             }
 
-            toggleOverlay();
             $scope.$on('$destroy', function () {
                 $element.off('click', toggleOverlay);
             });