ADAM / AIAHTML5

Commit db2cdb50e8df11a759b5e658323568cb8b46e712

Authored by Nikita Kulshreshtha
2 parents f88a0e23 e6ea746c

Merge branch 'TransparencyCloseIssue' into Develop

Inline Side-by-side
Showing 4 changed files with 1297 additions and 1187 deletions
400-SOURCECODE/AIAHTML5.Web/app/controllers/CIController.js
  View file @db2cdb5
@@ -429,8 +429,10 @@ function ($scope, $window, $rootScope, $compile, $http, log, $location, $timeout @@ -429,8 +429,10 @@ function ($scope, $window, $rootScope, $compile, $http, log, $location, $timeout
429 $("html,body").scrollTop(0); 429 $("html,body").scrollTop(0);
430 } 430 }
431 431
  432 +
432 $scope.openView = function ($event) { 433 $scope.openView = function ($event) {
433 - 434 +
  435 + $rootScope.CIAnotationIdentifyModeOff = true;
434 $rootScope.currentBodyViewId = $event.currentTarget.id; 436 $rootScope.currentBodyViewId = $event.currentTarget.id;
435 if ($event.currentTarget.textContent !== null && typeof ($event.currentTarget.textContent) !== "undefined") { 437 if ($event.currentTarget.textContent !== null && typeof ($event.currentTarget.textContent) !== "undefined") {
436 var CITitle = []; 438 var CITitle = [];
@@ -532,7 +534,8 @@ function ($scope, $window, $rootScope, $compile, $http, log, $location, $timeout @@ -532,7 +534,8 @@ function ($scope, $window, $rootScope, $compile, $http, log, $location, $timeout
532 theme: 'success', 534 theme: 'success',
533 currentController: 'CIController', 535 currentController: 'CIController',
534 parentSlug: 'clinical-illustrations', 536 parentSlug: 'clinical-illustrations',
535 - content: '<div class="row"><div class="col-sm-12 img-thumbnail" align="center">' + 537 + content: '<div class="row"><div style="align:left;width:100%;height:100%"><canvas id="canvas" ng-click="BindCanvasDrawingListners($event)" width="1369" height="325" class="canvas-annotationStyle" style="position: absolute; background-color: transparent;z-index:1 "></canvas></div> <canvas id="canvasPaint" ng-click="FreeStylePaint($event)" width="1369" height="325" class="canvas-annotationStyle1" style="position: absolute;z-index:0;"></canvas>' +
  538 + '<div class="col-sm-12 img-thumbnail" align="center">' +
536 '<img src="' + $scope.clickedCIImage + '" alt="" title="" class="img-responsive "><div class="col-sm-12 well">' + 539 '<img src="' + $scope.clickedCIImage + '" alt="" title="" class="img-responsive "><div class="col-sm-12 well">' +
537 '<div align="left" id="sid"><p>' + $scope.clickedCISummary + '</p></div><button id="btnTxtOnOff" class="btn btn-primary pull-right">Text Off</button>' + 540 '<div align="left" id="sid"><p>' + $scope.clickedCISummary + '</p></div><button id="btnTxtOnOff" class="btn btn-primary pull-right">Text Off</button>' +
538 '<script>$(document).ready(function(){$("#btnTxtOnOff").click(function(){$("#sid").toggle();if($.trim($(this).text()) === "Text Off"){$(this).text("Text On");}else{$(this).text("Text Off");}});});</script></div>' + 541 '<script>$(document).ready(function(){$("#btnTxtOnOff").click(function(){$("#sid").toggle();if($.trim($(this).text()) === "Text Off"){$(this).text("Text On");}else{$(this).text("Text Off");}});});</script></div>' +
@@ -576,8 +579,20 @@ function ($scope, $window, $rootScope, $compile, $http, log, $location, $timeout @@ -576,8 +579,20 @@ function ($scope, $window, $rootScope, $compile, $http, log, $location, $timeout
576 $('#CIView').css("width", $(window).outerWidth()); 579 $('#CIView').css("width", $(window).outerWidth());
577 580
578 } 581 }
579 -  
580 - 582 +
  583 + $scope.$on('annotationToolEvent', function (event, data) {
  584 +
  585 + $('#editstylebackgroundcolor .minicolors >.minicolors-swatch > .minicolors-swatch-color').css("background-color", "rgb(255,255,255)")
  586 + $('#editstylebackgroundcolor .minicolors >.minicolors-panel > .minicolors-grid >.minicolors-picker').css({ "top": "145px", "left": "4px" });
  587 + $('#outlineColor .minicolors >.minicolors-swatch > .minicolors-swatch-color').css("background-color", "rgb(0,0,0)")
  588 + $('#outlineColor .minicolors >.minicolors-panel > .minicolors-grid >.minicolors-picker').css({ "top": "145px", "left": "4px" });
  589 +
  590 + $("#canvas").css("display", "block");
  591 + $("#canvasPaint").css("display", "block");
  592 +
  593 + $rootScope.BindCanvasDrawingListners();
  594 + // $rootScope.FreeStylePaint();
  595 + });
581 596
582 }] 597 }]
583 598
400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js
  View file @db2cdb5
@@ -2573,7 +2573,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo @@ -2573,7 +2573,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
2573 2573
2574 2574
2575 if ($scope.isTransparencyActivated) { 2575 if ($scope.isTransparencyActivated) {
2576 - 2576 +
2577 //crete temp canavs to store the original data which will be used to chnange the transparency 2577 //crete temp canavs to store the original data which will be used to chnange the transparency
2578 if (document.getElementById('tempCanvas') != null) { 2578 if (document.getElementById('tempCanvas') != null) {
2579 $('#tempCanvas').remove(); 2579 $('#tempCanvas').remove();
@@ -2598,46 +2598,48 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo @@ -2598,46 +2598,48 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
2598 2598
2599 2599
2600 var tCanvas = document.getElementById('transparencyCanvas'); 2600 var tCanvas = document.getElementById('transparencyCanvas');
2601 - var tCanvasContext = tCanvas.getContext('2d'); 2601 +
  2602 + var tCanvasContext = tCanvas.getContext('2d');
2602 2603
2603 - var tCanvasHeight = parseInt((tCanvas.style.height).replace('px', '')); 2604 + var tCanvasHeight = parseInt((tCanvas.style.height).replace('px', ''));
2604 2605
2605 - var tCanvasWidth = parseInt((tCanvas.style.width).replace('px', '')); 2606 + var tCanvasWidth = parseInt((tCanvas.style.width).replace('px', ''));
2606 2607
2607 2608
2608 - // var tCanvas = document.getElementById('transparencyCanvas');  
2609 - if (tCanvas != null) {  
2610 - clearTransCanvas();  
2611 - }  
2612 - var TransparencyBoxStartX = parseInt((tCanvas.style.left).replace('px', ''));  
2613 - var TransparencyEndX = parseInt((tCanvas.style.left).replace('px', '')) + parseInt((tCanvas.style.width.replace('px', '')));  
2614 - var TransparencyBoxStartY = parseInt((tCanvas.style.top).replace('px', ''));  
2615 - var TransparencyBoxEndY = parseInt((tCanvas.style.top).replace('px', '')) + parseInt((tCanvas.style.height).replace('px', ''));  
2616 - var transparencyBoxBottom = parseInt(TransparencyBoxStartY) + parseInt(tCanvasHeight);  
2617 - var transparencyBoxRight = parseInt(TransparencyBoxStartX) + parseInt(tCanvasWidth); 2609 + // var tCanvas = document.getElementById('transparencyCanvas');
  2610 + if (tCanvas != null) {
  2611 + clearTransCanvas();
  2612 + }
  2613 + var TransparencyBoxStartX = parseInt((tCanvas.style.left).replace('px', ''));
  2614 + var TransparencyEndX = parseInt((tCanvas.style.left).replace('px', '')) + parseInt((tCanvas.style.width.replace('px', '')));
  2615 + var TransparencyBoxStartY = parseInt((tCanvas.style.top).replace('px', ''));
  2616 + var TransparencyBoxEndY = parseInt((tCanvas.style.top).replace('px', '')) + parseInt((tCanvas.style.height).replace('px', ''));
  2617 + var transparencyBoxBottom = parseInt(TransparencyBoxStartY) + parseInt(tCanvasHeight);
  2618 + var transparencyBoxRight = parseInt(TransparencyBoxStartX) + parseInt(tCanvasWidth);
2618 2619
2619 - var BodyRegionDictionary = $rootScope.BodyRegionCordinatesData; 2620 + var BodyRegionDictionary = $rootScope.BodyRegionCordinatesData;
2620 2621
2621 - $.each(BodyRegionDictionary, function (index, value) {  
2622 - //debugger;  
2623 - // alert(' $.each(BodyRegionDictionary1') 2622 + $.each(BodyRegionDictionary, function (index, value) {
  2623 + //debugger;
  2624 + // alert(' $.each(BodyRegionDictionary1')
2624 2625
2625 - var bodyRegionRight = parseInt(value.X) + parseInt(value.Width);  
2626 - var bodyRegionBottom = parseInt(value.Y) + parseInt(value.Height); 2626 + var bodyRegionRight = parseInt(value.X) + parseInt(value.Width);
  2627 + var bodyRegionBottom = parseInt(value.Y) + parseInt(value.Height);
2627 2628
2628 2629
2629 - // alert(' $.each(BodyRegionDictionary3. bodyRegionRight: ' + bodyRegionRight + ', bodyRegionBottom: ' + bodyRegionBottom)  
2630 - if (TransparencyBoxStartX <= bodyRegionRight && value.X <= transparencyBoxRight && TransparencyBoxStartY <= bodyRegionBottom && value.Y <= transparencyBoxBottom) {  
2631 - //var transNumber = parseInt(document.getElementById("txtTransparencyChange").value);  
2632 - // debugger;  
2633 - $scope.layerNumber = parseInt(txtlayerNumber.value); 2630 + // alert(' $.each(BodyRegionDictionary3. bodyRegionRight: ' + bodyRegionRight + ', bodyRegionBottom: ' + bodyRegionBottom)
  2631 + if (TransparencyBoxStartX <= bodyRegionRight && value.X <= transparencyBoxRight && TransparencyBoxStartY <= bodyRegionBottom && value.Y <= transparencyBoxBottom) {
  2632 + //var transNumber = parseInt(document.getElementById("txtTransparencyChange").value);
  2633 + // debugger;
  2634 + $scope.layerNumber = parseInt(txtlayerNumber.value);
2634 2635
2635 2636
2636 - $scope.loadTransparencyImage(value.bodyRegionId, value.Height, value.Width, value.X, value.Y, value.IsMirror, TransparencyBoxStartX, transparencyBoxRight, TransparencyBoxStartY, transparencyBoxBottom, $scope, true, false);  
2637 - } 2637 + $scope.loadTransparencyImage(value.bodyRegionId, value.Height, value.Width, value.X, value.Y, value.IsMirror, TransparencyBoxStartX, transparencyBoxRight, TransparencyBoxStartY, transparencyBoxBottom, $scope, true, false);
  2638 + }
2638 2639
2639 2640
2640 - }) 2641 + })
  2642 +
2641 } 2643 }
2642 2644
2643 else { 2645 else {
@@ -6340,11 +6342,15 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo @@ -6340,11 +6342,15 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
6340 // $scope.currentY; 6342 // $scope.currentY;
6341 //----Annotation Toolbar: Jcanvas--- 6343 //----Annotation Toolbar: Jcanvas---
6342 6344
6343 - $scope.$on('annotationToolEvent', function (event, data) { 6345 + $rootScope.$on('annotationToolEvent', function (event, data) {
  6346 + $('#editstylebackgroundcolor .minicolors >.minicolors-swatch > .minicolors-swatch-color').css("background-color", "rgb(255,255,255)")
  6347 + $('#editstylebackgroundcolor .minicolors >.minicolors-panel > .minicolors-grid >.minicolors-picker').css({ "top": "145px", "left": "4px" });
  6348 + $('#outlineColor .minicolors >.minicolors-swatch > .minicolors-swatch-color').css("background-color", "rgb(0,0,0)")
  6349 + $('#outlineColor .minicolors >.minicolors-panel > .minicolors-grid >.minicolors-picker').css({ "top": "145px", "left": "4px" });
  6350 +
6344 $("#canvas").css("display", "block"); 6351 $("#canvas").css("display", "block");
6345 $("#canvasPaint").css("display", "block"); 6352 $("#canvasPaint").css("display", "block");
6346 -  
6347 - $scope.BindCanvasDrawingListners(); 6353 + $rootScope.BindCanvasDrawingListners();
6348 $rootScope.FreeStylePaint(); 6354 $rootScope.FreeStylePaint();
6349 }); 6355 });
6350 $scope.mousePs; 6356 $scope.mousePs;
@@ -6355,1118 +6361,6 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo @@ -6355,1118 +6361,6 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
6355 } 6361 }
6356 6362
6357 6363
6358 - $scope.clicked = true;  
6359 - $scope.offsetX1 = 0;  
6360 - $scope.offsetY1 = 0;  
6361 - $scope.x = 0;  
6362 - $scope.y = 0;  
6363 - $scope.BindCanvasDrawingListners = function (event) {  
6364 -  
6365 - $scope.clicked = true;  
6366 - // OnPaintCanvasMouseDown(event);  
6367 -  
6368 - var annotationCanvas = document.getElementById('canvas');  
6369 - if (annotationCanvas != null || annotationCanvas != undefined) {  
6370 - annotationCanvas.addEventListener('mousedown', $scope.OnPaintCanvasMouseDown, false);  
6371 - annotationCanvas.addEventListener('mouseup', $scope.OnPaintCanvasMouseUp, false);  
6372 - }  
6373 - // alert("doclick");  
6374 - };  
6375 -  
6376 -  
6377 -  
6378 -  
6379 - $scope.mousePressed = false;  
6380 - $scope.lastX; $scope.lastY;  
6381 - var ctx;  
6382 -  
6383 - $scope.OnPaintCanvasMouseDown = function (event) {  
6384 -  
6385 - var canvasElement = document.getElementById("canvas");  
6386 - var ctx = canvasElement.getContext("2d");  
6387 -  
6388 - // var x = event.clientX;  
6389 - // var y = event.clientY;  
6390 - $scope.offsetX1 = 0;  
6391 - $scope.offsetY1 = 0;  
6392 - $scope.offsetX1 = event.offsetX;  
6393 - $scope.offsetY1 = event.offsetY;  
6394 -  
6395 - ctx.clearRect(0, 0, 2277, 3248);  
6396 - $scope.clicked = true;  
6397 - }  
6398 -  
6399 -  
6400 - $rootScope.resetRect = 0;  
6401 - $rootScope.resetLine = 0;  
6402 - $rootScope.resetCircle = 0;  
6403 - $rootScope.resetArrow = 0;  
6404 - $rootScope.resetPin = 0;  
6405 - $rootScope.resetPinArc = 0;  
6406 - $rootScope.ObjectIndex = 0;  
6407 - $rootScope.Object1Index = 0;  
6408 - $rootScope.Object2Index = 0;  
6409 - $rootScope.resetText = 0;  
6410 - $rootScope.resetTextSave = 0;  
6411 - $rootScope.ObjectIndexSave = 0;  
6412 -  
6413 - var arrayRect = {};  
6414 -  
6415 -  
6416 - var storeLine = '';  
6417 - $rootScope.canvasLayerNameCollection1 = [];  
6418 - $scope.OnPaintCanvasMouseUp = function (event) {  
6419 -  
6420 - if (!$scope.clicked) {  
6421 - return;  
6422 - }  
6423 - $scope.clicked = false;  
6424 - $scope.x = 0;  
6425 - $scope.y = 0;  
6426 - $scope.x = parseInt(event.clientX - ($("#canvas").offset().left));  
6427 - $scope.y = parseInt(event.clientY - ($("#canvas").offset().top));  
6428 -  
6429 - var canvasElement = document.getElementById("canvas");  
6430 - var ctx = canvasElement.getContext("2d");  
6431 -  
6432 - var canvasElement1 = document.getElementById("canvasPaint");  
6433 - var ctx1 = canvasElement1.getContext("2d");  
6434 -  
6435 - /* if ($rootScope.shapeType == "FreeStylePaint") {  
6436 - var canvasPaint_zIndex = $('#canvasPaint').css("z-index");  
6437 - var canvas_zIndex = $('#canvas').css("z-index");  
6438 - if (canvas_zIndex > canvasPaint_zIndex) {  
6439 - canvasPaint_zIndex = parseInt(canvas_zIndex) + 1;  
6440 -  
6441 - }  
6442 - else {  
6443 - canvasPaint_zIndex = parseInt(canvasPaint_zIndex) + 1;  
6444 - }  
6445 - $('#canvasPaint').css("z-index", canvasPaint_zIndex);  
6446 - $('#canvasPaint').sketch({ defaultColor: "#000", defaultSize: 1 });  
6447 - }  
6448 - else {*/  
6449 - switch ($rootScope.shapeType) {  
6450 -  
6451 - case "cursor":  
6452 - // ctx.clearRect(0, 0, 2277, 3248);  
6453 - ctx.beginPath();  
6454 - ctx1.beginPath();  
6455 -  
6456 -  
6457 - break;  
6458 -  
6459 - case "Line":  
6460 -  
6461 - $rootScope.resetLine = $rootScope.ObjectIndex++;  
6462 - $('#canvas').addLayer({  
6463 - name: 'Line_' + $rootScope.resetLine,  
6464 - layer: true,  
6465 - type: 'line',  
6466 - draggable: true,  
6467 - strokeStyle: $rootScope.shapestyleborderColor,  
6468 - strokeWidth: $rootScope.shapestyleborderWidth,  
6469 - rounded: true,  
6470 - x1: $scope.offsetX1, y1: $scope.offsetY1,  
6471 - x2: $scope.x, y2: $scope.y,  
6472 -  
6473 - click: function (layer) {  
6474 - $rootScope.canvasLayerNameCollection = [];  
6475 - $rootScope.canvasLayerNameCollection.push(layer.name);  
6476 - $('#canvas').setLayer(layer.name, {  
6477 - handle: {  
6478 - type: 'arc',  
6479 - fillStyle: '#fff',  
6480 - strokeStyle: '#c33',  
6481 - strokeWidth: 2,  
6482 - radius: 3  
6483 - }  
6484 - }).drawLayers();  
6485 -  
6486 -  
6487 - },  
6488 - mouseout: function (layer) {  
6489 - $rootScope.canvasLayerNameCollection = [];  
6490 - $('#canvas').setLayer(layer.name, {  
6491 - handle: {  
6492 - type: 'arc',  
6493 - fillStyle: '#fff',  
6494 - strokeStyle: '#c33',  
6495 - strokeWidth: 0,  
6496 - radius: 0  
6497 - }  
6498 -  
6499 - }).drawLayers();  
6500 -  
6501 - },  
6502 - mouseover: function (layer) {  
6503 -  
6504 -  
6505 - $('#canvas').setLayer(layer.name, {  
6506 - handle: {  
6507 - type: 'arc',  
6508 - fillStyle: '#fff',  
6509 - strokeStyle: '#c33',  
6510 - strokeWidth: 2,  
6511 - radius: 3  
6512 - }  
6513 - }).drawLayers();  
6514 -  
6515 - }  
6516 -  
6517 - }).drawLayers();  
6518 - $('.btnCursor').trigger('click');  
6519 - $(".btn-annotation").removeClass("activebtncolor");  
6520 - $('.btnCursor').addClass('activebtncolor');  
6521 - break;  
6522 -  
6523 - case "Rectangle":  
6524 - $rootScope.resetRect = $rootScope.ObjectIndex++;  
6525 -  
6526 - $('#canvas').addLayer({  
6527 - layer: true,  
6528 - name: 'Rect_' + $rootScope.resetRect,  
6529 - fillStyle: $rootScope.shapestyleFillColor,  
6530 - type: 'rectangle',  
6531 - draggable: true,  
6532 - strokeStyle: $rootScope.shapestyleborderColor,  
6533 - opacity: $rootScope.shapestyleOpacity,  
6534 - strokeWidth: $rootScope.shapestyleborderWidth,  
6535 - x: $scope.offsetX1, y: $scope.offsetY1,  
6536 - width: $scope.x - $scope.offsetX1,  
6537 - height: $scope.y - $scope.offsetY1,  
6538 -  
6539 - resizeFromCenter: false,  
6540 -  
6541 - dblclick: function () {  
6542 - $rootScope.backOpacity();  
6543 -  
6544 - },  
6545 -  
6546 - click: function (layer) {  
6547 - $rootScope.canvasLayerNameCollection = [];  
6548 - $rootScope.canvasLayerNameCollection.push(layer.name);  
6549 - $('#canvas').setLayer(layer.name, {  
6550 - handle: {  
6551 - type: 'rectangle',  
6552 - fillStyle: '#fff',  
6553 - strokeStyle: '#c33',  
6554 - strokeWidth: 2,  
6555 - width: 5, height: 5,  
6556 - cornerRadius: 3  
6557 - }  
6558 - }).drawLayers();  
6559 -  
6560 - },  
6561 - mouseout: function (layer) {  
6562 - $rootScope.canvasLayerNameCollection = [];  
6563 - $('#canvas').setLayer(layer.name, {  
6564 - handle: {  
6565 - type: 'rectangle',  
6566 - fillStyle: 'pink',  
6567 - strokeStyle: 'yellow',  
6568 - strokeWidth: 0,  
6569 - width: 0, height: 0,  
6570 - cornerRadius: 0  
6571 - }  
6572 -  
6573 - }).drawLayers();  
6574 -  
6575 - },  
6576 - mouseover: function (layer) {  
6577 -  
6578 -  
6579 - $('#canvas').setLayer(layer.name, {  
6580 - handle: {  
6581 - type: 'rectangle',  
6582 - fillStyle: '#fff',  
6583 - strokeStyle: '#c33',  
6584 - strokeWidth: 2,  
6585 - width: 5, height: 5,  
6586 - cornerRadius: 3  
6587 - }  
6588 - }).drawLayers();  
6589 -  
6590 - }  
6591 - }).drawLayers();  
6592 -  
6593 -  
6594 -  
6595 - $('.btnCursor').trigger('click');  
6596 - $(".btn-annotation").removeClass("activebtncolor");  
6597 - $('.btnCursor').addClass('activebtncolor');  
6598 -  
6599 - break;  
6600 -  
6601 - case "Circle":  
6602 - // alert($rootScope.shapestyleborderWidth);  
6603 - $rootScope.resetCircle = $rootScope.ObjectIndex++;  
6604 - $('#canvas').addLayer({  
6605 - layer: true,  
6606 - name: 'Circle_' + $rootScope.resetCircle,  
6607 - type: 'ellipse',  
6608 - opacity: $rootScope.shapestyleOpacity,  
6609 - draggable: true,  
6610 - strokeStyle: $rootScope.shapestyleborderColor,  
6611 - strokeWidth: $rootScope.shapestyleborderWidth,  
6612 - fillStyle: $rootScope.shapestyleFillColor,  
6613 - x: $scope.offsetX1, y: $scope.offsetY1,  
6614 - width: ($scope.x - $scope.offsetX1) * 2, height: ($scope.y - $scope.offsetY1) * 2,  
6615 - // Place a handle at each side and each corner  
6616 - handlePlacement: 'both',  
6617 -  
6618 -  
6619 -  
6620 - click: function (layer) {  
6621 -  
6622 - $rootScope.canvasLayerNameCollection = [];  
6623 - $rootScope.canvasLayerNameCollection.push(layer.name);  
6624 - $('#canvas').setLayer(layer.name, {  
6625 - handle: {  
6626 - type: 'arc',  
6627 - fillStyle: '#fff',  
6628 - strokeStyle: '#c33',  
6629 - strokeWidth: 2,  
6630 - radius: 3  
6631 - }  
6632 - }).drawLayers();  
6633 -  
6634 - },  
6635 - mouseout: function (layer) {  
6636 - $rootScope.canvasLayerNameCollection = [];  
6637 -  
6638 - $('#canvas').setLayer(layer.name, {  
6639 - handle: {  
6640 - type: 'arc',  
6641 - fillStyle: '#fff',  
6642 - strokeStyle: '#c33',  
6643 - strokeWidth: 0,  
6644 - // width: 0, height: 0,  
6645 - radius: 0  
6646 - }  
6647 -  
6648 - }).drawLayers();  
6649 -  
6650 - },  
6651 - mouseover: function (layer) {  
6652 -  
6653 -  
6654 - $('#canvas').setLayer(layer.name, {  
6655 - handle: {  
6656 - type: 'arc',  
6657 - fillStyle: '#fff',  
6658 - strokeStyle: '#c33',  
6659 - strokeWidth: 2,  
6660 - // width: 5, height: 5,  
6661 - radius: 3  
6662 - }  
6663 - }).drawLayers();  
6664 -  
6665 - }  
6666 - }).drawLayers();  
6667 - $('.btnCursor').trigger('click');  
6668 - $(".btn-annotation").removeClass("activebtncolor");  
6669 - $('.btnCursor').addClass('activebtncolor');  
6670 - break;  
6671 - case "Arrow":  
6672 - $rootScope.resetArrow = $rootScope.ObjectIndex++;  
6673 -  
6674 - $('#canvas').drawLine({  
6675 - layer: true,  
6676 - name: 'Arrow_' + $rootScope.resetArrow,  
6677 - draggable: true,  
6678 - strokeStyle: $rootScope.shapestyleborderColor,  
6679 - strokeWidth: $rootScope.shapestyleborderWidth,  
6680 - rounded: true,  
6681 - startArrow: true,  
6682 - arrowRadius: 7,  
6683 - arrowAngle: 90,  
6684 - x1: $scope.offsetX1, y1: $scope.offsetY1,  
6685 - x2: $scope.x, y2: $scope.y,  
6686 -  
6687 - click: function (layer) {  
6688 - $rootScope.canvasLayerNameCollection = [];  
6689 - $rootScope.canvasLayerNameCollection.push(layer.name);  
6690 - $('#canvas').setLayer(layer.name, {  
6691 - handle: {  
6692 - type: 'arc',  
6693 - fillStyle: '#fff',  
6694 - strokeStyle: '#c33',  
6695 - strokeWidth: 2,  
6696 - // width: 5, height: 5,  
6697 - radius: 3  
6698 - }  
6699 - }).drawLayers();  
6700 - // $("#canvas").removeLayer(layer.name).drawLayers();  
6701 -  
6702 - },  
6703 - mouseout: function (layer) {  
6704 - $rootScope.canvasLayerNameCollection = [];  
6705 - $('#canvas').setLayer(layer.name, {  
6706 - handle: {  
6707 - type: 'arc',  
6708 - fillStyle: '#fff',  
6709 - strokeStyle: '#c33',  
6710 - strokeWidth: 0,  
6711 - // width: 0, height: 0,  
6712 - radius: 0  
6713 - }  
6714 -  
6715 - }).drawLayers();  
6716 -  
6717 - },  
6718 - mouseover: function (layer) {  
6719 -  
6720 -  
6721 - $('#canvas').setLayer(layer.name, {  
6722 - handle: {  
6723 - type: 'arc',  
6724 - fillStyle: '#fff',  
6725 - strokeStyle: '#c33',  
6726 - strokeWidth: 2,  
6727 - // width: 5, height: 5,  
6728 - radius: 3  
6729 - }  
6730 - }).drawLayers();  
6731 -  
6732 - }  
6733 -  
6734 - });  
6735 - $('.btnCursor').trigger('click');  
6736 - $(".btn-annotation").removeClass("activebtncolor");  
6737 - $('.btnCursor').addClass('activebtncolor');  
6738 -  
6739 - // $scope.resetRect += 1;  
6740 - break;  
6741 - case "Pin":  
6742 -  
6743 - $rootScope.resetPin = $rootScope.Object2Index++;  
6744 - $rootScope.resetPinArc = $rootScope.Object1Index++;  
6745 - var radial = $('canvas').createGradient({  
6746 - x1: 50, y1: 50,  
6747 - x2: 50, y2: 50,  
6748 - r1: 10, r2: 30,  
6749 - c1: 'rgba(100, 50, 0,0)',  
6750 - c2: 'grey'  
6751 - });  
6752 - $('#canvas').drawLine({  
6753 - draggable: true,  
6754 - layer: true,  
6755 - name: "Pin_" + $rootScope.resetPin,  
6756 - groups: ["Pin_" + $rootScope.resetPin],  
6757 - dragGroups: ["Pin_" + $rootScope.resetPin],  
6758 - strokeStyle: 'black',  
6759 - strokeWidth: 2,  
6760 - x1: $scope.offsetX1, y1: $scope.offsetY1,  
6761 - x2: $scope.x, y2: $scope.y,  
6762 -  
6763 - click: function (layer) {  
6764 -  
6765 - $rootScope.shapeTypePin = "Pin";  
6766 - $rootScope.canvasLayerNameCollection = [];  
6767 - var pinLine_layer = layer.name;  
6768 - var pinLine_layer_split = pinLine_layer.split("_");  
6769 - var pinArcName = "ArcPin_";  
6770 - var pinResult = pinArcName.concat(pinLine_layer_split[1]);  
6771 -  
6772 - $rootScope.canvasLayerNameCollection.push({ pinName: layer.name, ArcName: pinResult });  
6773 -  
6774 - $('#canvas').setLayer(layer.name, {  
6775 - handle: {  
6776 - type: 'arc',  
6777 - fillStyle: '#fff',  
6778 - strokeStyle: '#c33',  
6779 - strokeWidth: 2,  
6780 - // width: 5, height: 5,  
6781 - radius: 3  
6782 - }  
6783 - }).drawLayers();  
6784 -  
6785 -  
6786 - },  
6787 - mouseout: function (layer) {  
6788 -  
6789 - $rootScope.canvasLayerNameCollection = [];  
6790 - $('#canvas').setLayer(layer.name, {  
6791 - handle: {  
6792 - type: 'arc',  
6793 - fillStyle: '#fff',  
6794 - strokeStyle: '#c33',  
6795 - strokeWidth: 0,  
6796 - // width: 0, height: 0,  
6797 - radius: 0  
6798 - }  
6799 -  
6800 - }).drawLayers();  
6801 -  
6802 - },  
6803 - mouseover: function (layer) {  
6804 -  
6805 -  
6806 - $('#canvas').setLayer(layer.name, {  
6807 - handle: {  
6808 - type: 'arc',  
6809 - fillStyle: '#fff',  
6810 - strokeStyle: '#c33',  
6811 - strokeWidth: 2,  
6812 - // width: 5, height: 5,  
6813 - radius: 3  
6814 - }  
6815 - }).drawLayers();  
6816 -  
6817 - }  
6818 - }).drawArc({  
6819 - draggable: true,  
6820 - name: "ArcPin_" + $rootScope.resetPinArc,  
6821 - // name: "Pin_" + $rootScope.resetPin,  
6822 - layer: true,  
6823 - groups: ["Pin_" + $rootScope.resetPin],  
6824 - dragGroups: ["Pin_" + $rootScope.resetPin],  
6825 - strokeStyle: 'grey',  
6826 - strokeWidth: 2,  
6827 - fillStyle: radial,  
6828 - x: $scope.offsetX1, y: $scope.offsetY1,  
6829 - radius: 5,  
6830 - //handle: {  
6831 - // type: 'arc',  
6832 - // fillStyle: '#fff',  
6833 - // strokeStyle: '#c33',  
6834 - // strokeWidth: 2,  
6835 - // radius: 3  
6836 - //},  
6837 - add: function (layer) {  
6838 -  
6839 - $rootScope.resetPinArc = layer.name;  
6840 - // $scope.arr = [];  
6841 -  
6842 -  
6843 - },  
6844 -  
6845 - }).drawLayers();  
6846 - $('.btnCursor').trigger('click');  
6847 - $(".btn-annotation").removeClass("activebtncolor");  
6848 - $('.btnCursor').addClass('activebtncolor');  
6849 - break;  
6850 - case "TextArea":  
6851 - $rootScope.IsTextAlreadySave = false;  
6852 - $("#text_area").val('');  
6853 - // Draw text  
6854 - $rootScope.resetTextRect = $rootScope.ObjectIndex++;  
6855 - $rootScope.resetText = $rootScope.ObjectIndex++;  
6856 - $('#canvas').drawText({  
6857 - layer: true,  
6858 - draggable: true,  
6859 - // opacity: $rootScope.shapestyleOpacity,  
6860 - name: 'TextArea_' + $rootScope.resetText,  
6861 - groups: ['TextArea_' + $rootScope.resetText],  
6862 - dragGroups: ['TextArea_' + $rootScope.resetText],  
6863 - fillStyle: '#36c',  
6864 - strokeWidth: 0,  
6865 - x: $scope.offsetX1, y: $scope.offsetY1,  
6866 - fontSize: '14pt',  
6867 - align: "left",  
6868 - fontFamily: 'Verdana, sans-serif',  
6869 - text: ''  
6870 -  
6871 - })  
6872 - // Draw rect as wide as the text  
6873 - .drawRect({  
6874 - layer: true,  
6875 - name: "TextRect_" + $rootScope.resetTextRect,  
6876 - dragGroups: ['shapes'],  
6877 - opacity: $rootScope.shapestyleOpacity,  
6878 - strokeStyle: $rootScope.shapestyleborderColor,  
6879 - strokeWidth: $rootScope.shapestyleborderWidth,  
6880 - fillStyle: $rootScope.shapestyleFillColor,  
6881 - x: $scope.offsetX1, y: $scope.offsetY1,  
6882 - width: $scope.x - $scope.offsetX1,  
6883 - height: $scope.y - $scope.offsetY1,  
6884 - add: function (layer) {  
6885 -  
6886 - $rootScope.rectDimension.push({ width: layer.width, height: layer.height, x: layer.x, y: layer.y });  
6887 -  
6888 - },  
6889 - click: function (layer) {  
6890 -  
6891 - $rootScope.canvasLayerNameCollection = [];  
6892 - $rootScope.canvasLayerNameCollection.push(layer.name);  
6893 - $('#canvas').setLayer(layer.name, {  
6894 - handle: {  
6895 - type: 'rectangle',  
6896 - fillStyle: '#fff',  
6897 - strokeStyle: '#c33',  
6898 - strokeWidth: 2,  
6899 - width: 5, height: 5,  
6900 - cornerRadius: 3  
6901 - }  
6902 - }).drawLayers();  
6903 -  
6904 - },  
6905 - dblclick: function (layer) {  
6906 -  
6907 -  
6908 - $rootScope.rectDimension.push({ width: layer.width, height: layer.height, x: layer.x, y: layer.y });  
6909 - $("#annotationTextModal").modal("toggle");  
6910 -  
6911 - $("#text_area").val('');  
6912 - $("#text_area").css({ " font-family": "'Verdana, sans-serif'", "font-size": "14px", "font-weight": "normal", "font-style": "normal", "color": "#000", "text-align": "left", "text-decoration": "none" });  
6913 - $("#font-color .minicolors .minicolors-swatch .minicolors-swatch-color").css({ "background-color": "#000000" });  
6914 - // $("#font-color .minicolors .minicolors-swatch .minicolors-swatch-color").addClass("ActiveDefaultColorAnnotation");  
6915 -  
6916 - $("#text-italic").removeClass("ActiveFormattingButtonClass");  
6917 -  
6918 - $("#text-bold").removeClass("ActiveFormattingButtonClass");  
6919 -  
6920 - $("#text-underline").removeClass("ActiveFormattingButtonClass");  
6921 -  
6922 - $("#text-left").removeClass("ActiveFormattingButtonClass");  
6923 -  
6924 - $("#text-right").removeClass("ActiveFormattingButtonClass");  
6925 -  
6926 - $("#text-center").removeClass("ActiveFormattingButtonClass");  
6927 -  
6928 - },  
6929 - mouseout: function (layer) {  
6930 - $rootScope.canvasLayerNameCollection = [];  
6931 - $('#canvas').setLayer(layer.name, {  
6932 - handle: {  
6933 - type: 'rectangle',  
6934 - fillStyle: 'pink',  
6935 - strokeStyle: 'yellow',  
6936 - strokeWidth: 0,  
6937 - width: 0, height: 0,  
6938 - cornerRadius: 0  
6939 - }  
6940 -  
6941 - }).drawLayers();  
6942 -  
6943 - },  
6944 - mouseover: function (layer) {  
6945 -  
6946 - $('#canvas').setLayer(layer.name, {  
6947 - handle: {  
6948 - type: 'rectangle',  
6949 - fillStyle: '#fff',  
6950 - strokeStyle: '#c33',  
6951 - strokeWidth: 2,  
6952 - width: 5, height: 5,  
6953 - cornerRadius: 3  
6954 - }  
6955 - }).drawLayers();  
6956 -  
6957 - }  
6958 - });  
6959 -  
6960 -  
6961 - $("#annotationTextModal").modal("toggle");  
6962 - $('.btnCursor').trigger('click');  
6963 - $("#font-color .minicolors .minicolors-swatch .minicolors-swatch-color").css({ "background-color": "#000000" });  
6964 - // $("#font-color .minicolors .minicolors-swatch .minicolors-swatch-color").addClass("ActiveDefaultColorAnnotation");  
6965 - $("#text_area").val('');  
6966 -  
6967 - $("#text_area").css({ " font-family": 'Verdana, sans-serif', "font-size": "14px", "font-weight": "normal", "font-style": "normal", "color": "#000", "text-align": "left", "text-decoration": "none" });  
6968 -  
6969 - $("#text-italic").removeClass("ActiveFormattingButtonClass");  
6970 -  
6971 - $("#text-bold").removeClass("ActiveFormattingButtonClass");  
6972 -  
6973 - $("#text-underline").removeClass("ActiveFormattingButtonClass");  
6974 -  
6975 - $("#text-left").removeClass("ActiveFormattingButtonClass");  
6976 -  
6977 - $("#text-right").removeClass("ActiveFormattingButtonClass");  
6978 -  
6979 - $("#text-center").removeClass("ActiveFormattingButtonClass");  
6980 -  
6981 - $(".btn-annotation").removeClass("activebtncolor");  
6982 -  
6983 - $('.btnCursor').addClass('activebtncolor');  
6984 - break;  
6985 -  
6986 - case "DrawPolygon":  
6987 -  
6988 - break;  
6989 -  
6990 - }  
6991 - //}  
6992 -  
6993 - }  
6994 -  
6995 -  
6996 - //-- TextArea functionality of Annotation toolbar  
6997 -  
6998 - $rootScope.fontSizes;  
6999 - $rootScope.fontWeight;  
7000 - $rootScope.fontStyle;  
7001 - $rootScope.textAlignmt;  
7002 - $rootScope.fontColor;  
7003 - $rootScope.underlineText;  
7004 - $rootScope.textArea;  
7005 - $rootScope.fontFamily;  
7006 - $rootScope.TextPropertyArray = [];  
7007 - $rootScope.modifySavedText = [];  
7008 - $rootScope.TextRectangleArr = [];  
7009 - $rootScope.rectDimension = [];  
7010 -  
7011 -  
7012 - // will refactor this code later  
7013 -  
7014 -  
7015 - $rootScope.saveText = function () {  
7016 -  
7017 - // this part will work first time when save button will be clicked  
7018 - if ($rootScope.IsTextAlreadySave == false) {  
7019 - // getting textarea style properties  
7020 - $rootScope.fontSizes = $("#text_area").css("font-size");  
7021 - $rootScope.fontWeight = $("#text_area").css("font-weight");  
7022 - $rootScope.fontStyle = $("#text_area").css("font-style");  
7023 - $rootScope.textAlignmt = $("#text_area").css("text-align");  
7024 - $rootScope.fontColor = $("#text_area").css("color");  
7025 - $rootScope.fontFamily = $("#text_area").css("font-family");  
7026 - $rootScope.underlineText = $("#text_area").css("text-decoration");  
7027 - $rootScope.textArea = $("#text_area").val();  
7028 -  
7029 - // deleting previous text area  
7030 -  
7031 - $("#canvas").removeLayer('TextArea_' + $rootScope.resetText).drawLayers();  
7032 - $("#canvas").removeLayer("TextRect_" + $rootScope.resetTextRect).drawLayers();  
7033 -  
7034 - // Text After Saving in Rectangle  
7035 - $('#canvas').drawText({  
7036 - layer: true,  
7037 - draggable: true,  
7038 - name: 'TextAreaNew_' + $rootScope.resetText,  
7039 - groups: ['TextAreaNew_' + $rootScope.resetText],  
7040 - dragGroups: ['TextAreaNew_' + $rootScope.resetText],  
7041 - fillStyle: $rootScope.fontColor,  
7042 - fontStyle: $rootScope.fontWeight + " " + $rootScope.fontStyle,  
7043 - fontSize: $rootScope.fontSizes,  
7044 - fontFamily: $rootScope.fontFamily,  
7045 - align: $rootScope.textAlignmt,  
7046 - strokeWidth: 0,  
7047 - text: $rootScope.textArea,  
7048 - x: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].x, y: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].y,  
7049 - maxWidth: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].width,  
7050 - maxHeight: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].height,  
7051 - add: function (layer) {  
7052 - // alert(layer.maxWidth);  
7053 - $rootScope.TextPropertyArray.push({ Text1: '', Align: '', FontColor: '', FontSize: '', FontStyle: '', FontFamily: '' });  
7054 - $rootScope.TextPropertyArray.push({ Text1: layer.text, Align: layer.align, FontColor: layer.fillStyle, FontSize: layer.fontSize, FontStyle: layer.fontStyle, FontFamily: layer.fontFamily, TextDecoration: $rootScope.underlineText });  
7055 - }  
7056 - })  
7057 - // Draw rectangle  
7058 - .drawRect({  
7059 - name: 'TextArea1_' + $rootScope.resetText,  
7060 - layer: true,  
7061 - draggable: true,  
7062 - groups: ['TextAreaNew_' + $rootScope.resetText],  
7063 - dragGroups: ['TextAreaNew_' + $rootScope.resetText],  
7064 - opacity: $rootScope.shapestyleOpacity,  
7065 - strokeStyle: $rootScope.shapestyleborderColor,  
7066 - strokeWidth: $rootScope.shapestyleborderWidth,  
7067 - x: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].x, y: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].y,  
7068 - width: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].width,  
7069 - height: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].height,  
7070 - click: function (layer) {  
7071 - $rootScope.shapeTypeText = "textAreaRect";  
7072 -  
7073 - var layerNameSplit = layer.name;  
7074 - var splitedName = layerNameSplit.split("_");  
7075 - var textValName = "TextAreaNew_";  
7076 - var concatinateResult = textValName.concat(splitedName[1]);  
7077 - $rootScope.canvasLayerNameCollection = [];  
7078 - $rootScope.canvasLayerNameCollection.push({ textareaRectangle: layer.name, textareaString: concatinateResult });  
7079 - $('#canvas').setLayer(layer.name, {  
7080 - handle: {  
7081 - type: 'rectangle',  
7082 - fillStyle: '#fff',  
7083 - strokeStyle: '#c33',  
7084 - strokeWidth: 2,  
7085 - width: 5, height: 5,  
7086 - cornerRadius: 3  
7087 - }  
7088 - }).drawLayers();  
7089 - },  
7090 - dblclick: function (layer) {  
7091 -  
7092 - $rootScope.isTextAreaClosedButtonActive = false;  
7093 - $rootScope.IsTextAlreadySave = true;  
7094 -  
7095 - var _rectLayerOnSave = layer.name;  
7096 - var _rectLayerOnSaveSplit = _rectLayerOnSave.split("_");  
7097 - var TextAreaRectName = "TextAreaNew_";  
7098 - var TextAreaRectNameConcatenated = TextAreaRectName.concat(_rectLayerOnSaveSplit[1]);  
7099 -  
7100 - $rootScope.layerNameArr = layer.name;  
7101 - $rootScope.rectTextArr = TextAreaRectNameConcatenated;  
7102 - // $rootScope.modifySavedText.push({ TextName: '', RectText: ''});  
7103 - // $rootScope.modifySavedText.push({ TextName: layer.name, RectText: TextAreaRectNameConcatenated });  
7104 -  
7105 - $rootScope.rectDimension.push({ width: layer.width, height: layer.height, x: layer.x, y: layer.y });  
7106 - var _rectLayerOnSaveSplitInt;  
7107 - //if (_rectLayerOnSaveSplit[1] >= 3)  
7108 - // _rectLayerOnSaveSplitInt = parseInt(_rectLayerOnSaveSplit[1] - 2);  
7109 - //else  
7110 - // _rectLayerOnSaveSplitInt = parseInt(_rectLayerOnSaveSplit[1]);  
7111 -  
7112 - _rectLayerOnSaveSplitInt = parseInt(_rectLayerOnSaveSplit[1]);  
7113 -  
7114 - var b = $rootScope.TextPropertyArray[_rectLayerOnSaveSplitInt].Text1;  
7115 - $("#text_area").val(b);  
7116 - var fontStyleProp = $rootScope.TextPropertyArray[_rectLayerOnSaveSplitInt].FontStyle;  
7117 - var fontWeightProp = fontStyleProp.split(" ");  
7118 -  
7119 - $("#text_area").css("font-size", $rootScope.TextPropertyArray[_rectLayerOnSaveSplitInt].FontSize);  
7120 - $("#text_area").css("font-weight", fontWeightProp[0]);  
7121 - $("#text_area").css("font-style", fontWeightProp[1]);  
7122 - $("#text_area").css("text-align", $rootScope.TextPropertyArray[_rectLayerOnSaveSplitInt].Align);  
7123 - $("#text_area").css("color", $rootScope.TextPropertyArray[_rectLayerOnSaveSplitInt].FontColor);  
7124 - $("#text_area").css("font-family", $rootScope.TextPropertyArray[_rectLayerOnSaveSplitInt].FontFamily);  
7125 - $("#text_area").css("text-decoration", $rootScope.TextPropertyArray[_rectLayerOnSaveSplitInt].TextDecoration);  
7126 - $("#font-color .minicolors .minicolors-swatch .minicolors-swatch-color").css({ "background-color": $rootScope.TextPropertyArray[_rectLayerOnSaveSplitInt].FontColor });  
7127 - // $(".ActiveDefaultColorAnnotation").css({ "background-color": $rootScope.TextPropertyArray[_rectLayerOnSaveSplitInt].FontColor + "!important" });  
7128 - // $("#font-color .minicolors .minicolors-swatch .minicolors-swatch-color").addClass("ActiveDefaultColorAnnotation");  
7129 -  
7130 -  
7131 - //adding text text decoration active class in text edit pop-up  
7132 -  
7133 - if ($rootScope.TextPropertyArray[_rectLayerOnSaveSplitInt].TextDecoration == "underline") {  
7134 -  
7135 - $("#text-underline").addClass("ActiveFormattingButtonClass");  
7136 -  
7137 - }  
7138 -  
7139 - else {  
7140 -  
7141 - $("#text-underline").removeClass("ActiveFormattingButtonClass");  
7142 -  
7143 - }  
7144 -  
7145 -  
7146 -  
7147 - //adding text font weight active class in text edit pop-up  
7148 -  
7149 - if (fontWeightProp[0] == 700) {  
7150 -  
7151 -  
7152 -  
7153 - $("#text-bold").addClass("ActiveFormattingButtonClass");  
7154 -  
7155 - }  
7156 -  
7157 - else {  
7158 -  
7159 - $("#text-bold").removeClass("ActiveFormattingButtonClass");  
7160 -  
7161 - }  
7162 -  
7163 - //adding text font style active class in text edit pop-up  
7164 -  
7165 - if (fontWeightProp[1] == "italic") {  
7166 -  
7167 -  
7168 - $("#text-italic").addClass("ActiveFormattingButtonClass");  
7169 - }  
7170 - else {  
7171 - $("#text-italic").removeClass("ActiveFormattingButtonClass");  
7172 -  
7173 -  
7174 - }  
7175 -  
7176 - //adding text alignment active class in text edit pop-up  
7177 -  
7178 - if ($rootScope.TextPropertyArray[_rectLayerOnSaveSplitInt].Align == "left") {  
7179 -  
7180 - $("#text-right").removeClass("ActiveFormattingButtonClass");  
7181 -  
7182 - $("#text-center").removeClass("ActiveFormattingButtonClass")  
7183 -  
7184 - $("#text-left").addClass("ActiveFormattingButtonClass");  
7185 -  
7186 - }  
7187 -  
7188 - else if ($rootScope.TextPropertyArray[_rectLayerOnSaveSplitInt].Align == "right") {  
7189 -  
7190 -  
7191 -  
7192 - $("#text-center").removeClass("ActiveFormattingButtonClass")  
7193 -  
7194 - $("#text-left").removeClass("ActiveFormattingButtonClass");  
7195 -  
7196 - $("#text-right").addClass("ActiveFormattingButtonClass");  
7197 -  
7198 -  
7199 -  
7200 - }  
7201 -  
7202 - else if ($rootScope.TextPropertyArray[_rectLayerOnSaveSplitInt].Align == "center") {  
7203 -  
7204 - $("#text-left").removeClass("ActiveFormattingButtonClass");  
7205 -  
7206 - $("#text-right").removeClass("ActiveFormattingButtonClass");  
7207 -  
7208 - $("#text-center").addClass("ActiveFormattingButtonClass");  
7209 -  
7210 -  
7211 -  
7212 - }  
7213 -  
7214 -  
7215 - _rectLayerOnSaveSplitInt = ''; b = '';  
7216 - $("#annotationTextModal").modal("toggle");  
7217 - },  
7218 - mouseout: function (layer) {  
7219 - $rootScope.canvasLayerNameCollection = [];  
7220 - $('#canvas').setLayer(layer.name, {  
7221 - handle: {  
7222 - type: 'rectangle',  
7223 - fillStyle: 'pink',  
7224 - strokeStyle: 'yellow',  
7225 - strokeWidth: 0,  
7226 - width: 0, height: 0,  
7227 - cornerRadius: 0  
7228 - }  
7229 - }).drawLayers();  
7230 - },  
7231 - mouseover: function (layer) {  
7232 - $('#canvas').setLayer(layer.name, {  
7233 - handle: {  
7234 - type: 'rectangle',  
7235 - fillStyle: '#fff',  
7236 - strokeStyle: '#c33',  
7237 - strokeWidth: 2,  
7238 - width: 5, height: 5,  
7239 - cornerRadius: 3  
7240 - }  
7241 - }).drawLayers();  
7242 -  
7243 - }  
7244 - });  
7245 - $("#text_area").val('');  
7246 - $("#text_area").css({ " font-family": "'Verdana, sans-serif'", "font-size": "14px", "font-weight": "normal", "font-style": "normal", "color": "#000", "text-align": "left", "text-decoration": "none" });  
7247 -  
7248 - $("#font-color .minicolors .minicolors-swatch .minicolors-swatch-color").css({ "background-color": "#000000" });  
7249 - $("#text-italic").removeClass("ActiveFormattingButtonClass");  
7250 -  
7251 - $("#text-bold").removeClass("ActiveFormattingButtonClass");  
7252 -  
7253 - $("#text-underline").removeClass("ActiveFormattingButtonClass");  
7254 -  
7255 - $("#text-left").removeClass("ActiveFormattingButtonClass");  
7256 -  
7257 - $("#text-right").removeClass("ActiveFormattingButtonClass");  
7258 -  
7259 - $("#text-center").removeClass("ActiveFormattingButtonClass");  
7260 -  
7261 -  
7262 - }  
7263 -  
7264 - // this part will work second time when save button will be clicked  
7265 - else {  
7266 -  
7267 - // getting textarea style properties  
7268 - var _modifiedText = $("#text_area").val();  
7269 - var _modifiedFontSize = $("#text_area").css("font-size");  
7270 - var _modifiedFontWeight = $("#text_area").css("font-weight");  
7271 - var _modifiedFontStyle = $("#text_area").css("font-style");  
7272 - var _modifiedTextAlign = $("#text_area").css("text-align");  
7273 - var _modifiedFontColor = $("#text_area").css("color");  
7274 - var _modifiedFontFamily = $("#text_area").css("font-family");  
7275 - var _modifiedFontDecoration = $("#text_area").css("text-decoration");  
7276 -  
7277 - // deleting previous textarea  
7278 -  
7279 - // var a = $rootScope.modifySavedTextIndexNumber;  
7280 - // alert(a);  
7281 - // alert($rootScope.modifySavedText.length);  
7282 - // alert($rootScope.modifySavedText[a].RectText);  
7283 -  
7284 - $("#canvas").removeLayer($rootScope.layerNameArr).drawLayers();  
7285 - $("#canvas").removeLayer($rootScope.rectTextArr).drawLayers();  
7286 -  
7287 - $rootScope.resetTextRectSave = $rootScope.ObjectIndexSave++;  
7288 - $rootScope.resetTextSave = $rootScope.ObjectIndexSave++;  
7289 -  
7290 - // generating new text area  
7291 - $('#canvas').drawText({  
7292 - layer: true,  
7293 - draggable: true,  
7294 - name: 'TextAreaAfterEdit_' + $rootScope.resetTextSave,  
7295 - groups: ['TextAreaAfterEdit_' + $rootScope.resetTextSave],  
7296 - dragGroups: ['TextAreaAfterEdit_' + $rootScope.resetTextSave],  
7297 - fillStyle: _modifiedFontColor,  
7298 - fontStyle: _modifiedFontWeight + " " + _modifiedFontStyle,  
7299 - fontSize: _modifiedFontSize,  
7300 - fontFamily: _modifiedFontFamily,  
7301 - align: _modifiedTextAlign,  
7302 - strokeWidth: 0,  
7303 - text: _modifiedText,  
7304 - x: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].x, y: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].y,  
7305 - maxWidth: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].width,  
7306 - maxHeight: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].height  
7307 -  
7308 - })  
7309 - // Draw rect as wide as the text  
7310 - .drawRect({  
7311 - name: 'TextAreaAfterEditRect_' + $rootScope.resetTextSave,  
7312 - layer: true,  
7313 - draggable: true,  
7314 - groups: ['TextAreaAfterEdit_' + $rootScope.resetTextSave],  
7315 - dragGroups: ['TextAreaAfterEdit_' + $rootScope.resetTextSave],  
7316 - opacity: $rootScope.shapestyleOpacity,  
7317 - strokeStyle: $rootScope.shapestyleborderColor,  
7318 - strokeWidth: $rootScope.shapestyleborderWidth,  
7319 - x: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].x, y: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].y,  
7320 - width: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].width,  
7321 - height: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].height,  
7322 - click: function (layer) {  
7323 - $rootScope.shapeTypeText = "textAreaRect";  
7324 - var layerNameSplit = layer.name;  
7325 - var splitedName = layerNameSplit.split("_");  
7326 - var textValName = "TextAreaAfterEdit_";  
7327 - var concatinateResult = textValName.concat(splitedName[1]);  
7328 - $rootScope.canvasLayerNameCollection = [];  
7329 - $rootScope.canvasLayerNameCollection.push({ textareaRectangle: layer.name, textareaString: concatinateResult });  
7330 -  
7331 - $('#canvas').setLayer(layer.name, {  
7332 - handle: {  
7333 - type: 'rectangle',  
7334 - fillStyle: '#fff',  
7335 - strokeStyle: '#c33',  
7336 - strokeWidth: 2,  
7337 - width: 5, height: 5,  
7338 - cornerRadius: 3  
7339 - }  
7340 - }).drawLayers();  
7341 -  
7342 - },  
7343 - dblclick: function (layer) {  
7344 -  
7345 - $rootScope.isTextAreaClosedButtonActive = false;  
7346 - $rootScope.IsTextAlreadySave = true;  
7347 - var _rectLayerOnSave = layer.name;  
7348 - var _rectLayerOnSaveSplit = _rectLayerOnSave.split("_");  
7349 - var RectNameAfterEdit = "TextAreaAfterEdit_";  
7350 - var RectNameAfterEditResult = RectNameAfterEdit.concat(_rectLayerOnSaveSplit[1]);  
7351 - $rootScope.modifySavedTextIndexNumber = _rectLayerOnSaveSplit[1];  
7352 -  
7353 -  
7354 -  
7355 - // $rootScope.modifySavedText.push({ TextName: '', RectText: '' });  
7356 - // $rootScope.modifySavedText.push({ TextName: layer.name, RectText: RectNameAfterEditResult });  
7357 -  
7358 - $rootScope.layerNameArr = layer.name;  
7359 - $rootScope.rectTextArr = RectNameAfterEditResult;  
7360 -  
7361 -  
7362 - $rootScope.rectDimension.push({ width: layer.width, height: layer.height, x: layer.x, y: layer.y });  
7363 - $("#text_area").val(_modifiedText);  
7364 - $("#text_area").css("font-size", _modifiedFontSize);  
7365 - $("#text_area").css("font-weight", _modifiedFontWeight);  
7366 - $("#text_area").css("font-style", _modifiedFontStyle);  
7367 - $("#text_area").css("text-align", _modifiedTextAlign);  
7368 - $("#text_area").css("color", _modifiedFontColor);  
7369 - $("#text_area").css("font-family", _modifiedFontFamily);  
7370 - $("#text_area").css("text-decoration", _modifiedFontDecoration);  
7371 - $("#font-color .minicolors .minicolors-swatch .minicolors-swatch-color").css({ "background-color": _modifiedFontColor });  
7372 - // $(".ActiveDefaultColorAnnotation").css({ "background-color": _modifiedFontColor + "!important" });  
7373 - // $("#font-color .minicolors .minicolors-swatch .minicolors-swatch-color").addClass("ActiveDefaultColorAnnotation");  
7374 -  
7375 - //adding text text decoration active class in text edit pop-up  
7376 - if (_modifiedFontDecoration == "underline") {  
7377 - $("#text-underline").addClass("ActiveFormattingButtonClass");  
7378 - }  
7379 - else {  
7380 - $("#text-underline").removeClass("ActiveFormattingButtonClass");  
7381 - }  
7382 -  
7383 - //adding text font weight active class in text edit pop-up  
7384 - if (_modifiedFontWeight == 700) {  
7385 -  
7386 - $("#text-bold").addClass("ActiveFormattingButtonClass");  
7387 - }  
7388 - else {  
7389 -  
7390 - $("#text-bold").removeClass("ActiveFormattingButtonClass");  
7391 -  
7392 - }  
7393 -  
7394 - //adding text font style active class in text edit pop-up  
7395 - if (_modifiedFontStyle == "italic") {  
7396 -  
7397 - $("#text-italic").addClass("ActiveFormattingButtonClass");  
7398 - }  
7399 - else {  
7400 - $("#text-italic").removeClass("ActiveFormattingButtonClass");  
7401 -  
7402 - }  
7403 -  
7404 - //adding text alignment active class in text edit pop-up  
7405 - if (_modifiedTextAlign == "left") {  
7406 - $("#text-right").removeClass("ActiveFormattingButtonClass");  
7407 - $("#text-center").removeClass("ActiveFormattingButtonClass")  
7408 - $("#text-left").addClass("ActiveFormattingButtonClass");  
7409 - }  
7410 - else if (_modifiedTextAlign == "right") {  
7411 -  
7412 - $("#text-center").removeClass("ActiveFormattingButtonClass")  
7413 - $("#text-left").removeClass("ActiveFormattingButtonClass");  
7414 - $("#text-right").addClass("ActiveFormattingButtonClass");  
7415 -  
7416 - }  
7417 - else if (_modifiedTextAlign == "center") {  
7418 - $("#text-left").removeClass("ActiveFormattingButtonClass");  
7419 - $("#text-right").removeClass("ActiveFormattingButtonClass");  
7420 - $("#text-center").addClass("ActiveFormattingButtonClass");  
7421 -  
7422 - }  
7423 -  
7424 -  
7425 - $("#annotationTextModal").modal("toggle");  
7426 - },  
7427 - mouseout: function (layer) {  
7428 - $rootScope.canvasLayerNameCollection = [];  
7429 - $('#canvas').setLayer(layer.name, {  
7430 - handle: {  
7431 - type: 'rectangle',  
7432 - fillStyle: 'pink',  
7433 - strokeStyle: 'yellow',  
7434 - strokeWidth: 0,  
7435 - width: 0, height: 0,  
7436 - cornerRadius: 0  
7437 - }  
7438 - }).drawLayers();  
7439 - },  
7440 - mouseover: function (layer) {  
7441 - $('#canvas').setLayer(layer.name, {  
7442 - handle: {  
7443 - type: 'rectangle',  
7444 - fillStyle: '#fff',  
7445 - strokeStyle: '#c33',  
7446 - strokeWidth: 2,  
7447 - width: 5, height: 5,  
7448 - cornerRadius: 3  
7449 - }  
7450 - }).drawLayers();  
7451 -  
7452 - }  
7453 - });  
7454 - // $rootScope.modifySavedText = [];  
7455 -  
7456 - }  
7457 - }  
7458 -  
7459 - // deleting text area on close button  
7460 - $rootScope.closeModal = function () {  
7461 -  
7462 -  
7463 - if ($rootScope.isTextAreaClosedButtonActive == true) {  
7464 - $("#canvas").removeLayer('TextArea_' + $rootScope.resetText).drawLayers();  
7465 - $("#canvas").removeLayer("TextRect_" + $rootScope.resetTextRect).drawLayers();  
7466 -  
7467 - }  
7468 -  
7469 - }  
7470 6364
7471 6365
7472 function OnPaintCanvasMouseMove(event) { 6366 function OnPaintCanvasMouseMove(event) {
@@ -7540,38 +6434,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo @@ -7540,38 +6434,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
7540 6434
7541 6435
7542 6436
7543 - $(document).keydown(function (event) {  
7544 -  
7545 - // predefined function for detecting keyboard key  
7546 - if (event.which == 46) {  
7547 -  
7548 - if ($rootScope.shapeTypePin == "Pin") {  
7549 -  
7550 -  
7551 - $("#canvas").removeLayer($rootScope.canvasLayerNameCollection[0].pinName).drawLayers();  
7552 - $("#canvas").removeLayer($rootScope.canvasLayerNameCollection[0].ArcName).drawLayers();  
7553 - $rootScope.shapeTypePin = "";  
7554 -  
7555 - }  
7556 - else if ($rootScope.shapeTypeText == "textAreaRect") {  
7557 -  
7558 -  
7559 -  
7560 - $("#canvas").removeLayer($rootScope.canvasLayerNameCollection[0].textareaRectangle).drawLayers();  
7561 - $("#canvas").removeLayer($rootScope.canvasLayerNameCollection[0].textareaString).drawLayers();  
7562 - $rootScope.shapeTypeText = "";  
7563 -  
7564 - }  
7565 - else {  
7566 -  
7567 - // alert($rootScope.canvasLayerNameCollection);  
7568 - $("#canvas").removeLayer($rootScope.canvasLayerNameCollection).drawLayers();  
7569 - }  
7570 -  
7571 -  
7572 - }  
7573 -  
7574 - }); 6437 +
7575 6438
7576 //body highlight options functinality 6439 //body highlight options functinality
7577 $scope.LoadBodySystemData = function () { 6440 $scope.LoadBodySystemData = function () {
400-SOURCECODE/AIAHTML5.Web/app/controllers/HomeController.js
  View file @db2cdb5
@@ -48,6 +48,22 @@ AIA.controller(&quot;HomeController&quot;, [&quot;$rootScope&quot;, &quot;Modules&quot;, &quot;$log&quot;, &quot;$location&quot;, @@ -48,6 +48,22 @@ AIA.controller(&quot;HomeController&quot;, [&quot;$rootScope&quot;, &quot;Modules&quot;, &quot;$log&quot;, &quot;$location&quot;,
48 $rootScope.menuLabExer; 48 $rootScope.menuLabExer;
49 $rootScope.menuLabExer = 0; 49 $rootScope.menuLabExer = 0;
50 50
  51 +
  52 + $rootScope.fontSizes;
  53 + $rootScope.fontWeight;
  54 + $rootScope.fontStyle;
  55 + $rootScope.textAlignmt;
  56 + $rootScope.fontColor;
  57 + $rootScope.underlineText;
  58 + $rootScope.textArea;
  59 + $rootScope.fontFamily;
  60 + $rootScope.TextPropertyArray = [];
  61 + $rootScope.modifySavedText = [];
  62 + $rootScope.TextRectangleArr = [];
  63 + $rootScope.rectDimension = [];
  64 +
  65 +
  66 +
51 $rootScope.$on("$locationChangeSuccess", function () { 67 $rootScope.$on("$locationChangeSuccess", function () {
52 68
53 if (($location.url() == "/da-body-view") || ($location.url() == "/clinical-illustrations-detail") || ($location.url() == "/clinical-animations-detail")) { 69 if (($location.url() == "/da-body-view") || ($location.url() == "/clinical-illustrations-detail") || ($location.url() == "/clinical-animations-detail")) {
@@ -208,20 +224,26 @@ AIA.controller(&quot;HomeController&quot;, [&quot;$rootScope&quot;, &quot;Modules&quot;, &quot;$log&quot;, &quot;$location&quot;, @@ -208,20 +224,26 @@ AIA.controller(&quot;HomeController&quot;, [&quot;$rootScope&quot;, &quot;Modules&quot;, &quot;$log&quot;, &quot;$location&quot;,
208 $('.btnCursor').removeClass('activebtncolor'); 224 $('.btnCursor').removeClass('activebtncolor');
209 $(".btn-annotation").removeClass("activebtncolor"); 225 $(".btn-annotation").removeClass("activebtncolor");
210 } 226 }
211 - 227 + $rootScope.CIAnotationIdentifyModeOff = false;
212 $rootScope.OnIdentifyClick = function () { 228 $rootScope.OnIdentifyClick = function () {
213 229
214 $("#OnIdentify").addClass("annotationtoolbartab"); 230 $("#OnIdentify").addClass("annotationtoolbartab");
215 $("#DrawMode").removeClass("annotationtoolbartab"); 231 $("#DrawMode").removeClass("annotationtoolbartab");
216 // $rootScope.isIdetifyClicked = true; 232 // $rootScope.isIdetifyClicked = true;
217 // $rootScope.isDrawingToolSelected = false; 233 // $rootScope.isDrawingToolSelected = false;
218 - $("#canvasPaint").css("display", "none");  
219 - $("#canvas").css("display", "none"); 234 + // debugger;
  235 + if ($rootScope.CIAnotationIdentifyModeOff == true) {
  236 + $('.btnCursor').removeClass('activebtncolor');
220 237
221 - // $("#canvasPaint").css("z-index", "0");  
222 - // $("#canvas").css("z-index", "0");  
223 - $('.btnCursor').removeClass('activebtncolor'); 238 + } else {
  239 + $("#canvasPaint").css("display", "none");
  240 + $("#canvas").css("display", "none");
224 241
  242 + // $("#canvasPaint").css("z-index", "0");
  243 + // $("#canvas").css("z-index", "0");
  244 + $('.btnCursor').removeClass('activebtncolor');
  245 +
  246 + }
225 } 247 }
226 248
227 249
@@ -419,7 +441,7 @@ AIA.controller(&quot;HomeController&quot;, [&quot;$rootScope&quot;, &quot;Modules&quot;, &quot;$log&quot;, &quot;$location&quot;, @@ -419,7 +441,7 @@ AIA.controller(&quot;HomeController&quot;, [&quot;$rootScope&quot;, &quot;Modules&quot;, &quot;$log&quot;, &quot;$location&quot;,
419 $rootScope.shapestyleborderWidth = 2; 441 $rootScope.shapestyleborderWidth = 2;
420 $rootScope.shapestyleborderStyles = "solid"; 442 $rootScope.shapestyleborderStyles = "solid";
421 $rootScope.shapestyle = function (id) { 443 $rootScope.shapestyle = function (id) {
422 - 444 + // debugger;
423 document.getElementById('modelbackground').style.display = "none"; 445 document.getElementById('modelbackground').style.display = "none";
424 document.getElementById('modeleditstyle').style.display = "none"; 446 document.getElementById('modeleditstyle').style.display = "none";
425 447
@@ -492,6 +514,1214 @@ AIA.controller(&quot;HomeController&quot;, [&quot;$rootScope&quot;, &quot;Modules&quot;, &quot;$log&quot;, &quot;$location&quot;, @@ -492,6 +514,1214 @@ AIA.controller(&quot;HomeController&quot;, [&quot;$rootScope&quot;, &quot;Modules&quot;, &quot;$log&quot;, &quot;$location&quot;,
492 514
493 //----End------------- 515 //----End-------------
494 516
  517 + //--Common code of Annotation Toolbar for CI and DA-------
  518 + $rootScope.LineFn = function (canvasId, LineNumber, shapestyleborderColor, shapestyleborderWidth, offsetX1, offsetY1, x, y)
  519 + {
  520 + $(canvasId).addLayer({
  521 + name: 'Line_' + LineNumber,
  522 + layer: true,
  523 + type: 'line',
  524 + draggable: true,
  525 + strokeStyle: shapestyleborderColor,
  526 + strokeWidth: shapestyleborderWidth,
  527 + rounded: true,
  528 + x1: offsetX1, y1:offsetY1,
  529 + x2: x, y2:y,
  530 +
  531 + click: function (layer) {
  532 + $rootScope.canvasLayerNameCollection = [];
  533 + $rootScope.canvasLayerNameCollection.push(layer.name);
  534 + $(canvasId).setLayer(layer.name, {
  535 + handle: {
  536 + type: 'arc',
  537 + fillStyle: '#fff',
  538 + strokeStyle: '#c33',
  539 + strokeWidth: 2,
  540 + radius: 3
  541 + }
  542 + }).drawLayers();
  543 +
  544 +
  545 + },
  546 + mouseout: function (layer) {
  547 + $rootScope.canvasLayerNameCollection = [];
  548 + $(canvasId).setLayer(layer.name, {
  549 + handle: {
  550 + type: 'arc',
  551 + fillStyle: '#fff',
  552 + strokeStyle: '#c33',
  553 + strokeWidth: 0,
  554 + radius: 0
  555 + }
  556 +
  557 + }).drawLayers();
  558 +
  559 + },
  560 + mouseover: function (layer) {
  561 +
  562 +
  563 + $(canvasId).setLayer(layer.name, {
  564 + handle: {
  565 + type: 'arc',
  566 + fillStyle: '#fff',
  567 + strokeStyle: '#c33',
  568 + strokeWidth: 2,
  569 + radius: 3
  570 + }
  571 + }).drawLayers();
  572 +
  573 + }
  574 +
  575 + }).drawLayers();
  576 +
  577 + $('.btnCursor').trigger('click');
  578 + $(".btn-annotation").removeClass("activebtncolor");
  579 + $('.btnCursor').addClass('activebtncolor');
  580 + }
  581 +
  582 + $rootScope.RectangleFn = function (canvasId, RectNumber, shapestyleFillColor, shapestyleborderColor, shapestyleOpacity, shapestyleborderWidth, offsetX1, offsetY1, x,y) {
  583 + $(canvasId).addLayer({
  584 + layer: true,
  585 + name: 'Rect_' + RectNumber,
  586 + fillStyle: shapestyleFillColor,
  587 + type: 'rectangle',
  588 + draggable: true,
  589 + strokeStyle: shapestyleborderColor,
  590 + opacity: shapestyleOpacity,
  591 + strokeWidth: shapestyleborderWidth,
  592 + x: offsetX1, y: offsetY1,
  593 + width: x - offsetX1,
  594 + height: y - offsetY1,
  595 +
  596 + resizeFromCenter: false,
  597 +
  598 + dblclick: function () {
  599 + // $rootScope.backOpacity();
  600 +
  601 + },
  602 +
  603 + click: function (layer) {
  604 + $rootScope.canvasLayerNameCollection = [];
  605 + $rootScope.canvasLayerNameCollection.push(layer.name);
  606 + $(canvasId).setLayer(layer.name, {
  607 + handle: {
  608 + type: 'rectangle',
  609 + fillStyle: '#fff',
  610 + strokeStyle: '#c33',
  611 + strokeWidth: 2,
  612 + width: 5, height: 5,
  613 + cornerRadius: 3
  614 + }
  615 + }).drawLayers();
  616 +
  617 + },
  618 + mouseout: function (layer) {
  619 + $rootScope.canvasLayerNameCollection = [];
  620 + $(canvasId).setLayer(layer.name, {
  621 + handle: {
  622 + type: 'rectangle',
  623 + fillStyle: 'pink',
  624 + strokeStyle: 'yellow',
  625 + strokeWidth: 0,
  626 + width: 0, height: 0,
  627 + cornerRadius: 0
  628 + }
  629 +
  630 + }).drawLayers();
  631 +
  632 + },
  633 + mouseover: function (layer) {
  634 +
  635 +
  636 + $(canvasId).setLayer(layer.name, {
  637 + handle: {
  638 + type: 'rectangle',
  639 + fillStyle: '#fff',
  640 + strokeStyle: '#c33',
  641 + strokeWidth: 2,
  642 + width: 5, height: 5,
  643 + cornerRadius: 3
  644 + }
  645 + }).drawLayers();
  646 +
  647 + }
  648 + }).drawLayers();
  649 +
  650 +
  651 +
  652 + $('.btnCursor').trigger('click');
  653 + $(".btn-annotation").removeClass("activebtncolor");
  654 + $('.btnCursor').addClass('activebtncolor');
  655 +
  656 + }
  657 +
  658 + $rootScope.CircleFn = function (canvasId, CircleNumber, shapestyleOpacity, shapestyleborderColor, shapestyleborderWidth, shapestyleFillColor, offsetX1, offsetY1, x, y) {
  659 +
  660 + $(canvasId).addLayer({
  661 + layer: true,
  662 + name: 'Circle_' + CircleNumber,
  663 + type: 'ellipse',
  664 + opacity: shapestyleOpacity,
  665 + draggable: true,
  666 + strokeStyle: shapestyleborderColor,
  667 + strokeWidth: shapestyleborderWidth,
  668 + fillStyle: shapestyleFillColor,
  669 + x: offsetX1, y:offsetY1,
  670 + width: (x - offsetX1) * 2, height: (y - offsetY1) * 2,
  671 + // Place a handle at each side and each corner
  672 + handlePlacement: 'both',
  673 +
  674 +
  675 +
  676 + click: function (layer) {
  677 +
  678 + $rootScope.canvasLayerNameCollection = [];
  679 + $rootScope.canvasLayerNameCollection.push(layer.name);
  680 + $(canvasId).setLayer(layer.name, {
  681 + handle: {
  682 + type: 'arc',
  683 + fillStyle: '#fff',
  684 + strokeStyle: '#c33',
  685 + strokeWidth: 2,
  686 + radius: 3
  687 + }
  688 + }).drawLayers();
  689 +
  690 + },
  691 + mouseout: function (layer) {
  692 + $rootScope.canvasLayerNameCollection = [];
  693 +
  694 + $(canvasId).setLayer(layer.name, {
  695 + handle: {
  696 + type: 'arc',
  697 + fillStyle: '#fff',
  698 + strokeStyle: '#c33',
  699 + strokeWidth: 0,
  700 + // width: 0, height: 0,
  701 + radius: 0
  702 + }
  703 +
  704 + }).drawLayers();
  705 +
  706 + },
  707 + mouseover: function (layer) {
  708 +
  709 +
  710 + $(canvasId).setLayer(layer.name, {
  711 + handle: {
  712 + type: 'arc',
  713 + fillStyle: '#fff',
  714 + strokeStyle: '#c33',
  715 + strokeWidth: 2,
  716 + // width: 5, height: 5,
  717 + radius: 3
  718 + }
  719 + }).drawLayers();
  720 +
  721 + }
  722 + }).drawLayers();
  723 + $('.btnCursor').trigger('click');
  724 + $(".btn-annotation").removeClass("activebtncolor");
  725 + $('.btnCursor').addClass('activebtncolor');
  726 + }
  727 +
  728 + $rootScope.ArrowFn = function (canvasId, ArrowNumber, shapestyleborderColor, shapestyleborderWidth, offsetX1, offsetY1, x, y) {
  729 +
  730 + $('#canvas').drawLine({
  731 + layer: true,
  732 + name: 'Arrow_' + ArrowNumber,
  733 + draggable: true,
  734 + strokeStyle: shapestyleborderColor,
  735 + strokeWidth: shapestyleborderWidth,
  736 + rounded: true,
  737 + startArrow: true,
  738 + arrowRadius: 7,
  739 + arrowAngle: 90,
  740 + x1: offsetX1, y1: offsetY1,
  741 + x2: x, y2: y,
  742 +
  743 + click: function (layer) {
  744 + $rootScope.canvasLayerNameCollection = [];
  745 + $rootScope.canvasLayerNameCollection.push(layer.name);
  746 + $(canvasId).setLayer(layer.name, {
  747 + handle: {
  748 + type: 'arc',
  749 + fillStyle: '#fff',
  750 + strokeStyle: '#c33',
  751 + strokeWidth: 2,
  752 + // width: 5, height: 5,
  753 + radius: 3
  754 + }
  755 + }).drawLayers();
  756 + // $("#canvas").removeLayer(layer.name).drawLayers();
  757 +
  758 + },
  759 + mouseout: function (layer) {
  760 + $rootScope.canvasLayerNameCollection = [];
  761 + $(canvasId).setLayer(layer.name, {
  762 + handle: {
  763 + type: 'arc',
  764 + fillStyle: '#fff',
  765 + strokeStyle: '#c33',
  766 + strokeWidth: 0,
  767 + // width: 0, height: 0,
  768 + radius: 0
  769 + }
  770 +
  771 + }).drawLayers();
  772 +
  773 + },
  774 + mouseover: function (layer) {
  775 +
  776 +
  777 + $(canvasId).setLayer(layer.name, {
  778 + handle: {
  779 + type: 'arc',
  780 + fillStyle: '#fff',
  781 + strokeStyle: '#c33',
  782 + strokeWidth: 2,
  783 + // width: 5, height: 5,
  784 + radius: 3
  785 + }
  786 + }).drawLayers();
  787 +
  788 + }
  789 +
  790 + });
  791 + $('.btnCursor').trigger('click');
  792 + $(".btn-annotation").removeClass("activebtncolor");
  793 + $('.btnCursor').addClass('activebtncolor');
  794 + }
  795 +
  796 + $rootScope.PinFn = function (canvasId, PinNumber, offsetX1, offsetY1, x, y, PinArcNumber) {
  797 + var radial = $('#canvas').createGradient({
  798 + x1: 50, y1: 50,
  799 + x2: 50, y2: 50,
  800 + r1: 10, r2: 30,
  801 + c1: 'rgba(100, 50, 0,0)',
  802 + c2: 'grey'
  803 + });
  804 + $(canvasId).drawLine({
  805 + draggable: true,
  806 + layer: true,
  807 + name: "Pin_" + PinNumber,
  808 + groups: ["Pin_" + PinNumber],
  809 + dragGroups: ["Pin_" + PinNumber],
  810 + strokeStyle: 'black',
  811 + strokeWidth: 2,
  812 + x1: offsetX1, y1: offsetY1,
  813 + x2: x, y2: y,
  814 +
  815 + click: function (layer) {
  816 +
  817 + $rootScope.shapeTypePin = "Pin";
  818 + $rootScope.canvasLayerNameCollection = [];
  819 + var pinLine_layer = layer.name;
  820 + var pinLine_layer_split = pinLine_layer.split("_");
  821 + var pinArcName = "ArcPin_";
  822 + var pinResult = pinArcName.concat(pinLine_layer_split[1]);
  823 +
  824 + $rootScope.canvasLayerNameCollection.push({ pinName: layer.name, ArcName: pinResult });
  825 +
  826 + $(canvasId).setLayer(layer.name, {
  827 + handle: {
  828 + type: 'arc',
  829 + fillStyle: '#fff',
  830 + strokeStyle: '#c33',
  831 + strokeWidth: 2,
  832 + // width: 5, height: 5,
  833 + radius: 3
  834 + }
  835 + }).drawLayers();
  836 +
  837 +
  838 + },
  839 + mouseout: function (layer) {
  840 +
  841 + $rootScope.canvasLayerNameCollection = [];
  842 + $(canvasId).setLayer(layer.name, {
  843 + handle: {
  844 + type: 'arc',
  845 + fillStyle: '#fff',
  846 + strokeStyle: '#c33',
  847 + strokeWidth: 0,
  848 + // width: 0, height: 0,
  849 + radius: 0
  850 + }
  851 +
  852 + }).drawLayers();
  853 +
  854 + },
  855 + mouseover: function (layer) {
  856 +
  857 +
  858 + $(canvasId).setLayer(layer.name, {
  859 + handle: {
  860 + type: 'arc',
  861 + fillStyle: '#fff',
  862 + strokeStyle: '#c33',
  863 + strokeWidth: 2,
  864 + // width: 5, height: 5,
  865 + radius: 3
  866 + }
  867 + }).drawLayers();
  868 +
  869 + }
  870 + }).drawArc({
  871 + draggable: true,
  872 + name: "ArcPin_" + PinArcNumber,
  873 + // name: "Pin_" + $rootScope.resetPin,
  874 + layer: true,
  875 + groups: ["Pin_" + PinNumber],
  876 + dragGroups: ["Pin_" + PinNumber],
  877 + strokeStyle: 'grey',
  878 + strokeWidth: 2,
  879 + fillStyle: radial,
  880 + x: offsetX1, y: offsetY1,
  881 + radius: 5,
  882 + //handle: {
  883 + // type: 'arc',
  884 + // fillStyle: '#fff',
  885 + // strokeStyle: '#c33',
  886 + // strokeWidth: 2,
  887 + // radius: 3
  888 + //},
  889 +
  890 + add: function (layer) {
  891 +
  892 + $rootScope.PinArcNumber = layer.name;
  893 + // $scope.arr = [];
  894 +
  895 +
  896 + },
  897 +
  898 + }).drawLayers();
  899 + $('.btnCursor').trigger('click');
  900 + $(".btn-annotation").removeClass("activebtncolor");
  901 + $('.btnCursor').addClass('activebtncolor');
  902 + }
  903 +
  904 + $rootScope.TextAreaFn = function (canvasId, TextNumber, offsetX1, offsetY1, resetTextRect, shapestyleOpacity, shapestyleborderColor, shapestyleborderWidth, shapestyleFillColor,x,y) {
  905 +
  906 +
  907 +
  908 +
  909 + $('#canvas').drawText({
  910 + layer: true,
  911 + draggable: true,
  912 + // opacity: $rootScope.shapestyleOpacity,
  913 + name: 'TextArea_' + $rootScope.TextNumber,
  914 + groups: ['TextArea_' + $rootScope.TextNumber],
  915 + dragGroups: ['TextArea_' + $rootScope.TextNumber],
  916 + fillStyle: '#36c',
  917 + strokeWidth: 0,
  918 + x: $rootScope.offsetX1, y: $rootScope.offsetY1,
  919 + fontSize: '14pt',
  920 + align: "left",
  921 + fontFamily: 'Verdana, sans-serif',
  922 + text: '',
  923 + add: function (layer) {
  924 +
  925 + $rootScope.TextID = layer.name;
  926 + }
  927 +
  928 +
  929 + })
  930 + // Draw rect as wide as the text
  931 + .drawRect({
  932 + layer: true,
  933 + name: "TextRect_" + $rootScope.TextNumber,
  934 + dragGroups: ['shapes'],
  935 + opacity: $rootScope.shapestyleOpacity,
  936 + strokeStyle: $rootScope.shapestyleborderColor,
  937 + strokeWidth: $rootScope.shapestyleborderWidth,
  938 + fillStyle: $rootScope.shapestyleFillColor,
  939 + x: $rootScope.offsetX1, y: $rootScope.offsetY1,
  940 + width: $rootScope.x - $rootScope.offsetX1,
  941 + height: $rootScope.y - $rootScope.offsetY1,
  942 + add: function (layer) {
  943 +
  944 + $rootScope.TextAreaRectID = layer.name;
  945 + $rootScope.rectDimension.push({ width: layer.width, height: layer.height, x: layer.x, y: layer.y });
  946 +
  947 + },
  948 + click: function (layer) {
  949 +
  950 + $rootScope.canvasLayerNameCollection = [];
  951 + $rootScope.canvasLayerNameCollection.push(layer.name);
  952 + $('#canvas').setLayer(layer.name, {
  953 + handle: {
  954 + type: 'rectangle',
  955 + fillStyle: '#fff',
  956 + strokeStyle: '#c33',
  957 + strokeWidth: 2,
  958 + width: 5, height: 5,
  959 + cornerRadius: 3
  960 + }
  961 + }).drawLayers();
  962 +
  963 + },
  964 + dblclick: function (layer) {
  965 +
  966 +
  967 + var RectNameArray = (layer.name).split("_");
  968 +
  969 + var TextAreaRectangleName = "TextArea_";
  970 + var TextAreaRectNameConcat = TextAreaRectangleName.concat(RectNameArray[1]);
  971 + $rootScope.TextAreaRectID = layer.name;
  972 + $rootScope.TextID = TextAreaRectNameConcat;
  973 +
  974 + $rootScope.rectDimension.push({ width: layer.width, height: layer.height, x: layer.x, y: layer.y });
  975 + $("#annotationTextModal").modal("toggle");
  976 +
  977 + $("#text_area").val('');
  978 + $("#text_area").css({ " font-family": "'Verdana, sans-serif'", "font-size": "14px", "font-weight": "normal", "font-style": "normal", "color": "#000", "text-align": "left", "text-decoration": "none" });
  979 + $("#font-color .minicolors .minicolors-swatch .minicolors-swatch-color").css({ "background-color": "#000000" });
  980 + // $("#font-color .minicolors .minicolors-swatch .minicolors-swatch-color").addClass("ActiveDefaultColorAnnotation");
  981 +
  982 + $("#text-italic").removeClass("ActiveFormattingButtonClass");
  983 +
  984 + $("#text-bold").removeClass("ActiveFormattingButtonClass");
  985 +
  986 + $("#text-underline").removeClass("ActiveFormattingButtonClass");
  987 +
  988 + $("#text-left").removeClass("ActiveFormattingButtonClass");
  989 +
  990 + $("#text-right").removeClass("ActiveFormattingButtonClass");
  991 +
  992 + $("#text-center").removeClass("ActiveFormattingButtonClass");
  993 +
  994 + },
  995 + mouseout: function (layer) {
  996 + $rootScope.canvasLayerNameCollection = [];
  997 + $('#canvas').setLayer(layer.name, {
  998 + handle: {
  999 + type: 'rectangle',
  1000 + fillStyle: 'pink',
  1001 + strokeStyle: 'yellow',
  1002 + strokeWidth: 0,
  1003 + width: 0, height: 0,
  1004 + cornerRadius: 0
  1005 + }
  1006 +
  1007 + }).drawLayers();
  1008 +
  1009 + },
  1010 + mouseover: function (layer) {
  1011 +
  1012 + $('#canvas').setLayer(layer.name, {
  1013 + handle: {
  1014 + type: 'rectangle',
  1015 + fillStyle: '#fff',
  1016 + strokeStyle: '#c33',
  1017 + strokeWidth: 2,
  1018 + width: 5, height: 5,
  1019 + cornerRadius: 3
  1020 + }
  1021 + }).drawLayers();
  1022 +
  1023 + }
  1024 + });
  1025 +
  1026 +
  1027 + $("#annotationTextModal").modal("toggle");
  1028 + $('.btnCursor').trigger('click');
  1029 + $("#font-color .minicolors .minicolors-swatch .minicolors-swatch-color").css({ "background-color": "#000000" });
  1030 +
  1031 + $("#text_area").val('');
  1032 +
  1033 + $("#text_area").css({ " font-family": 'Verdana, sans-serif', "font-size": "14px", "font-weight": "normal", "font-style": "normal", "color": "#000", "text-align": "left", "text-decoration": "none" });
  1034 +
  1035 + $("#text-italic").removeClass("ActiveFormattingButtonClass");
  1036 +
  1037 + $("#text-bold").removeClass("ActiveFormattingButtonClass");
  1038 +
  1039 + $("#text-underline").removeClass("ActiveFormattingButtonClass");
  1040 +
  1041 + $("#text-left").removeClass("ActiveFormattingButtonClass");
  1042 +
  1043 + $("#text-right").removeClass("ActiveFormattingButtonClass");
  1044 +
  1045 + $("#text-center").removeClass("ActiveFormattingButtonClass");
  1046 +
  1047 + $(".btn-annotation").removeClass("activebtncolor");
  1048 +
  1049 + $('.btnCursor').addClass('activebtncolor');
  1050 +
  1051 +
  1052 +
  1053 + }
  1054 +
  1055 +
  1056 +
  1057 + $rootScope.clicked = true;
  1058 + $rootScope.offsetX1 = 0;
  1059 + $rootScope.offsetY1 = 0;
  1060 + $rootScope.x = 0;
  1061 + $rootScope.y = 0;
  1062 + $rootScope.mousePressed = false;
  1063 + $rootScope.lastX; $rootScope.lastY;
  1064 + var ctx;
  1065 + $rootScope.OnPaintCanvasMouseDown = function (event) {
  1066 +
  1067 + var canvasElement = document.getElementById("canvas");
  1068 + var ctx = canvasElement.getContext("2d");
  1069 +
  1070 + // var x = event.clientX;
  1071 + // var y = event.clientY;
  1072 + $rootScope.offsetX1 = 0;
  1073 + $rootScope.offsetY1 = 0;
  1074 + $rootScope.offsetX1 = event.offsetX;
  1075 + $rootScope.offsetY1 = event.offsetY;
  1076 +
  1077 + ctx.clearRect(0, 0, 2277, 3248);
  1078 + $rootScope.clicked = true;
  1079 +
  1080 + // alert("x:"+$rootScope.offsetX1 + " y:" + $rootScope.offsetY1);
  1081 + }
  1082 +
  1083 + $rootScope.rectNumber = 0;
  1084 + $rootScope.LineNumber = 0;
  1085 + $rootScope.CircleNumber = 0;
  1086 + $rootScope.ArrowNumber = 0;
  1087 + $rootScope.PinNumber = 0;
  1088 + $rootScope.PinArcNumber = 0;
  1089 + $rootScope.ObjectIndex = 0;
  1090 + $rootScope.ArcObjectIndex = 0;
  1091 + $rootScope.PinObjectIndex = 0;
  1092 + $rootScope.TextNumber = 0;
  1093 + $rootScope.resetTextSave = 0;
  1094 + $rootScope.ObjectIndexSave = 0;
  1095 +
  1096 + var arrayRect = {};
  1097 +
  1098 + var storeLine = '';
  1099 + //$rootScope.canvasLayerNameCollection1 = [];
  1100 + $rootScope.OnPaintCanvasMouseUp = function (event) {
  1101 +
  1102 + if (!$rootScope.clicked) {
  1103 + return;
  1104 + }
  1105 + $rootScope.clicked = false;
  1106 + $rootScope.x = 0;
  1107 + $rootScope.y = 0;
  1108 + $rootScope.x = parseInt(event.clientX - ($("#canvas").offset().left));
  1109 + $rootScope.y = parseInt(event.clientY - ($("#canvas").offset().top));
  1110 +
  1111 + var canvasElement = document.getElementById("canvas");
  1112 + var ctx = canvasElement.getContext("2d");
  1113 +
  1114 + var canvasPaintElement = document.getElementById("canvasPaint");
  1115 + var PaintCanvasctx = canvasPaintElement.getContext("2d");
  1116 +
  1117 +
  1118 + switch ($rootScope.shapeType) {
  1119 +
  1120 + case "cursor":
  1121 + // ctx.clearRect(0, 0, 2277, 3248);
  1122 + ctx.beginPath();
  1123 + PaintCanvasctx.beginPath();
  1124 +
  1125 +
  1126 + break;
  1127 +
  1128 + case "Line":
  1129 + //$rootScope.canvasLayerNameCollection = [];
  1130 + $rootScope.LineNumber = $rootScope.ObjectIndex++;
  1131 +
  1132 + $rootScope.LineFn('#canvas', $rootScope.LineNumber, $rootScope.shapestyleborderColor, $rootScope.shapestyleborderWidth, $rootScope.offsetX1, $rootScope.offsetY1, $rootScope.x, $rootScope.y)
  1133 +
  1134 + break;
  1135 +
  1136 + case "Rectangle":
  1137 + $rootScope.rectNumber = $rootScope.ObjectIndex++;
  1138 + $rootScope.RectangleFn('#canvas', $rootScope.rectNumber, $rootScope.shapestyleFillColor, $rootScope.shapestyleborderColor, $rootScope.shapestyleOpacity, $rootScope.shapestyleborderWidth, $rootScope.offsetX1, $rootScope.offsetY1, $rootScope.x, $rootScope.y);
  1139 +
  1140 + break;
  1141 +
  1142 + case "Circle":
  1143 + // alert($rootScope.shapestyleborderWidth);
  1144 + $rootScope.CircleNumber = $rootScope.ObjectIndex++;
  1145 +
  1146 + $rootScope.CircleFn('#canvas', $rootScope.CircleNumber, $rootScope.shapestyleOpacity, $rootScope.shapestyleborderColor, $rootScope.shapestyleborderWidth, $rootScope.shapestyleFillColor, $rootScope.offsetX1, $rootScope.offsetY1, $rootScope.x, $rootScope.y);
  1147 + break;
  1148 + case "Arrow":
  1149 + $rootScope.ArrowNumber = $rootScope.ObjectIndex++;
  1150 +
  1151 + $rootScope.ArrowFn('#canvas', $rootScope.ArrowNumber, $rootScope.shapestyleborderColor, $rootScope.shapestyleborderWidth, $rootScope.offsetX1, $rootScope.offsetY1, $rootScope.x, $rootScope.y);
  1152 +
  1153 + // $scope.resetRect += 1;
  1154 + break;
  1155 + case "Pin":
  1156 + $rootScope.PinNumber = $rootScope.PinObjectIndex++;
  1157 + $rootScope.PinArcNumber = $rootScope.ArcObjectIndex++;
  1158 + $rootScope.PinFn('#canvas', $rootScope.PinNumber, $rootScope.offsetX1, $rootScope.offsetY1, $rootScope.x, $rootScope.y, $rootScope.PinArcNumber);
  1159 +
  1160 + break;
  1161 + case "TextArea":
  1162 + $rootScope.IsTextAlreadySave = false;
  1163 + $("#text_area").val('');
  1164 + // Draw text
  1165 + $rootScope.resetTextRect = $rootScope.ObjectIndex++;
  1166 + $rootScope.TextNumber = $rootScope.ObjectIndex++;
  1167 + $rootScope.TextAreaFn('#canvas', $rootScope.TextNumber, $rootScope.offsetX1, $rootScope.offsetY1, $rootScope.resetTextRect, $rootScope.shapestyleOpacity, $rootScope.shapestyleborderColor, $rootScope.shapestyleborderWidth, $rootScope.shapestyleFillColor, $rootScope.x, $rootScope.y);
  1168 + break;
  1169 +
  1170 + case "DrawPolygon":
  1171 +
  1172 + break;
  1173 +
  1174 + }
  1175 + //}
  1176 +
  1177 + }
  1178 +
  1179 +
  1180 +
  1181 +
  1182 +
  1183 +
  1184 + ///-----
  1185 +
  1186 + $rootScope.saveText = function () {
  1187 +
  1188 + // this part will work first time when save button will be clicked
  1189 + if ($rootScope.IsTextAlreadySave == false) {
  1190 + // getting textarea style properties
  1191 + $rootScope.fontSizes = $("#text_area").css("font-size");
  1192 + $rootScope.fontWeight = $("#text_area").css("font-weight");
  1193 + $rootScope.fontStyle = $("#text_area").css("font-style");
  1194 + $rootScope.textAlignmt = $("#text_area").css("text-align");
  1195 + $rootScope.fontColor = $("#text_area").css("color");
  1196 + $rootScope.fontFamily = $("#text_area").css("font-family");
  1197 + $rootScope.underlineText = $("#text_area").css("text-decoration");
  1198 + $rootScope.textArea = $("#text_area").val();
  1199 +
  1200 + // deleting previous text area
  1201 +
  1202 +
  1203 + $("#canvas").removeLayer($rootScope.TextID).drawLayers();
  1204 + $("#canvas").removeLayer($rootScope.TextAreaRectID).drawLayers();
  1205 +
  1206 +
  1207 + // $("#canvas").removeLayer('TextArea_' + $rootScope.TextNumber).drawLayers();
  1208 + // $("#canvas").removeLayer("TextRect_" + $rootScope.TextNumber).drawLayers();
  1209 +
  1210 + // Text After Saving in Rectangle
  1211 + $rootScope.resetTextRect = $rootScope.ObjectIndex++;
  1212 + $('#canvas').drawText({
  1213 + layer: true,
  1214 + draggable: true,
  1215 + name: 'TextAreaNew_' + $rootScope.resetTextRect,
  1216 + groups: ['TextAreaNew_' + $rootScope.resetTextRect],
  1217 + dragGroups: ['TextAreaNew_' + $rootScope.resetTextRect],
  1218 + fillStyle: $rootScope.fontColor,
  1219 + fontStyle: $rootScope.fontWeight + " " + $rootScope.fontStyle,
  1220 + fontSize: $rootScope.fontSizes,
  1221 + fontFamily: $rootScope.fontFamily,
  1222 + align: $rootScope.textAlignmt,
  1223 + strokeWidth: 0,
  1224 + text: $rootScope.textArea,
  1225 + x: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].x, y: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].y,
  1226 + maxWidth: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].width,
  1227 + maxHeight: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].height,
  1228 + add: function (layer) {
  1229 +
  1230 + //$rootScope.TextPropertyArray.push({ Text1: '', Align: '', FontColor: '', FontSize: '', FontStyle: '', FontFamily: '' });
  1231 + $rootScope.TextPropertyArray.push({ layerName: layer.name, Rect_Text: layer.text, Align: layer.align, FontColor: layer.fillStyle, FontSize: layer.fontSize, FontStyle: layer.fontStyle, FontFamily: layer.fontFamily, TextDecoration: $rootScope.underlineText });
  1232 + }
  1233 + })
  1234 + // Draw rectangle
  1235 + .drawRect({
  1236 + name: 'TextArea1_' + $rootScope.resetTextRect,
  1237 + layer: true,
  1238 + draggable: true,
  1239 + groups: ['TextAreaNew_' + $rootScope.resetTextRect],
  1240 + dragGroups: ['TextAreaNew_' + $rootScope.resetTextRect],
  1241 + opacity: $rootScope.shapestyleOpacity,
  1242 + strokeStyle: $rootScope.shapestyleborderColor,
  1243 + strokeWidth: $rootScope.shapestyleborderWidth,
  1244 + x: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].x, y: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].y,
  1245 + width: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].width,
  1246 + height: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].height,
  1247 + click: function (layer) {
  1248 + $rootScope.shapeTypeText = "textAreaRect";
  1249 +
  1250 + var layerNameSplit = layer.name;
  1251 + var splitedName = layerNameSplit.split("_");
  1252 + var textValName = "TextAreaNew_";
  1253 + var concatinateResult = textValName.concat(splitedName[1]);
  1254 + $rootScope.canvasLayerNameCollection = [];
  1255 + $rootScope.canvasLayerNameCollection.push({ textareaRectangle: layer.name, textareaString: concatinateResult });
  1256 + $('#canvas').setLayer(layer.name, {
  1257 + handle: {
  1258 + type: 'rectangle',
  1259 + fillStyle: '#fff',
  1260 + strokeStyle: '#c33',
  1261 + strokeWidth: 2,
  1262 + width: 5, height: 5,
  1263 + cornerRadius: 3
  1264 + }
  1265 + }).drawLayers();
  1266 + },
  1267 + dblclick: function (layer) {
  1268 +
  1269 + $rootScope.isTextAreaClosedButtonActive = false;
  1270 + $rootScope.IsTextAlreadySave = true;
  1271 +
  1272 + var _rectLayerOnSave = layer.name;
  1273 + var _rectLayerOnSaveSplit = _rectLayerOnSave.split("_");
  1274 + var TextAreaRectName = "TextAreaNew_";
  1275 + var TextAreaRectNameConcatenated = TextAreaRectName.concat(_rectLayerOnSaveSplit[1]);
  1276 + // alert(TextAreaRectNameConcatenated);
  1277 + //if (_rectLayerOnSaveSplit[1]%2 == 0)
  1278 + //{
  1279 + // _rectLayerOnSaveSplit[1] = _rectLayerOnSaveSplit[1] - 1;
  1280 +
  1281 + //}
  1282 + //else
  1283 + //{
  1284 +
  1285 + // _rectLayerOnSaveSplit[1] = _rectLayerOnSaveSplit[1];
  1286 + //}
  1287 +
  1288 + $rootScope.layerNameArr = layer.name;
  1289 + $rootScope.rectTextArr = TextAreaRectNameConcatenated;
  1290 +
  1291 +
  1292 + $rootScope.rectDimension.push({ width: layer.width, height: layer.height, x: layer.x, y: layer.y });
  1293 + // var _rectLayerOnSaveSplitInt;
  1294 +
  1295 +
  1296 + // _rectLayerOnSaveSplitInt = parseInt(_rectLayerOnSaveSplit[1]);
  1297 +
  1298 + //alert(_rectLayerOnSaveSplitInt);
  1299 + // alert($rootScope.TextPropertyArray.length);
  1300 +
  1301 +
  1302 + for (var i = 0; i <= $rootScope.TextPropertyArray.length - 1; i++) {
  1303 + if ($rootScope.TextPropertyArray[i].layerName == TextAreaRectNameConcatenated) {
  1304 +
  1305 + var textArrVal = $rootScope.TextPropertyArray[i].Rect_Text;
  1306 + $("#text_area").val(textArrVal);
  1307 + var fontStyleProp = $rootScope.TextPropertyArray[i].FontStyle;
  1308 + var fontWeightProp = fontStyleProp.split(" ");
  1309 +
  1310 + $("#text_area").css("font-size", $rootScope.TextPropertyArray[i].FontSize);
  1311 + $("#text_area").css("font-weight", fontWeightProp[0]);
  1312 + $("#text_area").css("font-style", fontWeightProp[1]);
  1313 + $("#text_area").css("text-align", $rootScope.TextPropertyArray[i].Align);
  1314 + $("#text_area").css("color", $rootScope.TextPropertyArray[i].FontColor);
  1315 + $("#text_area").css("font-family", $rootScope.TextPropertyArray[i].FontFamily);
  1316 + $("#text_area").css("text-decoration", $rootScope.TextPropertyArray[i].TextDecoration);
  1317 + $("#font-color .minicolors .minicolors-swatch .minicolors-swatch-color").css({ "background-color": $rootScope.TextPropertyArray[i].FontColor });
  1318 +
  1319 +
  1320 +
  1321 + // $(".ActiveDefaultColorAnnotation").css({ "background-color": $rootScope.TextPropertyArray[_rectLayerOnSaveSplitInt].FontColor + "!important" });
  1322 + // $("#font-color .minicolors .minicolors-swatch .minicolors-swatch-color").addClass("ActiveDefaultColorAnnotation");
  1323 +
  1324 +
  1325 + //adding text text decoration active class in text edit pop-up
  1326 +
  1327 +
  1328 +
  1329 +
  1330 + if ($rootScope.TextPropertyArray[i].TextDecoration == "underline") {
  1331 +
  1332 + $("#text-underline").addClass("ActiveFormattingButtonClass");
  1333 +
  1334 + }
  1335 +
  1336 + else {
  1337 +
  1338 + $("#text-underline").removeClass("ActiveFormattingButtonClass");
  1339 +
  1340 + }
  1341 +
  1342 +
  1343 +
  1344 + //adding text font weight active class in text edit pop-up
  1345 +
  1346 + if (fontWeightProp[0] == 700) {
  1347 +
  1348 +
  1349 +
  1350 + $("#text-bold").addClass("ActiveFormattingButtonClass");
  1351 +
  1352 + }
  1353 +
  1354 + else {
  1355 +
  1356 + $("#text-bold").removeClass("ActiveFormattingButtonClass");
  1357 +
  1358 + }
  1359 +
  1360 + //adding text font style active class in text edit pop-up
  1361 +
  1362 + if (fontWeightProp[1] == "italic") {
  1363 +
  1364 +
  1365 + $("#text-italic").addClass("ActiveFormattingButtonClass");
  1366 + }
  1367 + else {
  1368 + $("#text-italic").removeClass("ActiveFormattingButtonClass");
  1369 +
  1370 +
  1371 + }
  1372 +
  1373 + //adding text alignment active class in text edit pop-up
  1374 +
  1375 + if ($rootScope.TextPropertyArray[i].Align == "left") {
  1376 +
  1377 + $("#text-right").removeClass("ActiveFormattingButtonClass");
  1378 +
  1379 + $("#text-center").removeClass("ActiveFormattingButtonClass")
  1380 +
  1381 + $("#text-left").addClass("ActiveFormattingButtonClass");
  1382 +
  1383 + }
  1384 +
  1385 + else if ($rootScope.TextPropertyArray[i].Align == "right") {
  1386 +
  1387 +
  1388 +
  1389 + $("#text-center").removeClass("ActiveFormattingButtonClass")
  1390 +
  1391 + $("#text-left").removeClass("ActiveFormattingButtonClass");
  1392 +
  1393 + $("#text-right").addClass("ActiveFormattingButtonClass");
  1394 +
  1395 +
  1396 +
  1397 + }
  1398 +
  1399 + else if ($rootScope.TextPropertyArray[i].Align == "center") {
  1400 +
  1401 + $("#text-left").removeClass("ActiveFormattingButtonClass");
  1402 +
  1403 + $("#text-right").removeClass("ActiveFormattingButtonClass");
  1404 +
  1405 + $("#text-center").addClass("ActiveFormattingButtonClass");
  1406 +
  1407 +
  1408 +
  1409 + }
  1410 +
  1411 +
  1412 +
  1413 + }
  1414 + else {
  1415 + // alert("no");
  1416 +
  1417 + }
  1418 +
  1419 + }
  1420 +
  1421 +
  1422 +
  1423 +
  1424 +
  1425 + // _rectLayerOnSaveSplitInt = '';
  1426 + textArrVal = '';
  1427 + $("#annotationTextModal").modal("toggle");
  1428 +
  1429 +
  1430 +
  1431 +
  1432 + },
  1433 + mouseout: function (layer) {
  1434 + $rootScope.canvasLayerNameCollection = [];
  1435 + $('#canvas').setLayer(layer.name, {
  1436 + handle: {
  1437 + type: 'rectangle',
  1438 + fillStyle: 'pink',
  1439 + strokeStyle: 'yellow',
  1440 + strokeWidth: 0,
  1441 + width: 0, height: 0,
  1442 + cornerRadius: 0
  1443 + }
  1444 + }).drawLayers();
  1445 + },
  1446 + mouseover: function (layer) {
  1447 + $('#canvas').setLayer(layer.name, {
  1448 + handle: {
  1449 + type: 'rectangle',
  1450 + fillStyle: '#fff',
  1451 + strokeStyle: '#c33',
  1452 + strokeWidth: 2,
  1453 + width: 5, height: 5,
  1454 + cornerRadius: 3
  1455 + }
  1456 + }).drawLayers();
  1457 +
  1458 + }
  1459 + });
  1460 + $("#text_area").val('');
  1461 + $("#text_area").css({ " font-family": "'Verdana, sans-serif'", "font-size": "14px", "font-weight": "normal", "font-style": "normal", "color": "#000", "text-align": "left", "text-decoration": "none" });
  1462 +
  1463 + $("#font-color .minicolors .minicolors-swatch .minicolors-swatch-color").css({ "background-color": "#000000" });
  1464 + $("#text-italic").removeClass("ActiveFormattingButtonClass");
  1465 +
  1466 + $("#text-bold").removeClass("ActiveFormattingButtonClass");
  1467 +
  1468 + $("#text-underline").removeClass("ActiveFormattingButtonClass");
  1469 +
  1470 + $("#text-left").removeClass("ActiveFormattingButtonClass");
  1471 +
  1472 + $("#text-right").removeClass("ActiveFormattingButtonClass");
  1473 +
  1474 + $("#text-center").removeClass("ActiveFormattingButtonClass");
  1475 +
  1476 +
  1477 + }
  1478 +
  1479 + // this part will work second time when save button will be clicked
  1480 + else {
  1481 +
  1482 + // getting textarea style properties
  1483 + var _modifiedText = $("#text_area").val();
  1484 + var _modifiedFontSize = $("#text_area").css("font-size");
  1485 + var _modifiedFontWeight = $("#text_area").css("font-weight");
  1486 + var _modifiedFontStyle = $("#text_area").css("font-style");
  1487 + var _modifiedTextAlign = $("#text_area").css("text-align");
  1488 + var _modifiedFontColor = $("#text_area").css("color");
  1489 + var _modifiedFontFamily = $("#text_area").css("font-family");
  1490 + var _modifiedFontDecoration = $("#text_area").css("text-decoration");
  1491 +
  1492 + // deleting previous textarea
  1493 +
  1494 +
  1495 + $("#canvas").removeLayer($rootScope.layerNameArr).drawLayers();
  1496 + $("#canvas").removeLayer($rootScope.rectTextArr).drawLayers();
  1497 +
  1498 + $rootScope.resetTextRectSave = $rootScope.ObjectIndexSave++;
  1499 + $rootScope.resetTextSave = $rootScope.ObjectIndexSave++;
  1500 +
  1501 + // generating new text area
  1502 + $('#canvas').drawText({
  1503 + layer: true,
  1504 + draggable: true,
  1505 + name: 'TextAreaAfterEdit_' + $rootScope.resetTextSave,
  1506 + groups: ['TextAreaAfterEdit_' + $rootScope.resetTextSave],
  1507 + dragGroups: ['TextAreaAfterEdit_' + $rootScope.resetTextSave],
  1508 + fillStyle: _modifiedFontColor,
  1509 + fontStyle: _modifiedFontWeight + " " + _modifiedFontStyle,
  1510 + fontSize: _modifiedFontSize,
  1511 + fontFamily: _modifiedFontFamily,
  1512 + align: _modifiedTextAlign,
  1513 + strokeWidth: 0,
  1514 + text: _modifiedText,
  1515 + x: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].x, y: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].y,
  1516 + maxWidth: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].width,
  1517 + maxHeight: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].height
  1518 +
  1519 + })
  1520 + // Draw rect as wide as the text
  1521 + .drawRect({
  1522 + name: 'TextAreaAfterEditRect_' + $rootScope.resetTextSave,
  1523 + layer: true,
  1524 + draggable: true,
  1525 + groups: ['TextAreaAfterEdit_' + $rootScope.resetTextSave],
  1526 + dragGroups: ['TextAreaAfterEdit_' + $rootScope.resetTextSave],
  1527 + opacity: $rootScope.shapestyleOpacity,
  1528 + strokeStyle: $rootScope.shapestyleborderColor,
  1529 + strokeWidth: $rootScope.shapestyleborderWidth,
  1530 + x: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].x, y: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].y,
  1531 + width: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].width,
  1532 + height: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].height,
  1533 + click: function (layer) {
  1534 + $rootScope.shapeTypeText = "textAreaRect";
  1535 + var layerNameSplit = layer.name;
  1536 + var splitedName = layerNameSplit.split("_");
  1537 + var textValName = "TextAreaAfterEdit_";
  1538 + var concatinateResult = textValName.concat(splitedName[1]);
  1539 + $rootScope.canvasLayerNameCollection = [];
  1540 + $rootScope.canvasLayerNameCollection.push({ textareaRectangle: layer.name, textareaString: concatinateResult });
  1541 +
  1542 + $('#canvas').setLayer(layer.name, {
  1543 + handle: {
  1544 + type: 'rectangle',
  1545 + fillStyle: '#fff',
  1546 + strokeStyle: '#c33',
  1547 + strokeWidth: 2,
  1548 + width: 5, height: 5,
  1549 + cornerRadius: 3
  1550 + }
  1551 + }).drawLayers();
  1552 +
  1553 + },
  1554 + dblclick: function (layer) {
  1555 +
  1556 + $rootScope.isTextAreaClosedButtonActive = false;
  1557 + $rootScope.IsTextAlreadySave = true;
  1558 + var _rectLayerOnSave = layer.name;
  1559 + var _rectLayerOnSaveSplit = _rectLayerOnSave.split("_");
  1560 + var RectNameAfterEdit = "TextAreaAfterEdit_";
  1561 + var RectNameAfterEditResult = RectNameAfterEdit.concat(_rectLayerOnSaveSplit[1]);
  1562 + $rootScope.modifySavedTextIndexNumber = _rectLayerOnSaveSplit[1];
  1563 +
  1564 + $rootScope.layerNameArr = layer.name;
  1565 + $rootScope.rectTextArr = RectNameAfterEditResult;
  1566 +
  1567 + $rootScope.rectDimension.push({ width: layer.width, height: layer.height, x: layer.x, y: layer.y });
  1568 + $("#text_area").val(_modifiedText);
  1569 + $("#text_area").css("font-size", _modifiedFontSize);
  1570 + $("#text_area").css("font-weight", _modifiedFontWeight);
  1571 + $("#text_area").css("font-style", _modifiedFontStyle);
  1572 + $("#text_area").css("text-align", _modifiedTextAlign);
  1573 + $("#text_area").css("color", _modifiedFontColor);
  1574 + $("#text_area").css("font-family", _modifiedFontFamily);
  1575 + $("#text_area").css("text-decoration", _modifiedFontDecoration);
  1576 + $("#font-color .minicolors .minicolors-swatch .minicolors-swatch-color").css({ "background-color": _modifiedFontColor });
  1577 + // $(".ActiveDefaultColorAnnotation").css({ "background-color": _modifiedFontColor + "!important" });
  1578 + // $("#font-color .minicolors .minicolors-swatch .minicolors-swatch-color").addClass("ActiveDefaultColorAnnotation");
  1579 +
  1580 + //adding text text decoration active class in text edit pop-up
  1581 + if (_modifiedFontDecoration == "underline") {
  1582 + $("#text-underline").addClass("ActiveFormattingButtonClass");
  1583 + }
  1584 + else {
  1585 + $("#text-underline").removeClass("ActiveFormattingButtonClass");
  1586 + }
  1587 +
  1588 + //adding text font weight active class in text edit pop-up
  1589 + if (_modifiedFontWeight == 700) {
  1590 +
  1591 + $("#text-bold").addClass("ActiveFormattingButtonClass");
  1592 + }
  1593 + else {
  1594 +
  1595 + $("#text-bold").removeClass("ActiveFormattingButtonClass");
  1596 +
  1597 + }
  1598 +
  1599 + //adding text font style active class in text edit pop-up
  1600 + if (_modifiedFontStyle == "italic") {
  1601 +
  1602 + $("#text-italic").addClass("ActiveFormattingButtonClass");
  1603 + }
  1604 + else {
  1605 + $("#text-italic").removeClass("ActiveFormattingButtonClass");
  1606 +
  1607 + }
  1608 +
  1609 + //adding text alignment active class in text edit pop-up
  1610 + if (_modifiedTextAlign == "left") {
  1611 + $("#text-right").removeClass("ActiveFormattingButtonClass");
  1612 + $("#text-center").removeClass("ActiveFormattingButtonClass")
  1613 + $("#text-left").addClass("ActiveFormattingButtonClass");
  1614 + }
  1615 + else if (_modifiedTextAlign == "right") {
  1616 +
  1617 + $("#text-center").removeClass("ActiveFormattingButtonClass")
  1618 + $("#text-left").removeClass("ActiveFormattingButtonClass");
  1619 + $("#text-right").addClass("ActiveFormattingButtonClass");
  1620 +
  1621 + }
  1622 + else if (_modifiedTextAlign == "center") {
  1623 + $("#text-left").removeClass("ActiveFormattingButtonClass");
  1624 + $("#text-right").removeClass("ActiveFormattingButtonClass");
  1625 + $("#text-center").addClass("ActiveFormattingButtonClass");
  1626 +
  1627 + }
  1628 +
  1629 +
  1630 + $("#annotationTextModal").modal("toggle");
  1631 + },
  1632 + mouseout: function (layer) {
  1633 + $rootScope.canvasLayerNameCollection = [];
  1634 + $('#canvas').setLayer(layer.name, {
  1635 + handle: {
  1636 + type: 'rectangle',
  1637 + fillStyle: 'pink',
  1638 + strokeStyle: 'yellow',
  1639 + strokeWidth: 0,
  1640 + width: 0, height: 0,
  1641 + cornerRadius: 0
  1642 + }
  1643 + }).drawLayers();
  1644 + },
  1645 + mouseover: function (layer) {
  1646 + $('#canvas').setLayer(layer.name, {
  1647 + handle: {
  1648 + type: 'rectangle',
  1649 + fillStyle: '#fff',
  1650 + strokeStyle: '#c33',
  1651 + strokeWidth: 2,
  1652 + width: 5, height: 5,
  1653 + cornerRadius: 3
  1654 + }
  1655 + }).drawLayers();
  1656 +
  1657 + }
  1658 + });
  1659 +
  1660 + }
  1661 + }
  1662 + //----
  1663 +
  1664 + $rootScope.BindCanvasDrawingListners = function (event) {
  1665 +
  1666 + $rootScope.clicked = true;
  1667 + // OnPaintCanvasMouseDown(event);
  1668 +
  1669 + var annotationCanvas = document.getElementById('canvas');
  1670 + if (annotationCanvas != null || annotationCanvas != undefined) {
  1671 + annotationCanvas.addEventListener('mousedown', $rootScope.OnPaintCanvasMouseDown, false);
  1672 + annotationCanvas.addEventListener('mouseup', $rootScope.OnPaintCanvasMouseUp, false);
  1673 + }
  1674 + // alert("doclick");
  1675 + };
  1676 +
  1677 +
  1678 + $(document).keydown(function (event) {
  1679 +
  1680 + // predefined function for detecting keyboard key
  1681 + if (event.which == 46) {
  1682 +
  1683 + if ($rootScope.shapeTypePin == "Pin") {
  1684 +
  1685 +
  1686 + $("#canvas").removeLayer($rootScope.canvasLayerNameCollection[0].pinName).drawLayers();
  1687 + $("#canvas").removeLayer($rootScope.canvasLayerNameCollection[0].ArcName).drawLayers();
  1688 + $rootScope.shapeTypePin = "";
  1689 +
  1690 + }
  1691 + else if ($rootScope.shapeTypeText == "textAreaRect") {
  1692 +
  1693 +
  1694 +
  1695 + $("#canvas").removeLayer($rootScope.canvasLayerNameCollection[0].textareaRectangle).drawLayers();
  1696 + $("#canvas").removeLayer($rootScope.canvasLayerNameCollection[0].textareaString).drawLayers();
  1697 + $rootScope.shapeTypeText = "";
  1698 +
  1699 + }
  1700 + else {
  1701 +
  1702 + // alert($rootScope.canvasLayerNameCollection);
  1703 + $("#canvas").removeLayer($rootScope.canvasLayerNameCollection).drawLayers();
  1704 + }
  1705 +
  1706 +
  1707 + }
  1708 +
  1709 + });
  1710 +
  1711 +
  1712 + $rootScope.closeModal = function () {
  1713 +
  1714 +
  1715 + if ($rootScope.isTextAreaClosedButtonActive == true) {
  1716 + $("#canvas").removeLayer('TextArea_' + $rootScope.TextNumber).drawLayers();
  1717 + $("#canvas").removeLayer("TextRect_" + $rootScope.resetTextRect).drawLayers();
  1718 +
  1719 + }
  1720 +
  1721 + }
  1722 + //-- End ----------------------------
  1723 +
  1724 +
495 $rootScope.AddClick = function (x, y, dragging) { 1725 $rootScope.AddClick = function (x, y, dragging) {
496 $rootScope.clickX.push(x); 1726 $rootScope.clickX.push(x);
497 $rootScope.clickY.push(y); 1727 $rootScope.clickY.push(y);
400-SOURCECODE/AIAHTML5.Web/app/views/ci/clinical-illustrations-detail.html
  View file @db2cdb5
1 <div> 1 <div>
2 <div ng-include="aap/widget/MainMenu.html"></div> 2 <div ng-include="aap/widget/MainMenu.html"></div>
3 - <div ng-init="openBodyView()" id="CIView" class="ciView" ng-controller="CIController"></div> 3 + <div ng-init="openBodyView()" id="CIView" class="ciView" ng-controller="CIController" style=" position: absolute !important;"></div>
  4 +
  5 +
4 </div> 6 </div>