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 429 $("html,body").scrollTop(0);
430 430 }
431 431  
  432 +
432 433 $scope.openView = function ($event) {
433   -
  434 +
  435 + $rootScope.CIAnotationIdentifyModeOff = true;
434 436 $rootScope.currentBodyViewId = $event.currentTarget.id;
435 437 if ($event.currentTarget.textContent !== null && typeof ($event.currentTarget.textContent) !== "undefined") {
436 438 var CITitle = [];
... ... @@ -532,7 +534,8 @@ function ($scope, $window, $rootScope, $compile, $http, log, $location, $timeout
532 534 theme: 'success',
533 535 currentController: 'CIController',
534 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 539 '<img src="' + $scope.clickedCIImage + '" alt="" title="" class="img-responsive "><div class="col-sm-12 well">' +
537 540 '<div align="left" id="sid"><p>' + $scope.clickedCISummary + '</p></div><button id="btnTxtOnOff" class="btn btn-primary pull-right">Text Off</button>' +
538 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 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 2573  
2574 2574  
2575 2575 if ($scope.isTransparencyActivated) {
2576   -
  2576 +
2577 2577 //crete temp canavs to store the original data which will be used to chnange the transparency
2578 2578 if (document.getElementById('tempCanvas') != null) {
2579 2579 $('#tempCanvas').remove();
... ... @@ -2598,46 +2598,48 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
2598 2598  
2599 2599  
2600 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 2645 else {
... ... @@ -6340,11 +6342,15 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
6340 6342 // $scope.currentY;
6341 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 6351 $("#canvas").css("display", "block");
6345 6352 $("#canvasPaint").css("display", "block");
6346   -
6347   - $scope.BindCanvasDrawingListners();
  6353 + $rootScope.BindCanvasDrawingListners();
6348 6354 $rootScope.FreeStylePaint();
6349 6355 });
6350 6356 $scope.mousePs;
... ... @@ -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 6366 function OnPaintCanvasMouseMove(event) {
... ... @@ -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 6439 //body highlight options functinality
7577 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 48 $rootScope.menuLabExer;
49 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 67 $rootScope.$on("$locationChangeSuccess", function () {
52 68  
53 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 224 $('.btnCursor').removeClass('activebtncolor');
209 225 $(".btn-annotation").removeClass("activebtncolor");
210 226 }
211   -
  227 + $rootScope.CIAnotationIdentifyModeOff = false;
212 228 $rootScope.OnIdentifyClick = function () {
213 229  
214 230 $("#OnIdentify").addClass("annotationtoolbartab");
215 231 $("#DrawMode").removeClass("annotationtoolbartab");
216 232 // $rootScope.isIdetifyClicked = true;
217 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 441 $rootScope.shapestyleborderWidth = 2;
420 442 $rootScope.shapestyleborderStyles = "solid";
421 443 $rootScope.shapestyle = function (id) {
422   -
  444 + // debugger;
423 445 document.getElementById('modelbackground').style.display = "none";
424 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 514  
493 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 1725 $rootScope.AddClick = function (x, y, dragging) {
496 1726 $rootScope.clickX.push(x);
497 1727 $rootScope.clickY.push(y);
... ...
400-SOURCECODE/AIAHTML5.Web/app/views/ci/clinical-illustrations-detail.html
  View file @db2cdb5
1 1 <div>
2 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 6 </div>
... ...