Skip to content

Commit 3974991

Browse files
dedywahyudidedywahyudi
authored
Merge pull request #23 from cristianmusic7/master
Annotation toolbar UI style fixes, added annotation functionality on new entry dialog
2 parents c82563c + 39c5b1b commit 3974991

File tree

8 files changed

+106
-26
lines changed

8 files changed

+106
-26
lines changed

‎example/notebook/bundle.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -160,7 +160,8 @@ define([
160160
"category": "embed",
161161
"depends":[
162162
"dialogService",
163-
"dndService"
163+
"dndService",
164+
"$rootScope",
164165
]
165166
},
166167
{

‎example/notebook/res/sass/_notebook-base.scss

Lines changed: 29 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -338,7 +338,24 @@
338338
padding-right: 0;
339339
}
340340

341-
@media only screen and (max-device-width: 1024px){
341+
.overlay.l-dialog .outer-holder.annotation-dialog{
342+
width: 90%;
343+
height: 90%;
344+
}
345+
346+
.snap-annotation-wrapper{
347+
padding-top: 40px;
348+
}
349+
350+
.annotate-new{
351+
.s-button{
352+
margin-left: 25px;
353+
margin-top: 10px;
354+
z-index: 9;
355+
}
356+
}
357+
358+
@media screen and (max-width: 1024px){
342359
.entries-wrapper{
343360
font-size: 14px;
344361
}
@@ -355,6 +372,17 @@
355372
white-space: normal;
356373
}
357374
}
375+
376+
.ptro-color-main{
377+
height: 80px;
378+
.tool-controls,>div>span:not(.ptro-info){
379+
float: left;
380+
}
381+
}
382+
383+
.ptro-wrapper{
384+
top: 80px;
385+
}
358386
}
359387

360388
@media screen and (max-width: 768px){

‎example/notebook/res/templates/controls/embedControl.html

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,11 @@
4646
</div>
4747

4848
</div>
49+
<div class="l-flex-row embed annotate-new" ng-if="snapToggle">
50+
<a class="s-button icon-pencil" title="Edit" ng-click="annotateSnapshot()">
51+
<span class="title-label">Annotate</span>
52+
</a>
53+
</div>
4954
</div>
5055
</div>
5156
</ng-form>

‎example/notebook/res/templates/entry.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929
</mct-representation>
3030
</div>
3131
</div>
32-
<div class="abs object-holder" data-entry = "{{parameters.entry}}" data-embed = "{{parameters.embed}}" mct-snapshot>
32+
<div class="abs object-holder" data-entry = "{{parameters.entry}}" data-embed = "{{parameters.embed}}" mct-snapshot ng-if="representation.selected.key">
3333
<mct-representation
3434
key="representation.selected.key"
3535
mct-object="representation.selected.key && domainObject">

‎example/notebook/src/actions/annotateSnapshot.js

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -42,13 +42,14 @@ define(
4242
}]
4343
};
4444

45-
function annotateSnapshot(dialogService,dndService,context) {
45+
function annotateSnapshot(dialogService,dndService,$rootScope,context) {
4646
context = context || {};
4747

4848
// Choose the object to be opened into a new tab
4949
this.domainObject = context.selectedObject || context.domainObject;
5050
this.dialogService = dialogService;
5151
this.dndService = dndService;
52+
this.$rootScope = $rootScope;
5253
}
5354

5455

@@ -61,26 +62,37 @@ define(
6162
this.dialogService.getUserChoice(ANNOTATION_STRUCT)
6263
.then(saveNotes);
6364

65+
var rootscope = this.$rootScope;
66+
6467
var painterro;
6568

6669
var tracker = function(){
70+
$(document.body).find('.l-dialog .outer-holder').addClass('annotation-dialog');
6771
painterro = Painterro({
6872
id: 'snap-annotation',
6973
backgroundFillColor: '#eee',
7074
hiddenTools:['save', 'open', 'close','eraser'],
7175
saveHandler: function (image, done) {
72-
var elementPos = domainObject.model.entries.map(function(x) {return x.createdOn; }).indexOf(entryId)
73-
var entryEmbeds = domainObject.model.entries[elementPos].embeds;
74-
var embedPos = entryEmbeds.map(function(x) {return x.id; }).indexOf(embedId);
75-
$scope.saveSnap(image.asBlob(),embedPos,elementPos);
76+
if(entryId && embedId){
77+
var elementPos = domainObject.model.entries.map(function(x) {return x.createdOn; }).indexOf(entryId)
78+
var entryEmbeds = domainObject.model.entries[elementPos].embeds;
79+
var embedPos = entryEmbeds.map(function(x) {return x.id; }).indexOf(embedId);
80+
$scope.saveSnap(image.asBlob(),embedPos,elementPos);
81+
}else{
82+
rootscope.snapshot = {'src':image.asDataURL('image/png'),
83+
'modified':Date.now()};
84+
}
85+
7686
done(true);
77-
7887
}
7988
}).show(snapshot);
89+
8090
}
8191

8292
ANNOTATION_STRUCT.model = {'tracker':tracker};
8393

94+
95+
8496
function saveNotes(param){
8597
if(param=='ok'){
8698
painterro.save();

‎example/notebook/src/actions/newEntryContextual.js

Lines changed: 28 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@ define(
8989
var notification = this.notificationService;
9090
var linkService = this.linkService;
9191
var dialogService = this.dialogService;
92-
92+
var rootScope = this.$rootScope;
9393
// Create the overlay element and add it to the document's body
9494
this.$rootScope.selObj = domainObj;
9595
this.$rootScope.selValue = "";
@@ -99,7 +99,30 @@ define(
9999

100100
function setSnapshot(value){
101101
if(value){
102-
dialogService.getUserInput(NEW_TASK_FORM,{}).then(addNewEntry);
102+
var overlayModel = {
103+
title: NEW_TASK_FORM.name,
104+
message: NEW_TASK_FORM.message,
105+
structure: NEW_TASK_FORM,
106+
value: {'entry': rootScope.newEntryText || ""}
107+
};
108+
109+
// Provide result from the model
110+
function resultGetter() {
111+
return overlayModel.value;
112+
}
113+
114+
if(value !== rootScope.lastValue){
115+
rootScope.currentDialog = overlayModel;
116+
117+
dialogService.getDialogResponse(
118+
"overlay-dialog",
119+
overlayModel,
120+
resultGetter
121+
).then(addNewEntry);
122+
}
123+
124+
125+
rootScope.lastValue = value;
103126
}
104127
}
105128

@@ -151,11 +174,13 @@ define(
151174
}]
152175
};
153176
}
154-
});
177+
});
155178

156179
notification.info({
157180
title: "Notebook Entry created"
158181
});
182+
183+
self.$rootScope.newEntryText = '';
159184
}
160185
};
161186

‎example/notebook/src/controllers/newEntryController.js

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -30,23 +30,33 @@ define(
3030

3131
$scope.snapshot = undefined;
3232
$scope.snapToggle = true;
33+
$scope.entryText = '';
3334
var annotateAction = $rootScope.selObj.getCapability('action').getActions(
3435
{category: 'embed'})[1];
3536

3637
$scope.$parent.$parent.ngModel[$scope.$parent.$parent.field] = $rootScope.selObj;
3738
$scope.objectName = $rootScope.selObj.getModel().name;
3839
$scope.cssClass= $rootScope.selObj.getCapability('type').typeDef.cssClass;
3940

41+
$scope.annotateSnapshot = function($event){
42+
if($rootScope.currentDialog.value){
43+
$rootScope.newEntryText = $scope.$parent.$parent.ngModel['entry'];
44+
$rootScope.currentDialog.cancel();
45+
annotateAction.perform($event,$rootScope.snapshot.src);
46+
$rootScope.currentDialog = undefined;
47+
}
48+
};
49+
4050
function updateSnapshot(img){
4151
$scope.snapshot = img;
42-
}
52+
};
4353
// Update set of actions whenever the action capability
4454
// changes or becomes available.
4555
$rootScope.$watch("snapshot", updateSnapshot);
4656

47-
$rootScope.$watch("selValue", selValueFn);
57+
$rootScope.$watch("selValue", toggleEmbed);
4858

49-
function selValueFn(value){
59+
function toggleEmbed(value){
5060
$scope.snapToggle =value;
5161
}
5262
}

‎example/notebook/src/directives/MCTSnapshot.js

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -44,15 +44,11 @@ define([
4444
document.body.appendChild(snapshot);
4545
}
4646

47-
function closeOverlay(newForm) {
48-
if(!newForm){
49-
if(snapshot){
50-
snapshot.removeChild(element);
51-
layoutContainer.remove();
52-
}
53-
}else{
54-
layoutContainer.appendChild(element);
55-
}
47+
function closeOverlay() {
48+
if(snapshot){
49+
snapshot.removeChild(element);
50+
layoutContainer.remove();
51+
}
5652
document.body.removeChild(snapshot);
5753
snapshot = undefined;
5854
}
@@ -93,6 +89,7 @@ define([
9389
'size':img.size,
9490
'modified':Date.now()
9591
};
92+
closeOverlay(false);
9693
};
9794

9895
}
@@ -114,10 +111,12 @@ define([
114111
}
115112

116113
saveImg = function(url,entryId,embedId){
117-
$scope.$parent.$parent.saveSnap(url,embedId,entryId);
114+
$scope.$parent.$parent.$parent.saveSnap(url,embedId,entryId);
115+
}
116+
if($(document.body).find('.overlay.snapshot').length == 0){
117+
toggleOverlay();
118118
}
119119

120-
toggleOverlay();
121120
$scope.$on('$destroy', function () {
122121
$element.off('click', toggleOverlay);
123122
});

0 commit comments

Comments
 (0)