ADAM / AIAHTML5

Commit 122a725222cc5b7f6ccdb90825599cdd7fd58bea

Authored by Amit Kumar
2 parents a75f54b0 df499cdd

Merge branch 'Develop' of http://52.6.196.163/ADAM/AIAHTML5 into Test_stash 

Conflicts:
	400-SOURCECODE/AIAHTML5.Web/index.html
Inline Side-by-side
Showing 13 changed files with 4977 additions and 1210 deletions
400-SOURCECODE/AIAHTML5.Web/AIAHTML5.Web.csproj
  View file @122a725
... ... @@ -44565,6 +44565,8 @@
44565 44565 <Content Include="libs\angular\1.4.9\angular-route.min.js" />
44566 44566 <Content Include="libs\angular\1.4.9\ngStorage.js" />
44567 44567 <Content Include="libs\colorpicker\jquery.minicolors.min.js" />
  44568 + <Content Include="libs\FileSaver.js" />
  44569 + <Content Include="libs\html2canvas.js" />
44568 44570 <Content Include="libs\jcanvas\jcanvas.handle.min.js" />
44569 44571 <Content Include="libs\jcanvas\jcanvas.min.js" />
44570 44572 <Content Include="libs\jinqJs.js" />
... ...
400-SOURCECODE/AIAHTML5.Web/app/controllers/CAController.js
  View file @122a725
... ... @@ -58,9 +58,10 @@ function ($scope, $window, $rootScope, $compile, $http, log, $location, $timeout
58 58 }
59 59 else {
60 60 $scope.setActiveTab(1);
  61 + $scope.reRunSearchOnLoad();
61 62 }
62 63  
63   - $scope.reRunSearchOnLoad();
  64 +
64 65  
65 66 });
66 67  
... ... @@ -449,6 +450,8 @@ function ($scope, $window, $rootScope, $compile, $http, log, $location, $timeout
449 450 {
450 451 $('#AnnotaionPopupDiv').find('input, textarea, button, select,img,div').attr('disabled', 'disabled');
451 452 $('#slider-range-min-2').slider('disable');
  453 + $("#annotationpaintbrushsize").attr('disabled', 'disabled');
  454 + //$("#annotationpaintbrushsize").attr("href", "#");
452 455 }
453 456 $rootScope.isLoading = true;
454 457 $('#spinner').css('visibility', 'visible');
... ...
400-SOURCECODE/AIAHTML5.Web/app/controllers/CIController.js
  View file @122a725
... ... @@ -64,9 +64,10 @@ function ($scope, $window, $rootScope, $compile, $http, log, $location, $timeout
64 64 }
65 65 else {
66 66 $scope.setActiveTab(1);
  67 + $scope.reRunSearchOnLoad();
67 68 }
68 69  
69   - $scope.reRunSearchOnLoad();
  70 +
70 71  
71 72 });
72 73  
... ... @@ -562,7 +563,7 @@ function ($scope, $window, $rootScope, $compile, $http, log, $location, $timeout
562 563 theme: 'success',
563 564 currentController: 'CIController',
564 565 parentSlug: 'clinical-illustrations',
565   - 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>' +
  566 + content: '<div class="row" id="canvasDiv"><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>' +
566 567 '<div class="col-sm-12 img-thumbnail" align="center">' +
567 568 '<img src="' + $scope.clickedCIImage + '" alt="" title="" class="img-responsive "><div class="col-sm-12 well">' +
568 569 '<div align="left" id="sid"><p>' + $scope.clickedCISummary + '</p></div><button id="btnTxtOnOff" class="btn btn-primary pull-right">Text Off</button>' +
... ... @@ -619,7 +620,7 @@ function ($scope, $window, $rootScope, $compile, $http, log, $location, $timeout
619 620 $("#canvasPaint").css("display", "block");
620 621  
621 622 $rootScope.BindCanvasDrawingListners();
622   - // $rootScope.FreeStylePaint();
  623 + $rootScope.FreeStylePaint();
623 624 });
624 625  
625 626 $scope.ReloadListViewImageDiv = function (id) {
... ...
400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js
  View file @122a725
... ... @@ -15,6 +15,11 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
15 15 $rootScope.BodyLayerData;
16 16 $rootScope.VocabTermData;
17 17  
  18 + //for modesty image layers
  19 + $scope.lowerlayerNumberForModesty;
  20 + $scope.HigherlayerNumberForModesty;
  21 + $scope.layerInfoForModesty;
  22 +
18 23 $scope.VocabTermTxt;
19 24 $scope.CommonData
20 25 $rootScope.TermNumberData;
... ... @@ -89,7 +94,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
89 94  
90 95 //navigator man functionality
91 96 $scope.navigatorImage;
92   - $scope.NavigatorData;
  97 + $rootScope.NavigatorData;
93 98 $scope.navimgsrc;
94 99  
95 100 $scope.dragdivleft = 0;
... ... @@ -140,6 +145,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
140 145  
141 146 }
142 147  
  148 +
143 149 $scope.scroll = function () {
144 150 // $window.scrollTo(0, 0);
145 151 $("html,body").scrollTop(0);
... ... @@ -669,12 +675,12 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
669 675  
670 676 $http({ method: 'GET', url: NavigatorManJsonPath })
671 677 .success(function (data) {
672   - $scope.NavigatorData = data;
  678 + $rootScope.NavigatorData = data;
673 679  
674 680 $scope.skinTone = $rootScope.globalSetting.ethnicity;
675 681  
676 682 var navigatorManData = new jinqJs()
677   - .from($scope.NavigatorData.Navigtor.ViewOrientation)
  683 + .from($rootScope.NavigatorData.Navigtor.ViewOrientation)
678 684 .where("_ViewOrientationId == " + $rootScope.currentBodyViewId)
679 685 .select();
680 686  
... ... @@ -709,7 +715,8 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
709 715 navImageModesty = $scope.navigatorImage[0]._ImageName;
710 716 }
711 717  
712   - $scope.navimgsrc = "~/../content/images/DA/ethnicity/body-views/" + $scope.voId + '/' + $scope.skinTone + '/navigator_images/' + navImageModesty;
  718 + // $scope.navimgsrc = "~/../content/images/DA/ethnicity/body-views/" + $scope.voId + '/' + $scope.skinTone + '/navigator_images/' + navImageModesty;
  719 + document.getElementById('navimg').src = "~/../content/images/DA/ethnicity/body-views/" + $scope.voId + '/' + $scope.skinTone + '/navigator_images/' + navImageModesty;
713 720  
714 721 $('#navigatorDiv').css('visibility', 'visible');
715 722  
... ... @@ -772,21 +779,23 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
772 779  
773 780 //calculate coordinates for body region images
774 781 $scope.CalculateImageCordinates = function (viewOrientationId) {
775   -
  782 + $scope.layerInfoForModesty = [];
776 783 $rootScope.isLoading = true;
777 784 $('#spinner').css('visibility', 'visible');
778 785 $scope.modestyImageInfo = [];
779 786 // annotation toolbar canvas
780   - if ($("#canvasDiv").find("canvas[id='canvasPaint']").length == 0) {
781 787  
782   - $("#canvasDiv").append('<canvas id="canvasPaint" width="2277" height="3248" class="canvas-annotationStyle1"></canvas><canvas id="canvas" width="2277" height="3248" class="canvas-annotationStyle"></canvas>');
783   - $scope.BindCanvasDrawingListners();
  788 + //history code
  789 +
  790 + if ($("#canvasDiv").find("canvas[id='canvasPaint']").length == 0) {
  791 + var ATBarHtml = $("#canvasDiv").append('<canvas id="canvasPaint" width="2277" height="3248" ng-click="FreeStylePaint($event)" class="canvas-annotationStyle1"></canvas><canvas id="canvas" ng-click="onDrawingCanvasClick($event)" width="2277" height="3248" class="canvas-annotationStyle"></canvas>');
  792 + $compile(ATBarHtml)($scope);
  793 + $scope.onDrawingCanvasClick();
784 794 // $rootScope.FreeStylePaint();
785 795  
786 796 }
787 797  
788 798  
789   -
790 799 $scope.terminateCurrentlyRunningWPs();
791 800  
792 801 var drawnBodyRegionCount = [];
... ... @@ -966,9 +975,13 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
966 975 if ((dtlOfSktn != null || dtlOfSktn != undefined) && (dtlOfSktn.length > 0)) {
967 976  
968 977 if ((parseInt(dtlOfSktn[0]._lns) <= parseInt($scope.layerNumber)) && (parseInt(dtlOfSktn[0]._lne) > parseInt($scope.layerNumber)) && (dtlOfSktn[0]._isfr == 'Y')) {
  978 +
969 979 $scope.figLaefImageName = dtlOfSktn[0]._ImageId;
970   - //$scope.figLaefX = filtereddata[0]._X;
971   - //$scope.figLaefY = filtereddata[0]._Y;
  980 +
  981 +
  982 + $scope.lowerlayerNumberForModesty = dtlOfSktn[0]._lns;
  983 + $scope.HigherlayerNumberForModesty = dtlOfSktn[0]._lne;
  984 + $scope.layerInfoForModesty.push({ "bodyRegionId": value._BodyRegionId, "lowerlayerNumberForModesty": $scope.lowerlayerNumberForModesty, "HigherlayerNumberForModesty": $scope.HigherlayerNumberForModesty })
972 985  
973 986 var rectangle = scaleRectangle(value._X, value._Y, value._Height, value._Width, value._MirrorValue);
974 987  
... ... @@ -2987,6 +3000,15 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
2987 3000  
2988 3001 //$(".com").css("display", "none");
2989 3002 //$("#bord").css({ "width": "0px", "display": "none" });
  3003 +
  3004 + //history maintained issue
  3005 + if ($rootScope.isAnnotaionToolBarDrawingModeActive == false) {
  3006 + $("#sppeachBubble").remove();
  3007 + $("#dot").remove();
  3008 + }
  3009 +
  3010 +
  3011 +
2990 3012 $(".com").remove();
2991 3013 $("#bord").remove();
2992 3014  
... ... @@ -3089,6 +3111,12 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
3089 3111 document.getElementById('sppeachBubble').style.left = (Globe[0].currentX) + 'px';
3090 3112 document.getElementById('sppeachBubble').style.top = (Globe[0].currentY) + 'px';
3091 3113  
  3114 +
  3115 + //history maintained issue
  3116 + if ($rootScope.isAnnotaionToolBarDrawingModeActive == false) { document.getElementById('sppeachBubble').style.zIndex = "100000000000"; }
  3117 +
  3118 +
  3119 +
3092 3120 $('#sppeachBubble').draggable(
3093 3121 {
3094 3122 drag: function (evt) {
... ... @@ -3572,6 +3600,41 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
3572 3600  
3573 3601 }
3574 3602  
  3603 +
  3604 + if (document.getElementById("btnStrutureBox").name == "showAnnotationStructure") {
  3605 + $scope.showAnnotation()
  3606 +
  3607 + }
  3608 + else {
  3609 + $scope.hideAnnotation()
  3610 +
  3611 +
  3612 + }
  3613 + }
  3614 +
  3615 + $scope.showAnnotation = function()
  3616 + {
  3617 + $(".com").show();
  3618 + $('#dot').show();
  3619 + $('#bord').show();
  3620 + $('#sppeachBubble').show();
  3621 + $('#sppeachBubble_annotation').show();
  3622 +
  3623 + $("#bord_annotation").show();
  3624 + $("#dot_annotation").show();
  3625 + $(".dynCross_anno").parent().parent().parent().show();
  3626 + }
  3627 +
  3628 + $scope.hideAnnotation=function()
  3629 + {
  3630 + $(".com").hide();
  3631 + $('#dot').hide();
  3632 + $('#bord').hide();
  3633 + $('#sppeachBubble').hide();
  3634 + $('#sppeachBubble_annotation').hide();
  3635 + $("#bord_annotation").hide();
  3636 + $("#dot_annotation").hide();
  3637 + $(".dynCross_anno").parent().parent().parent().hide();
3575 3638 }
3576 3639  
3577 3640 $scope.createSpeechBubbleBasedOnAnnotationLength = function (pointClicked, x, y, id) {
... ... @@ -4384,13 +4447,6 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
4384 4447 //keep the original image on temp canavs to use it in changing transparency
4385 4448  
4386 4449  
4387   -
4388   - //if (document.getElementById(modestyTransTempCanvasId) != undefined || document.getElementById(modestyTransTempCanvasId) != null) {
4389   - // var contxModesty = document.getElementById(modestyTransTempCanvasId).getContext('2d');
4390   - // var tbTempCanvas = document.getElementById(tempCanvasID)
4391   - // contx.drawImage(tbTempCanvas, XforCopyImage, YforCopyImage, WidthforCopyImage, HeightforCopyImage, XforTransImage, YforTransImage, WidthforTransImage, HeightforTransImage);
4392   -
4393   - //}
4394 4450 if ($rootScope.isModestyOn == true && (bodyRegionId.match('modestyImg'))) {
4395 4451 var modestyTempCanvasId = 'tempCanvasModesty_' + bodyRegionId;
4396 4452 if (document.getElementById(modestyTempCanvasId) != undefined || document.getElementById(modestyTempCanvasId) != null) {
... ... @@ -4480,6 +4536,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
4480 4536 }
4481 4537 tempImg.src = tranparencyImgSrc;//"http://localhost/AIA/" + tranparencyImgSrc;
4482 4538  
  4539 +
4483 4540 }
4484 4541  
4485 4542  
... ... @@ -4514,9 +4571,41 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
4514 4571 PreviousBodyRegionX = XforTransImage;
4515 4572 previousBodyRegionId = bodyRegionId;
4516 4573  
4517   - // $scope.layerNumber = parseInt($scope.layerNumber - 1);
4518 4574  
4519   - //}
  4575 + //set modesty image visiblility true/false as per layer
  4576 +
  4577 +
  4578 + var layerInfo = new jinqJs()
  4579 + .from($scope.layerInfoForModesty)
  4580 + .where('bodyRegionId == ' + bodyRegionId)
  4581 + .select();
  4582 + if (layerInfo != undefined && layerInfo.length>0){
  4583 + var lowerlayerNumberForModesty = layerInfo[0].lowerlayerNumberForModesty;
  4584 + var HigherlayerNumberForModesty = layerInfo[0].HigherlayerNumberForModesty;
  4585 +
  4586 + var modestyTransCanvases = $("canvas[id*='modestyTransCanavs']");
  4587 +
  4588 + if (modestyTransCanvases != null || modestyTransCanvases != undefined && modestyTransCanvases.length > 0) {
  4589 + for (var j = 0; j < modestyTransCanvases.length; j++) {
  4590 +
  4591 + if (modestyTransCanvases[j].id.match(bodyRegionId)) {
  4592 +
  4593 + var modestyCanavs = document.getElementById(modestyTransCanvases[j].id);
  4594 +
  4595 + if ((parseInt(lowerlayerNumberForModesty) <= parseInt($scope.layerNumber)) && (HigherlayerNumberForModesty) > parseInt($scope.layerNumber)) {
  4596 +
  4597 + modestyCanavs.style.visibility = 'visible';
  4598 + }
  4599 + else {
  4600 +
  4601 + modestyCanavs.style.visibility = 'hidden';
  4602 +
  4603 + }
  4604 + }
  4605 +
  4606 + }
  4607 + }
  4608 + }
4520 4609  
4521 4610 }
4522 4611  
... ... @@ -4611,6 +4700,114 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
4611 4700 //}
4612 4701 }
4613 4702  
  4703 + // History Maintained Issue//
  4704 +
  4705 + $rootScope.getAnnotationTextBasedOnSelectedBodyRegion = function (event) {
  4706 +
  4707 +
  4708 + var canvasDiv = document.getElementById('canvasDiv');
  4709 + var verticalScrollPosition = canvasDiv.scrollTop;
  4710 + var horizontlScrollPosition = canvasDiv.scrollLeft;
  4711 +
  4712 +
  4713 + $rootScope.Xaxis = event.pageX - $('#canvasDiv').offset().left + horizontlScrollPosition;
  4714 + $rootScope.Yaxis = event.pageY - $('#canvasDiv').offset().top + verticalScrollPosition;
  4715 +
  4716 +
  4717 + $rootScope.setSelectedBodyRegionData();
  4718 +
  4719 + if ($rootScope.isMirrorBodyRegion == "No") {
  4720 + var maskCanvasId = "imageCanvas" + $rootScope.BRId + "_mci";
  4721 + var maskCanvas = document.getElementById(maskCanvasId);
  4722 + var maskCanvasContext = maskCanvas.getContext("2d");
  4723 + //var canvasDiv = document.getElementById('canvasDiv');
  4724 + //var verticalScrollPosition = canvasDiv.scrollTop;
  4725 + //var horizontlScrollPosition = canvasDiv.scrollLeft;
  4726 + var actulalX = $rootScope.Xaxis;
  4727 + var actualY = $rootScope.Yaxis;
  4728 + var RGBColor = $scope.GetRGBColor(maskCanvasContext, actulalX, actualY, $rootScope.BodyRegionXAxis, $rootScope.BodyRegionYAxis);
  4729 + var annotationText = $scope.GetAnnotationText(parseInt(RGBColor));
  4730 +
  4731 + }
  4732 + else {
  4733 +
  4734 + var maskCanvasId = "imageCanvas" + $rootScope.BRId + "_MR_mci";
  4735 + var maskoffsetval = $('#' + maskCanvasId).offset();
  4736 + var mirrorCanvasX = maskoffsetval.left;
  4737 + //alert(mirrorCanvasX);
  4738 + var mirrorImageCanvas = document.getElementById(maskCanvasId);
  4739 + var mirrorCanvasWidth = mirrorImageCanvas.clientWidth;
  4740 + // alert(mirrorCanvasWidth);
  4741 + var maskCanvas = document.getElementById(maskCanvasId);
  4742 + var maskCanvasContext = maskCanvas.getContext("2d");
  4743 +
  4744 + var distanceXOnMirrorImage = (parseInt(mirrorCanvasX) + parseInt(mirrorCanvasWidth)) - (parseInt(event.pageX) + horizontlScrollPosition);// - 135);
  4745 + var mirrorXOnNormalImage = parseInt(maskCanvasContext.canvas.offsetLeft) + parseInt(distanceXOnMirrorImage);
  4746 + var actulalX = mirrorXOnNormalImage;
  4747 + var actualY = event.pageY + verticalScrollPosition;
  4748 + var pixelData = maskCanvasContext.getImageData(Math.round(actulalX - parseInt(maskCanvasContext.canvas.offsetLeft)), Math.round(actualY - $rootScope.BodyRegionYAxis), 1, 1);
  4749 + pixelData.data[0] = pixelData.data[0] - 9;
  4750 + pixelData.data[1] = pixelData.data[1] - 9;
  4751 + pixelData.data[2] = pixelData.data[2] - 9
  4752 + var Red;
  4753 + var Green;
  4754 + var Blue;
  4755 + var zero = "0";
  4756 + if ((pixelData.data[0]).toString().length != 2) {
  4757 + Red = zero.concat((pixelData.data[0]).toString())
  4758 + }
  4759 + else {
  4760 + Red = (pixelData.data[0]).toString()
  4761 + }
  4762 + if ((pixelData.data[1]).toString().length != 2) {
  4763 + Green = zero.concat((pixelData.data[1]).toString())
  4764 + }
  4765 + else {
  4766 + Green = (pixelData.data[1]).toString()
  4767 + }
  4768 + if ((pixelData.data[2]).toString().length != 2) {
  4769 + Blue = zero.concat((pixelData.data[2]).toString())
  4770 + }
  4771 + else {
  4772 + Blue = (pixelData.data[2]).toString()
  4773 + }
  4774 + var RGBColor = (Red + Green + Blue);
  4775 + // alert(RGBColor);
  4776 + //$rootScope.previousHighlightList.push(RGBColor);
  4777 +
  4778 + }
  4779 +
  4780 + // var maskCanvasId = "imageCanvas" + $rootScope.BRId + "_mci";
  4781 +
  4782 + // alert(annotationText);
  4783 + $scope.MultiLanguageAnnationArray = [];
  4784 + $scope.MultiLanguageAnnationArray.push(annotationText);
  4785 + if (annotationText == "undefined") {
  4786 + }
  4787 + else {
  4788 + $scope.createDynamicSpeechBubble(event, event.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left, event.pageY + verticalScrollPosition - $('#canvasDiv').offset().top, true)
  4789 + }
  4790 +
  4791 +
  4792 + }
  4793 +
  4794 +
  4795 + $rootScope.setSelectedBodyRegionData = function () {
  4796 + var BodyRegionDictionary = $rootScope.BodyRegionCordinatesData;
  4797 +
  4798 + $.each(BodyRegionDictionary, function (index, value) {
  4799 + var bodyRegionRight = parseInt(value.X) + parseInt(value.Width);
  4800 + var bodyRegionBottom = parseInt(value.Y) + parseInt(value.Height);
  4801 + if ($rootScope.Xaxis <= bodyRegionRight && $rootScope.Yaxis <= bodyRegionBottom && value.X <= $rootScope.Xaxis && value.Y <= $rootScope.Yaxis) {
  4802 + $rootScope.BRId = value.bodyRegionId;
  4803 + $rootScope.BodyRegionXAxis = value.X;
  4804 + $rootScope.BodyRegionYAxis = value.Y;
  4805 + $rootScope.isMirrorBodyRegion = value.IsMirror;
  4806 + return false;
  4807 + }
  4808 + });
  4809 + }
  4810 +
4614 4811  
4615 4812  
4616 4813 function resizeCanvas() {
... ... @@ -5216,7 +5413,6 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
5216 5413 ctx.putImageData(originalTransparencyData, 0, 0);
5217 5414  
5218 5415  
5219   - //for modesty
5220 5416  
5221 5417 //for modesty
5222 5418 if ($rootScope.isModestyOn == true && $scope.modestyImageInfo.length > 0) {
... ... @@ -5226,10 +5422,13 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
5226 5422  
5227 5423 var modestyTransTempCanvasId = 'tempCanvasModesty_' + brId;
5228 5424 var modestyTransCanvasId = 'modestyTransCanavs_' + brId;
5229   - var tempCanvasContext = document.getElementById(modestyTransTempCanvasId).getContext('2d');
5230   - var originalTransparencyData = tempCanvasContext.getImageData(0, 0, value.Width, value.Height);
5231   - var ctx = document.getElementById(modestyTransCanvasId).getContext('2d');
5232   - ctx.putImageData(originalTransparencyData, 0, 0);
  5425 + if (document.getElementById(modestyTransTempCanvasId) != null) {
  5426 +
  5427 + var tempCanvasContext = document.getElementById(modestyTransTempCanvasId).getContext('2d');
  5428 + var originalTransparencyData = tempCanvasContext.getImageData(0, 0, value.Width, value.Height);
  5429 + var ctx = document.getElementById(modestyTransCanvasId).getContext('2d');
  5430 + ctx.putImageData(originalTransparencyData, 0, 0);
  5431 + }
5233 5432 })
5234 5433 }
5235 5434  
... ... @@ -5881,20 +6080,24 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
5881 6080  
5882 6081  
5883 6082 //if listanager is visisble then close it
  6083 +
5884 6084  
5885 6085 $rootScope.isListManagerSelected = false;
5886 6086 $rootScope.CloseListManager();
  6087 + var btnStrutureBoxname = document.getElementById("btnStrutureBox").name;
5887 6088  
5888   - $(".com").toggle();
5889   - $('#dot').toggle();
5890   - $('#bord').toggle();
5891   - $('#sppeachBubble').toggle();
5892   - $('#sppeachBubble_annotation').toggle();
5893   -
5894   - $("#bord_annotation").toggle();
5895   - $("#dot_annotation").toggle();
5896   - $(".dynCross_anno").parent().parent().parent().toggle();
  6089 + if (btnStrutureBoxname == "showAnnotationStructure") {
  6090 + $("#btnStrutureBox").addClass("disableHideShowStructure");
  6091 + $scope.hideAnnotation();
  6092 + document.getElementById("btnStrutureBox").name = "hideAnnotationStructure";
  6093 + }
  6094 + else {
  6095 + $("#btnStrutureBox").removeClass("disableHideShowStructure");
  6096 + $scope.showAnnotation();
5897 6097  
  6098 + document.getElementById("btnStrutureBox").name = "showAnnotationStructure";
  6099 + }
  6100 +
5898 6101 }
5899 6102  
5900 6103  
... ... @@ -6409,7 +6612,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
6409 6612  
6410 6613  
6411 6614 //4.
6412   - $scope.loadSelectedBodyViewNavigator(currentBodyViewId);
  6615 + $scope.loadNavigatorForSelectedBodyView(currentBodyViewId);
6413 6616  
6414 6617 //5. change the search terms as per the selected bodyview
6415 6618 $scope.loadSearchDataForBodyView();
... ... @@ -6441,7 +6644,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
6441 6644  
6442 6645  
6443 6646 //4.
6444   - $scope.loadSelectedBodyViewNavigator(currentBodyViewId);
  6647 + $scope.loadNavigatorForSelectedBodyView(currentBodyViewId);
6445 6648  
6446 6649 //5. change the search terms as per the selected bodyview
6447 6650 $scope.loadSearchDataForBodyView();
... ... @@ -6641,7 +6844,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
6641 6844 $scope.loadSelectedBodyView($rootScope.voId);
6642 6845  
6643 6846 //3. load corresponding navigator man
6644   - $scope.loadSelectedBodyViewNavigator($rootScope.voId);
  6847 + $scope.loadNavigatorForSelectedBodyView($rootScope.voId);
6645 6848  
6646 6849 //4. change the search terms as per the selected bodyview
6647 6850 $scope.loadSearchDataForBodyView();
... ... @@ -6675,7 +6878,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
6675 6878 $scope.loadSelectedBodyView($rootScope.voId);
6676 6879  
6677 6880 //2.
6678   - $scope.loadSelectedBodyViewNavigator($rootScope.voId);
  6881 + $scope.loadNavigatorForSelectedBodyView($rootScope.voId);
6679 6882 };
6680 6883  
6681 6884  
... ... @@ -6761,20 +6964,28 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
6761 6964  
6762 6965 })
6763 6966  
  6967 + $scope.$on('changeNavigatorModestyEvent', function (event, data) {
  6968 + console.log('changeNavigatorModestyEvent');
  6969 +
  6970 + $scope.loadNavigatorForSelectedBodyView(data.bodyViewId);
  6971 +
  6972 + })
6764 6973 //Reload DA controller Body View after setting Change
6765 6974 $scope.$on('reloadDABodyViewEvent', function (event, data) {
6766 6975 //console.log('reloadDABodyViewEvent');
6767   - $scope.layerNumber = parseInt($('#txtlayerNumber').val());
6768   - //alert('mouseUp');
  6976 + if ($rootScope.isSettingEventAlredayDispachted == true) {
  6977 + $rootScope.isSettingEventAlredayDispachted = false;
  6978 + $scope.layerNumber = parseInt($('#txtlayerNumber').val());
  6979 + //alert('mouseUp');
6769 6980  
6770 6981  
6771   - if ($scope.layerNumber == 0) {
6772   - $scope.loadSelectedBodyView(data.reloadDABodyViewId);
6773   - }
6774   - // $scope.loadSelectedBodyView(data.reloadDABodyViewId);
6775   -
6776   - $scope.loadSelectedBodyViewNavigator(data.reloadDABodyViewId);
  6982 + if ($scope.layerNumber == 0) {
  6983 + $scope.loadSelectedBodyView(data.reloadDABodyViewId);
  6984 + }
  6985 + // $scope.loadSelectedBodyView(data.reloadDABodyViewId);
6777 6986  
  6987 + $scope.loadNavigatorForSelectedBodyView(data.reloadDABodyViewId);
  6988 + }
6778 6989 // $scope.currentTitleFromJson = localStorage.getItem("currentViewTitle");
6779 6990  
6780 6991 //$rootScope.isSettingEventAlredayDispachted = false;
... ... @@ -6782,17 +6993,15 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
6782 6993  
6783 6994 })
6784 6995  
6785   -
6786   -
6787   - $scope.loadSelectedBodyViewNavigator = function (currentBodyViewId) {
  6996 + $scope.loadNavigatorForSelectedBodyView = function (currentBodyViewId) {
6788 6997  
6789 6998 //$rootScope.voId = currentBodyViewId;
6790 6999  
6791 7000 //$scope.skinTone = $rootScope.globalSetting.ethnicity;
6792 7001  
6793   - if ($scope.NavigatorData != null || $scope.NavigatorData != undefined) {
  7002 + if ($rootScope.NavigatorData != null || $rootScope.NavigatorData != undefined) {
6794 7003 var navdtlOrient = new jinqJs()
6795   - .from($scope.NavigatorData.Navigtor.ViewOrientation)
  7004 + .from($rootScope.NavigatorData.Navigtor.ViewOrientation)
6796 7005 .where("_ViewOrientationId == " + currentBodyViewId)
6797 7006 .select();
6798 7007  
... ... @@ -6822,7 +7031,8 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
6822 7031  
6823 7032 }
6824 7033  
6825   - $scope.navimgsrc = "~/../content/images/DA/ethnicity/body-views/" + $scope.voId + '/' + $rootScope.globalSetting.ethnicity + '/navigator_images/' + navImageModesty;
  7034 + // $scope.navimgsrc = 'http://localhost/AIAHTML5/content/images/DA/ethnicity/body-views/' + $scope.voId + '/' + $rootScope.globalSetting.ethnicity + '/navigator_images/' + navImageModesty;//"~/../content/images/DA/ethnicity/body-views/" + $scope.voId + '/' + $rootScope.globalSetting.ethnicity + '/navigator_images/' + navImageModesty;
  7035 + document.getElementById('navimg').src = '~/../content/images/DA/ethnicity/body-views/' + $scope.voId + '/' + $rootScope.globalSetting.ethnicity + '/navigator_images/' + navImageModesty;//"~/../content/images/DA/ethnicity/body-views/" + $scope.voId + '/' + $rootScope.globalSetting.ethnicity + '/navigator_images/' + navImageModesty;
6826 7036 }
6827 7037 }
6828 7038  
... ... @@ -6847,7 +7057,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
6847 7057  
6848 7058 $("#canvas").css("display", "block");
6849 7059 $("#canvasPaint").css("display", "block");
6850   - $rootScope.BindCanvasDrawingListners();
  7060 + $rootScope.onDrawingCanvasClick();
6851 7061 $rootScope.FreeStylePaint();
6852 7062 });
6853 7063 $scope.mousePs;
... ... @@ -6861,114 +7071,8 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
6861 7071  
6862 7072  
6863 7073  
6864   - $rootScope.FreeStylePaint = function (e) {
6865   -
6866   - var annotationCanvas = document.getElementById("canvas");
6867   - // document.getElementById("canvasPaint").addEventListener("mouseup", OnPaintBrushCanvasMouseUp);
6868   -
6869   - annotationCanvas.addEventListener('mousedown', $scope.OnPaintCanvasMouseDown, false);
6870   -
6871   - annotationCanvas.addEventListener('mouseup', $scope.OnPaintBrushCanvasMouseUp, false);
6872   - }
6873   - $scope.OnPaintCanvasMouseDown = function (event) {
6874   - $rootScope.isMousedownOnPaintCanvas = true;
6875   - $scope.isStartPointDeleted = false;
6876   - var annotationCanvas = document.getElementById("canvas");
6877   - $scope.startPageX = parseInt(event.clientX - ($("#canvas").offset().left));
6878   - $scope.startPageY = parseInt(event.clientY - ($("#canvas").offset().top));
6879   -
6880   - annotationCanvas.addEventListener('mousemove', $scope.OnPaintCanvasMouseMove, false);
6881   -
6882   -
6883   -
6884   - }
6885   - $scope.OnPaintCanvasMouseMove = function (event) {
6886   -
6887   -
6888   - $rootScope.xPage = parseInt(event.clientX - ($("#canvas").offset().left));
6889   - $rootScope.yPage = parseInt(event.clientY - ($("#canvas").offset().top));
6890   -
6891   - var btneraseBrushSizeValue = $("#btnBrushSize").val();
6892   - $rootScope.eraseshapeSize = parseInt(btneraseBrushSizeValue);
6893   -
6894   - if ($rootScope.isEraseToolSelected == true && $rootScope.isMousedownOnPaintCanvas == true) {
6895   -
6896   - var sktch = $('#canvasPaint').sketch();
6897   - $('#canvasPaint').sketch().actions = [];
6898   - var paintCanvas = document.getElementById("canvasPaint");
6899   - var paintCanvasContext = paintCanvas.getContext('2d');
6900   - if ($scope.isStartPointDeleted == false) {
6901   -
6902   - paintCanvasContext.clearRect($scope.startPageX, $scope.startPageY, $rootScope.eraseshapeSize, $rootScope.eraseshapeSize);
6903   -
6904   - $scope.isStartPointDeleted = true;
6905   - }
6906   -
6907   - paintCanvasContext.clearRect($rootScope.xPage, $rootScope.yPage, $rootScope.eraseshapeSize, $rootScope.eraseshapeSize);
6908   -
6909   -
6910   - }
6911   - }
6912   - $scope.OnPaintBrushCanvasMouseDown = function (event) {
6913   - switch ($rootScope.shapeType) {
6914   -
6915   - case "FreeStylePaint":
6916   -
6917   -
6918   -
6919   - // $('#canvasPaint').sketch();
6920   - // $('#canvasPaint').sketch({ defaultSize: 1 });
6921   - // if ($("#amount-2").val() == '') {
6922   - // //$('#canvasPaint').sketch({ defaultSize: $scope.shapesize });
6923   - // $('#canvasPaint').sketch();
6924   - // }
6925   - // else {
6926   -
6927   - // // var a = $("#amount-2").val();
6928   - //// $scope.shapesize = parseInt(a);
6929   - // // $('#canvasPaint').sketch({ defaultSize: $rootScope.shapeSize });
6930   - // // $('#canvasPaint').sketch({ defaultSize: $scope.shapesize });
6931   -
6932   - // }
6933   -
6934   -
6935   - break;
6936   -
6937   - }
6938   - }
6939   - $scope.OnPaintBrushCanvasMouseUp = function (event) {
6940   - $rootScope.isMousedownOnPaintCanvas = false;
6941   - $rootScope.isEraseToolSelected = false;
6942   -
6943   - // var canvasElement1 = document.getElementById("canvasPaint");
6944   - // var ctx1 = canvasElement1.getContext("2d");
6945   -
6946   - //switch($rootScope.shapeType)
6947   - //{
6948   -
6949   - // case "FreeStylePaint":
6950   -
6951   -
6952   - // if ($("#amount-2").val() == '')
6953   - // {
6954   - // $('#canvasPaint').sketch({ defaultSize: $scope.shapesize });
6955   - // }
6956   - // else
6957   - // {
6958   -
6959   - // var a = $("#amount-2").val();
6960   - // $scope.shapesize = parseInt(a);
6961   - // alert(JSON.stringify({ defaultSize: $scope.shapesize }));
6962   - // $('#canvasPaint').sketch({ defaultSize: $scope.shapesize });
6963   -
6964   - // }
6965   -
6966   -
6967   - // break;
6968   -
6969   - //}
6970   -
6971   - }
  7074 +
  7075 +
6972 7076  
6973 7077  
6974 7078  
... ... @@ -7318,6 +7422,8 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
7318 7422 $('#termList option[value="' + $rootScope.searchSelectedText + '"]').prop("selected", true);
7319 7423 $("#termList").find("option").css({ "background-color": "#ffffff", "color": "#000000" });
7320 7424 $('#termList option[value="' + $rootScope.searchSelectedText + '"]').css({ "background-color": "#3399FF", "color": "#ffffff" });
  7425 +
  7426 +
7321 7427 $rootScope.isLoading = true;
7322 7428  
7323 7429 $('#spinner').css('visibility', 'visible');
... ...
400-SOURCECODE/AIAHTML5.Web/app/controllers/HomeController.js
  View file @122a725
... ... @@ -64,19 +64,30 @@ AIA.controller(&quot;HomeController&quot;, [&quot;$rootScope&quot;, &quot;Modules&quot;, &quot;$log&quot;, &quot;$location&quot;,
64 64  
65 65 $rootScope.isEraseToolSelected = false;
66 66 $rootScope.isMousedownOnPaintCanvas = false;
  67 + //opacity code
  68 + $rootScope.shapestyleOpacity = 1;
  69 + $rootScope.shapestyleFillColor = "#fff";
  70 + $rootScope.shapestyleFillBorderColor = "black";
  71 + $rootScope.shapestyleborderWidth = 2;
  72 + $rootScope.shapestyleborderStyles = "solid";
67 73  
68 74 $rootScope.$on("$locationChangeSuccess", function () {
69 75  
70   - if (($location.url() == "/da-body-view") || ($location.url() == "/clinical-illustrations-detail") || ($location.url() == "/clinical-animations-detail")) {
  76 + if (($location.url() == "/da-body-view")) {
71 77 $rootScope.disableMenuannotation = " ";
72 78 $rootScope.disableMenuoption = " ";
73 79  
74   -
  80 + }
  81 + else if (($location.url() == "/clinical-illustrations-detail") || ($location.url() == "/clinical-animations-detail")) {
  82 + $rootScope.disableMenuannotation = " ";
  83 + $rootScope.disableMenuoption = " ";
  84 + $rootScope.disableSubMenu = "disableSubMenu";
75 85 }
76 86 else {
77 87  
78 88 $rootScope.disableMenuannotation = "disableMenuannotation";
79 89 $rootScope.disableMenuoption = "disableMenuoption";
  90 + $rootScope.disableSubMenu = "";
80 91 $rootScope.CloseAnnotationTool();
81 92 $rootScope.CloseListManager();
82 93 angular.element('#modal-settings').modal('hide');
... ... @@ -140,16 +151,6 @@ AIA.controller(&quot;HomeController&quot;, [&quot;$rootScope&quot;, &quot;Modules&quot;, &quot;$log&quot;, &quot;$location&quot;,
140 151 }
141 152 }
142 153  
143   - // $rootScope.DrawLine = function () {
144   - //$rootScope.isIdetifyClicked = false;
145   - //$rootScope.isDrawingToolSelected = true;
146   - //$rootScope.isLineDrawSelecyed = true;
147   - // $rootScope.shapeType = "Line";
148   - // alert($rootScope.shapeType);
149   -
150   -
151   - // }
152   -
153 154 $rootScope.ClearIframe = function () {
154 155 if ($('#daImagePanel') != null)
155 156 $('#daImagePanel').remove();
... ... @@ -171,18 +172,25 @@ AIA.controller(&quot;HomeController&quot;, [&quot;$rootScope&quot;, &quot;Modules&quot;, &quot;$log&quot;, &quot;$location&quot;,
171 172 //7904
172 173 if ($rootScope.MenuModuleName == "DA") {
173 174 if ($rootScope.disableAnnotationtoolOnListManager == true) {
174   - $('#AnnotaionPopupDiv').find('input, textarea, button, select,img,div').attr('disabled', 'disabled');
  175 + $('#AnnotaionPopupDiv').find('a,input, textarea, button, select,img,div').attr('disabled', 'disabled');
175 176 $('#slider-range-min-2').slider('disable');
  177 + $("#annotationpaintbrushsize").attr('disabled', 'disabled');
  178 +
176 179  
177 180 // $rootScope.disableAnnotationTB = false;
178 181 } else {
179 182 $('#AnnotaionPopupDiv').find('input, textarea, button, select,img,div').removeAttr('disabled', 'disabled');
180 183 $('#slider-range-min-2').slider('enable');
  184 + $("#annotationpaintbrushsize").removeAttr('disabled', 'disabled');
181 185 }
182 186 // document.getElementById('modelbackground').style.display = "block";
183 187 // document.getElementById('modeleditstyle').style.display = "block";
184 188  
185 189 }
  190 + if ($rootScope.MenuModuleName == "CA")
  191 + {
  192 + $("#annotationpaintbrushsize").attr("href", "#");
  193 + }
186 194 $("#OnIdentify").addClass("annotationtoolbartab");
187 195 $("#annotationToolBarOptions").addClass("active");
188 196 $("#annotationButton").addClass("active");
... ... @@ -190,8 +198,8 @@ AIA.controller(&quot;HomeController&quot;, [&quot;$rootScope&quot;, &quot;Modules&quot;, &quot;$log&quot;, &quot;$location&quot;,
190 198 $rootScope.isAnnotationWindowOpen = true;
191 199 $(".annotationTollbar").css("display", "block");
192 200 $rootScope.$broadcast('annotationToolEvent', true);
193   - $("#canvasPaint").css("display", "none");
194   - $("#canvas").css("display", "none");
  201 + // $("#canvasPaint").css("display", "none");
  202 + // $("#canvas").css("display", "none");
195 203  
196 204 var FontFamilyJson = '~/../content/data/json/settings/fontstyle.json';
197 205 if ($rootScope.isFontFamilyLoaded == false) {
... ... @@ -232,10 +240,11 @@ AIA.controller(&quot;HomeController&quot;, [&quot;$rootScope&quot;, &quot;Modules&quot;, &quot;$log&quot;, &quot;$location&quot;,
232 240  
233 241 $(".annotationTollbar").css("display", "none");
234 242 $rootScope.isAnnotationWindowClose = true;
235   - $("#canvasPaint").css("display", "none");
236   - $("#canvas").css("display", "none");
  243 + // $("#canvasPaint").css("display", "none");
  244 + // $("#canvas").css("display", "none");
237 245 $('.btnCursor').removeClass('activebtncolor');
238 246 $(".btn-annotation").removeClass("activebtncolor");
  247 + $rootScope.isAnnotaionToolBarDrawingModeActive = true;
239 248 }
240 249 $rootScope.CIAnotationIdentifyModeOff = false;
241 250 $rootScope.OnIdentifyClick = function () {
... ... @@ -249,25 +258,31 @@ AIA.controller(&quot;HomeController&quot;, [&quot;$rootScope&quot;, &quot;Modules&quot;, &quot;$log&quot;, &quot;$location&quot;,
249 258 $('.btnCursor').removeClass('activebtncolor');
250 259  
251 260 } else {
252   - $("#canvasPaint").css("display", "none");
253   - $("#canvas").css("display", "none");
  261 + // $("#canvasPaint").css("display", "none");
  262 + // $("#canvas").css("display", "none");
254 263  
255 264 // $("#canvasPaint").css("z-index", "0");
256 265 // $("#canvas").css("z-index", "0");
257 266 $('.btnCursor').removeClass('activebtncolor');
258 267  
259 268 }
  269 +
  270 + $rootScope.isAnnotaionToolBarDrawingModeActive = false;
  271 + $rootScope.switchCanvas();
260 272 }
261 273  
262 274  
263 275  
264 276 $rootScope.DrawingMode = function () {
  277 + //Annotation History
  278 + $rootScope.isAnnotaionToolBarDrawingModeActive = true;
265 279 $("#OnIdentify").removeClass("annotationtoolbartab");
266 280 $("#DrawMode").addClass("annotationtoolbartab");
267 281 $('.btnCursor').addClass('activebtncolor');
268 282 $rootScope.switchCanvas();
269   - $("#canvasPaint").css("display", "block");
270   - $("#canvas").css("display", "block");
  283 +
  284 + // $("#canvasPaint").css("display", "block");
  285 + // $("#canvas").css("display", "block");
271 286  
272 287 }
273 288  
... ... @@ -280,14 +295,12 @@ AIA.controller(&quot;HomeController&quot;, [&quot;$rootScope&quot;, &quot;Modules&quot;, &quot;$log&quot;, &quot;$location&quot;,
280 295 $('#modal-settings').modal('toggle');
281 296 }
282 297  
283   -
284 298 }
285 299  
286   -
287   -
288 300 //----Annotation Toolbar: Jcanvas-----
289 301  
290   - $rootScope.DrLine = function (e) {
  302 + $rootScope.DrawLine = function (e)
  303 + {
291 304 $rootScope.setListManagerZindex = true;
292 305 $("#canvasPaint").css("display", "block");
293 306 $("#canvas").css("display", "block");
... ... @@ -295,7 +308,6 @@ AIA.controller(&quot;HomeController&quot;, [&quot;$rootScope&quot;, &quot;Modules&quot;, &quot;$log&quot;, &quot;$location&quot;,
295 308 $rootScope.switchCanvas();
296 309 $rootScope.shapeType = "Line";
297 310  
298   -
299 311 $('.btnCursor').removeClass('activebtncolor');
300 312 $(".btn-annotation").removeClass("activebtncolor");
301 313 $(".btn-annotation-line").addClass("activebtncolor");
... ... @@ -304,7 +316,7 @@ AIA.controller(&quot;HomeController&quot;, [&quot;$rootScope&quot;, &quot;Modules&quot;, &quot;$log&quot;, &quot;$location&quot;,
304 316 }
305 317  
306 318  
307   - $rootScope.DrPin = function (e) {
  319 + $rootScope.DrawPin = function (e) {
308 320 $("#canvasPaint").css("display", "block");
309 321 $("#canvas").css("display", "block");
310 322  
... ... @@ -338,32 +350,53 @@ AIA.controller(&quot;HomeController&quot;, [&quot;$rootScope&quot;, &quot;Modules&quot;, &quot;$log&quot;, &quot;$location&quot;,
338 350 $(".btn-annotation").removeClass("activebtncolor");
339 351 $(".btn-annotation-rectangle").addClass("activebtncolor");
340 352 }
  353 +
341 354 $rootScope.paintBrush = function () {
342   - // debugger;
343   - // $('.btnCursor').addClass('activebtncolor');
344   - $rootScope.setListManagerZindex = true;
345   - $("#canvasPaint").css("display", "block");
346   - $("#canvas").css("display", "block");
347   - $rootScope.switchCanvasToPaintCanvas();
348   - $rootScope.shapeType = "FreeStylePaint";
  355 + $rootScope.isAnnotaionToolBarDrawingModeActive = false;
  356 + if ($rootScope.disableAnnotationtoolOnListManager == true) {
  357 + $rootScope.switchCanvas();
  358 + var canvasPaintZindex = $('#canvasPaint').css("z-index"); //x
  359 +
  360 + var canvasZindex = $('#canvas').css("z-index"); //y
  361 + var listManagerZindex = $('#listManager').css("z-index"); //z
  362 + if (canvasPaintZindex > canvasZindex) {
  363 +
  364 + $('#listManager').css("z-index", canvasPaintZindex);
  365 +
  366 + } else {
  367 +
  368 + $('#listManager').css("z-index", canvasZindex);
  369 + }
  370 +
  371 + } else {
  372 +
  373 + // $('.btnCursor').addClass('activebtncolor');
  374 + $rootScope.setListManagerZindex = true;
  375 + $("#canvasPaint").css("display", "block");
  376 + $("#canvas").css("display", "block");
  377 + $rootScope.switchCanvasToPaintCanvas();
  378 + $rootScope.shapeType = "FreeStylePaint";
349 379 var btnBrushSizeValue = $("#btnBrushSize").val();
350 380 $rootScope.shapeSize = parseInt(btnBrushSizeValue);
351 381 $("#annotationpaintbrushsize").attr("data-size", $rootScope.shapeSize);
352 382  
353   - $("#annotationpaintbrushsize").attr("data-color", $rootScope.shapestyleFillColor);
  383 + $("#annotationpaintbrushsize").attr("data-color", $rootScope.shapestyleColorWithOpacity);
354 384  
355   - if ($rootScope.shapeSize == '') {
356   - $('#canvasPaint').sketch({ defaultSize: 1 });
357   - }
358   - else {
359   - $('#canvasPaint').sketch();
360 385  
361   - }
362 386  
  387 + if ($rootScope.shapeSize == '') {
  388 + $('#canvasPaint').sketch({ defaultSize: 1 });
  389 + }
  390 + else {
  391 + $('#canvasPaint').sketch();
363 392  
364   - // $('#canvasPaint').sketch();
  393 + }
365 394  
  395 + }
366 396  
  397 + $('.btnCursor').removeClass('activebtncolor');
  398 + $(".btn-annotation").removeClass("activebtncolor");
  399 + $(".btn-annotation-brush").addClass("activebtncolor");
367 400  
368 401 }
369 402  
... ... @@ -412,23 +445,16 @@ AIA.controller(&quot;HomeController&quot;, [&quot;$rootScope&quot;, &quot;Modules&quot;, &quot;$log&quot;, &quot;$location&quot;,
412 445 $('.btnCursor').removeClass('activebtncolor');
413 446 $(".btn-annotation").removeClass("activebtncolor");
414 447 $(".btn-annotation-Text").addClass("activebtncolor");
415   - // $("#text_area").val('');
416   - // $("#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" });
417   - }
  448 + }
418 449  
419 450 $rootScope.DrawPolygon = function () {
420 451 $rootScope.setListManagerZindex = true;
421 452 $("#canvasPaint").css("display", "block");
422 453 $("#canvas").css("display", "block");
423 454 $rootScope.shapeType = "DrawPolygon";
424   -
425 455 }
426 456  
427 457  
428   - $rootScope.OpacityModal = function () {
429   -
430   -
431   - }
432 458 $rootScope.switchCanvas = function () {
433 459 var x = $('#canvasPaint').css("z-index");
434 460  
... ... @@ -441,72 +467,75 @@ AIA.controller(&quot;HomeController&quot;, [&quot;$rootScope&quot;, &quot;Modules&quot;, &quot;$log&quot;, &quot;$location&quot;,
441 467 $('#canvas').css("z-index", y);
442 468 }
443 469 $rootScope.EraseDrawing = function () {
  470 + $rootScope.isAnnotaionToolBarDrawingModeActive = false;
444 471 $rootScope.switchCanvas();
445 472 $rootScope.isEraseToolSelected = true;
446 473 //$rootScope.switchCanvasToPaintCanvas();
447   - //// $('#canvasPaint').sketch({ defaultColor: "yellow", defaultSize: 1 });
448   - //var sktch = $('#canvasPaint').sketch();
449   - //$('#canvasPaint').sketch().actions = []; // this line empties the actions.
450   - //var myCanvas = document.getElementById("canvasPaint");
451   - //var ctx = myCanvas.getContext('2d');
452   - //ctx.clearRect(0, 0, myCanvas.width, myCanvas.height);
453   - //$rootScope.switchCanvas();
454   -
  474 + $('.btnCursor').removeClass('activebtncolor');
  475 + $(".btn-annotation").removeClass("activebtncolor");
  476 + $(".btn-annotation-erase").addClass("activebtncolor");
455 477 }
456 478  
457   - //opacity code
458   - $rootScope.shapestyleOpacity = 1;
459   - $rootScope.shapestyleFillColor = "#fff";
460   - $rootScope.shapestyleFillBorderColor = "black";
461   - $rootScope.shapestyleborderWidth = 2;
462   - $rootScope.shapestyleborderStyles = "solid";
463   - $rootScope.shapestyle = function (id) {
464   - // debugger;
465   - document.getElementById('modelbackground').style.display = "none";
466   - document.getElementById('modeleditstyle').style.display = "none";
467   -
468   - $rootScope.shapestyleOpacity = $("#" + id).css('opacity');
469   - $("#shapeStyleDiv").parent().css("opacity", $rootScope.shapestyleOpacity);
470   - $rootScope.shapestyleFillColor = $("#" + id).css('background-color');
471   - $("#shapeStyleDiv").css("background-color", $rootScope.shapestyleFillColor);
472   - $rootScope.shapestyleborderColor = $("#" + id).parent().css("border-top-color");
473   - $("#shapeStyleDiv").parent().css("border-color", $rootScope.shapestyleborderColor);
474   - $rootScope.shapestyleborderWidthSeparatingPixel = $("#" + id).parent().css("border-top-width");
475   - $("#shapeStyleDiv").parent().css("border-width", $rootScope.shapestyleborderWidthSeparatingPixel);
476   - var pixelSeparation = $rootScope.shapestyleborderWidthSeparatingPixel;
477   - var intPart = pixelSeparation.split("p");
478   -
479   - $rootScope.shapestyleborderWidth = intPart[0];
480   - $rootScope.shapestyleborderStyles = "solid";
  479 + $rootScope.isShapeSyleOkBtnClicked = false;
  480 + $rootScope.setPropertiesForShapes = function (id) {
  481 + $rootScope.isShapeSyleOkBtnClicked = true;
  482 +
  483 + if ((document.getElementById('fill-option').checked == false) && (document.getElementById('Outline-Option').checked == false)) {
  484 + // $('#btnShapeStyle').attr('disabled', 'disabled');
  485 + } else {
  486 + //$('#btnShapeStyle').removeAttr('disabled', 'disabled');
  487 + document.getElementById('modelbackground').style.display = "none";
  488 + document.getElementById('modeleditstyle').style.display = "none";
481 489  
  490 + $rootScope.shapestyleOpacity = $("#" + id).css('opacity');
  491 + $("#shapeStyleDiv").parent().css("opacity", $rootScope.shapestyleOpacity);
  492 + $rootScope.shapestyleFillColor = $("#" + id).css('background-color');
  493 + $rootScope.shapeStyleColorRGBA = $rootScope.shapestyleFillColor.replace("rgb", "rgba");
  494 + $rootScope.shapestyleColorWithOpacity = $rootScope.shapeStyleColorRGBA.substring(0, $rootScope.shapeStyleColorRGBA.length - 1) + " " + "," + $rootScope.shapestyleOpacity + ")";
  495 + $("#shapeStyleDiv").css("background-color", $rootScope.shapestyleFillColor);
  496 + $rootScope.shapestyleborderColor = $("#" + id).parent().css("border-top-color");
  497 + // $("#shapeStyleDiv").parent().css("border-color", $rootScope.shapestyleborderColor);
  498 + $rootScope.borderDimensions = $("#" + id).parent().css("border-top-width");
  499 +
  500 + document.getElementById("shapeStyleDiv").parentNode.style.border = $rootScope.borderDimensions + " " + "solid" + " " + $rootScope.shapestyleborderColor;
482 501  
483   - $('#editshapestyle').modal('hide');
484   - // name: 'Circle_' + $rootScope.resetCircle,
  502 + // $("#shapeStyleDiv").parent().css("border-width", $rootScope.shapestyleborderWidthSeparatingPixel);
485 503  
  504 + var borderDimensions = $rootScope.borderDimensions;
  505 + var borderDimensionSplitArray = borderDimensions.split("p");
486 506  
487   - // $("#canvas").removeLayer("TextRect_" + $rootScope.resetTextRect).drawLayers();
  507 + $rootScope.shapestyleborderWidth = borderDimensionSplitArray[0];
  508 + $rootScope.shapestyleborderStyles = "solid";
488 509  
489   - //Edit Shape Style popup should open at it's default position
490   - $("#modeleditstyle").css({ "left": "40%", "right": "0", "top": "70px" });
491 510  
  511 + $('#editshapestyle').modal('hide');
  512 +
  513 + //Edit Shape Style popup should open at it's default position
  514 + $("#modeleditstyle").css({ "left": "40%", "right": "0", "top": "70px" });
  515 + }
492 516 }
493 517  
494 518 $rootScope.enableAnnotationToolBar = function () {
495 519 if ($rootScope.disableAnnotationTB == true) {
496 520 document.getElementById('modelbackground').style.display = "none";
497   - //$("#editshapestyle").modal('show');
498 521 document.getElementById('modeleditstyle').style.display = "none";
499 522 }
500 523 else {
501 524 document.getElementById('modelbackground').style.display = "block";
502   - //$("#editshapestyle").modal('show');
503 525 document.getElementById('modeleditstyle').style.display = "block";
  526 +
  527 + // alert(document.getElementById('outlinedivId').style.border);
  528 + // alert(document.getElementById('imgOpacity').style.backgroundColor);
  529 + $('#editstylebackgroundcolor .minicolors >.minicolors-swatch > .minicolors-swatch-color').css("background-color", document.getElementById('imgOpacity').style.backgroundColor);
  530 + $('#outlineColor .minicolors >.minicolors-swatch > .minicolors-swatch-color').css("background-color", document.getElementById('outlinedivId').style.border);
  531 +
504 532 if ($('#modeleditstyle').css("display") == "block") { //Check if the modal is already showing
505 533 var previewOpacity = $('#imgOpacity').css("opacity");
506 534 $('#slider-range-min-4 div.ui-slider-range-min').css("width", (previewOpacity * 100) + "%");
507 535 $('#slider-range-min-4 span.ui-slider-handle').css("left", (previewOpacity * 100) + "%");
508 536  
509 537 };
  538 +
510 539 }
511 540 }
512 541  
... ... @@ -522,308 +551,418 @@ AIA.controller(&quot;HomeController&quot;, [&quot;$rootScope&quot;, &quot;Modules&quot;, &quot;$log&quot;, &quot;$location&quot;,
522 551  
523 552 $(".custom-tooltip-annotation").css('display', 'none');
524 553 $("#edit-block").removeClass("custom-tooltip-annotation");
525   -
526   -
527 554 }
528 555  
529 556  
530 557 $rootScope.disableAnnotationToolBar = function () {
531   -
  558 + if ($rootScope.isShapeSyleOkBtnClicked == false) {
  559 + $('#editstylebackgroundcolor .minicolors >.minicolors-swatch > .minicolors-swatch-color').css("background-color", "rgb(255,255,255)");
  560 + $('#outlineColor .minicolors >.minicolors-swatch > .minicolors-swatch-color').css("background-color", "rgb(0,0,0)");
  561 + var previewBorderColor = $("#outlineColor span.minicolors-swatch-color").css('background-color');
  562 + $(".marginTopBtm10 div.outlinediv").css("border-color", previewBorderColor);
  563 + var previewBgColor = $("#editstylebackgroundcolor span.minicolors-swatch-color").css('background-color');
  564 + $("#imgOpacity").css("background-color", previewBgColor);
  565 + $('#borderWidthCanvasElement').val(1);
  566 + $('.marginTopBtm10 div.outlinediv').css("border-width", 1);
  567 + $("#imgOpacity").css("opacity", 1);
  568 + $(".marginTopBtm10 div.outlinediv").css("opacity", 1);
  569 + //$("#borderWidthCanvasElement").change(function () {
  570 + // $(".marginTopBtm10 div.outlinediv").css("border-color", x);
  571 + //});
  572 + } else {
  573 + var previewBgColor = $("#shapeStyleDiv").css('background-color');
  574 + var previewBorderColor = $('#previewBorder').css('border-color');
  575 + var previewBorderWidth = $('#previewBorder').css('border-width');
  576 + var previewOpacity = $('#previewBorder').css('opacity');
  577 + $('#editstylebackgroundcolor .minicolors >.minicolors-swatch > .minicolors-swatch-color').css("background-color", previewBgColor);
  578 + $("#imgOpacity").css("background-color", previewBgColor);
  579 + $('#outlineColor .minicolors >.minicolors-swatch > .minicolors-swatch-color').css("background-color", previewBorderColor);
  580 + $(".marginTopBtm10 div.outlinediv").css("border-color", previewBorderColor);
  581 + $('.marginTopBtm10 div.outlinediv').css("border-width", previewBorderWidth);
  582 + $('#borderWidthCanvasElement').val(previewBorderWidth.split("px"));
  583 + $("#imgOpacity").css("opacity", previewOpacity);
  584 + $(".marginTopBtm10 div.outlinediv").css("opacity", previewOpacity);
  585 + }
532 586 document.getElementById('modelbackground').style.display = "none";
533 587 document.getElementById('modeleditstyle').style.display = "none";
534 588 //Edit Shape Style popup should open at it's default position
535 589 $("#modeleditstyle").css({ "left": "40%", "right": "0", "top": "70px" });
536   -
537   -
  590 +
538 591 }
539 592  
540 593  
541   - //----End-------------
542   -
543 594 //--Common code of Annotation Toolbar for CI and DA-------
544   - $rootScope.LineFn = function (canvasId, LineNumber, shapestyleborderColor, shapestyleborderWidth, offsetX1, offsetY1, x, y) {
545   - $(canvasId).addLayer({
546   - name: 'Line_' + LineNumber,
547   - layer: true,
548   - type: 'line',
549   - draggable: true,
550   - strokeStyle: shapestyleborderColor,
551   - strokeWidth: shapestyleborderWidth,
552   - rounded: true,
553   - x1: offsetX1, y1: offsetY1,
554   - x2: x, y2: y,
555   -
556   - click: function (layer) {
557   - $rootScope.canvasLayerNameCollection = [];
558   - $rootScope.canvasLayerNameCollection.push(layer.name);
559   - $(canvasId).setLayer(layer.name, {
560   - handle: {
561   - type: 'arc',
562   - fillStyle: '#fff',
563   - strokeStyle: '#c33',
564   - strokeWidth: 2,
565   - radius: 3
566   - }
567   - }).drawLayers();
  595 + $rootScope.DrawLineOnModuleItem = function (canvasId, LineNumber, shapestyleborderColor, shapestyleborderWidth, offsetX1, offsetY1, x, y) {
  596 + if ($rootScope.isLinePreviewCompleted == true) {
  597 + $rootScope.isLinePreviewCompleted = false;
  598 + $(canvasId).addLayer({
  599 + name: 'Line_' + LineNumber,
  600 + layer: true,
  601 + type: 'line',
  602 + draggable: true,
  603 + strokeStyle: shapestyleborderColor,
  604 + strokeWidth: shapestyleborderWidth,
  605 + rounded: true,
  606 + x1: offsetX1, y1: offsetY1,
  607 + x2: x, y2: y,
568 608  
  609 + click: function (layer) {
  610 + if ($rootScope.isAnnotaionToolBarDrawingModeActive == true) {
  611 + //jcanvas property
  612 + layer.draggable = true;
  613 + $rootScope.canvasLayerNameCollection = [];
  614 + $rootScope.canvasLayerNameCollection.push(layer.name);
  615 + $(canvasId).setLayer(layer.name, {
  616 + handle: {
  617 + type: 'arc',
  618 + fillStyle: '#fff',
  619 + strokeStyle: '#c33',
  620 + strokeWidth: 2,
  621 + radius: 3
  622 + }
  623 + }).drawLayers();
569 624  
570   - },
571   - mouseout: function (layer) {
572   - $rootScope.canvasLayerNameCollection = [];
573   - $(canvasId).setLayer(layer.name, {
574   - handle: {
575   - type: 'arc',
576   - fillStyle: '#fff',
577   - strokeStyle: '#c33',
578   - strokeWidth: 0,
579   - radius: 0
580 625 }
  626 + else {
  627 + //jcanvas property
  628 + layer.draggable = false;
  629 + }
  630 + },
  631 + mouseout: function (layer) {
  632 + if ($rootScope.isAnnotaionToolBarDrawingModeActive == true) {
  633 + //jcanvas property
  634 + layer.draggable = true;
  635 + $rootScope.canvasLayerNameCollection = [];
  636 + $(canvasId).setLayer(layer.name, {
  637 + handle: {
  638 + type: 'arc',
  639 + fillStyle: '#fff',
  640 + strokeStyle: '#c33',
  641 + strokeWidth: 0,
  642 + radius: 0
  643 + }
  644 +
  645 + }).drawLayers();
  646 + }
  647 + else {
  648 + //jcanvas property
  649 + layer.draggable = false;
  650 + }
  651 + },
  652 + mouseover: function (layer) {
581 653  
582   - }).drawLayers();
583   -
584   - },
585   - mouseover: function (layer) {
586   -
587   -
588   - $(canvasId).setLayer(layer.name, {
589   - handle: {
590   - type: 'arc',
591   - fillStyle: '#fff',
592   - strokeStyle: '#c33',
593   - strokeWidth: 2,
594   - radius: 3
  654 + if ($rootScope.isAnnotaionToolBarDrawingModeActive == true) {
  655 + //jcanvas property
  656 + layer.draggable = true;
  657 +
  658 + $(canvasId).setLayer(layer.name, {
  659 + handle: {
  660 + type: 'arc',
  661 + fillStyle: '#fff',
  662 + strokeStyle: '#c33',
  663 + strokeWidth: 2,
  664 + radius: 3
  665 + }
  666 + }).drawLayers();
595 667 }
596   - }).drawLayers();
  668 + else {
  669 + //jcanvas property
  670 + layer.draggable = false;
  671 + }
  672 + }
597 673  
598   - }
  674 + }).drawLayers();
599 675  
600   - }).drawLayers();
  676 + }
  677 +
601 678  
602 679 $('.btnCursor').trigger('click');
603 680 $(".btn-annotation").removeClass("activebtncolor");
604 681 $('.btnCursor').addClass('activebtncolor');
605 682 }
606 683  
607   - $rootScope.RectangleFn = function (canvasId, RectNumber, shapestyleFillColor, shapestyleborderColor, shapestyleOpacity, shapestyleborderWidth, offsetX1, offsetY1, x, y) {
608   - $(canvasId).addLayer({
609   - layer: true,
610   - name: 'Rect_' + RectNumber,
611   - fillStyle: shapestyleFillColor,
612   - type: 'rectangle',
613   - draggable: true,
614   - strokeStyle: shapestyleborderColor,
615   - opacity: shapestyleOpacity,
616   - strokeWidth: shapestyleborderWidth,
617   - x: offsetX1, y: offsetY1,
618   - width: x - offsetX1,
619   - height: y - offsetY1,
  684 + $rootScope.DrawRectangleOnModuleItem = function (canvasId, RectNumber, shapestyleFillColor, shapestyleborderColor, shapestyleOpacity, shapestyleborderWidth, offsetX1, offsetY1, x, y) {
  685 + if ($rootScope.isRectanglePreviewCompleted == true) {
  686 + $rootScope.isRectanglePreviewCompleted = false;
  687 + $(canvasId).addLayer({
  688 + layer: true,
  689 + name: 'Rect_' + RectNumber,
  690 + fillStyle: shapestyleFillColor,
  691 + type: 'rectangle',
  692 + draggable: true,
  693 + strokeStyle: shapestyleborderColor,
  694 + opacity: shapestyleOpacity,
  695 + strokeWidth: shapestyleborderWidth,
  696 + fromCenter: false,
  697 + x: offsetX1, y: offsetY1,
  698 + width: (x - offsetX1),
  699 + height: (y - offsetY1),
620 700  
621 701 resizeFromCenter: false,
622 702  
623   - dblclick: function () {
624   - // $rootScope.backOpacity();
  703 + dblclick: function () {
625 704  
626   - },
  705 + },
627 706  
628 707 click: function (layer) {
629   - $rootScope.canvasLayerNameCollection = [];
630   - $rootScope.canvasLayerNameCollection.push(layer.name);
631   - $(canvasId).setLayer(layer.name, {
632   - handle: {
633   - type: 'rectangle',
634   - fillStyle: '#fff',
635   - strokeStyle: '#c33',
636   - strokeWidth: 2,
637   - width: 5, height: 5,
638   - cornerRadius: 3
639   - }
640   - }).drawLayers();
641   -
642   - },
  708 + if ($rootScope.isAnnotaionToolBarDrawingModeActive == true) {
  709 + //jcanvas property
  710 + layer.draggable = true;
  711 + $rootScope.canvasLayerNameCollection = [];
  712 + $rootScope.canvasLayerNameCollection.push(layer.name);
  713 + $(canvasId).setLayer(layer.name, {
  714 + handle: {
  715 + type: 'rectangle',
  716 + fillStyle: '#fff',
  717 + strokeStyle: '#c33',
  718 + strokeWidth: 2,
  719 + width: 5, height: 5,
  720 + cornerRadius: 3
  721 + }
  722 + }).drawLayers();
  723 + }
  724 + else {
  725 + //jcanvas property
  726 + layer.draggable = false;
  727 + }
  728 + },
643 729 mouseout: function (layer) {
644   - $rootScope.canvasLayerNameCollection = [];
645   - $(canvasId).setLayer(layer.name, {
646   - handle: {
647   - type: 'rectangle',
648   - fillStyle: 'pink',
649   - strokeStyle: 'yellow',
650   - strokeWidth: 0,
651   - width: 0, height: 0,
652   - cornerRadius: 0
653   - }
654   -
655   - }).drawLayers();
656   -
657   - },
658   - mouseover: function (layer) {
659   -
  730 + if ($rootScope.isAnnotaionToolBarDrawingModeActive == true) {
  731 + //jcanvas property
  732 + layer.draggable = true;
  733 + $rootScope.canvasLayerNameCollection = [];
  734 + $(canvasId).setLayer(layer.name, {
  735 + handle: {
  736 + type: 'rectangle',
  737 + fillStyle: 'pink',
  738 + strokeStyle: 'yellow',
  739 + strokeWidth: 0,
  740 + width: 0, height: 0,
  741 + cornerRadius: 0
  742 + }
660 743  
661   - $(canvasId).setLayer(layer.name, {
662   - handle: {
663   - type: 'rectangle',
664   - fillStyle: '#fff',
665   - strokeStyle: '#c33',
666   - strokeWidth: 2,
667   - width: 5, height: 5,
668   - cornerRadius: 3
  744 + }).drawLayers();
  745 + }
  746 + else {
  747 + //jcanvas property
  748 + layer.draggable = false;
  749 + }
  750 + },
  751 + mouseover: function (layer) {
  752 + if ($rootScope.isAnnotaionToolBarDrawingModeActive == true) {
  753 + //jcanvas property
  754 + layer.draggable = true;
  755 +
  756 + $(canvasId).setLayer(layer.name, {
  757 + handle: {
  758 + type: 'rectangle',
  759 + fillStyle: '#fff',
  760 + strokeStyle: '#c33',
  761 + strokeWidth: 2,
  762 + width: 5, height: 5,
  763 + cornerRadius: 3
  764 + }
  765 + }).drawLayers();
669 766 }
670   - }).drawLayers();
671   -
672   - }
673   - }).drawLayers();
674   -
675   -
676   -
  767 + else {
  768 + //jcanvas property
  769 + layer.draggable = false;
  770 + }
  771 + }
  772 + }).drawLayers();
  773 + }
677 774 $('.btnCursor').trigger('click');
678 775 $(".btn-annotation").removeClass("activebtncolor");
679 776 $('.btnCursor').addClass('activebtncolor');
680 777  
681 778 }
682 779  
683   - $rootScope.CircleFn = function (canvasId, CircleNumber, shapestyleOpacity, shapestyleborderColor, shapestyleborderWidth, shapestyleFillColor, offsetX1, offsetY1, x, y) {
684   -
685   - $(canvasId).addLayer({
686   - layer: true,
687   - name: 'Circle_' + CircleNumber,
688   - type: 'ellipse',
689   - opacity: shapestyleOpacity,
690   - draggable: true,
691   - strokeStyle: shapestyleborderColor,
692   - strokeWidth: shapestyleborderWidth,
693   - fillStyle: shapestyleFillColor,
694   - x: offsetX1, y: offsetY1,
695   - width: (x - offsetX1) * 2, height: (y - offsetY1) * 2,
696   - // Place a handle at each side and each corner
697   - handlePlacement: 'both',
698   -
699   -
700   -
701   - click: function (layer) {
702   -
703   - $rootScope.canvasLayerNameCollection = [];
704   - $rootScope.canvasLayerNameCollection.push(layer.name);
705   - $(canvasId).setLayer(layer.name, {
706   - handle: {
707   - type: 'arc',
708   - fillStyle: '#fff',
709   - strokeStyle: '#c33',
710   - strokeWidth: 2,
711   - radius: 3
  780 + $rootScope.DrawCircleOnModuleItem = function (canvasId, CircleNumber, shapestyleOpacity, shapestyleborderColor, shapestyleborderWidth, shapestyleFillColor, offsetX1, offsetY1, x, y) {
  781 + // console.log("up"+ offsetX1 + " " + offsetY1 + " " + (x - offsetX1) + " " + (y - offsetY1));
  782 + if ($rootScope.isCirclePreviewCompleted == true) {
  783 + $rootScope.isCirclePreviewCompleted = false;
  784 + $(canvasId).addLayer({
  785 + layer: true,
  786 + name: 'Circle_' + CircleNumber,
  787 + type: 'ellipse',
  788 + opacity: shapestyleOpacity,
  789 + draggable: true,
  790 + strokeStyle: shapestyleborderColor,
  791 + strokeWidth: shapestyleborderWidth,
  792 + fillStyle: shapestyleFillColor,
  793 + fromCenter: false,
  794 + x: (offsetX1), y: (offsetY1),
  795 + width: (x - offsetX1), height: (y - offsetY1),
  796 + // Place a handle at each side and each corner
  797 + resizeFromCenter: false,
  798 + handlePlacement: 'both',
  799 + click: function (layer) {
  800 + if ($rootScope.isAnnotaionToolBarDrawingModeActive == true) {
  801 + //jcanvas property
  802 + layer.draggable = true;
  803 + $rootScope.canvasLayerNameCollection = [];
  804 + $rootScope.canvasLayerNameCollection.push(layer.name);
  805 + $(canvasId).setLayer(layer.name, {
  806 + handle: {
  807 + type: 'arc',
  808 + fillStyle: '#fff',
  809 + strokeStyle: '#c33',
  810 + strokeWidth: 2,
  811 + radius: 3
  812 + }
  813 + }).drawLayers();
712 814 }
713   - }).drawLayers();
714   -
715   - },
716   - mouseout: function (layer) {
717   - $rootScope.canvasLayerNameCollection = [];
718   -
719   - $(canvasId).setLayer(layer.name, {
720   - handle: {
721   - type: 'arc',
722   - fillStyle: '#fff',
723   - strokeStyle: '#c33',
724   - strokeWidth: 0,
725   - // width: 0, height: 0,
726   - radius: 0
  815 + else {
  816 + //jcanvas property
  817 + layer.draggable = false;
727 818 }
728   -
729   - }).drawLayers();
730   -
731   - },
732   - mouseover: function (layer) {
733   -
734   -
735   - $(canvasId).setLayer(layer.name, {
736   - handle: {
737   - type: 'arc',
738   - fillStyle: '#fff',
739   - strokeStyle: '#c33',
740   - strokeWidth: 2,
741   - // width: 5, height: 5,
742   - radius: 3
  819 + },
  820 + mouseout: function (layer) {
  821 + if ($rootScope.isAnnotaionToolBarDrawingModeActive == true) {
  822 + //jcanvas property
  823 + layer.draggable = true;
  824 + $rootScope.canvasLayerNameCollection = [];
  825 +
  826 + $(canvasId).setLayer(layer.name, {
  827 + handle: {
  828 + type: 'arc',
  829 + fillStyle: '#fff',
  830 + strokeStyle: '#c33',
  831 + strokeWidth: 0,
  832 + // width: 0, height: 0,
  833 + radius: 0
  834 + }
  835 +
  836 + }).drawLayers();
743 837 }
744   - }).drawLayers();
745   -
746   - }
747   - }).drawLayers();
  838 + else {
  839 + layer.draggable = false;
  840 + }
  841 + },
  842 + mouseover: function (layer) {
  843 + if ($rootScope.isAnnotaionToolBarDrawingModeActive == true) {
  844 + //jcanvas property
  845 + layer.draggable = true;
  846 +
  847 + $(canvasId).setLayer(layer.name, {
  848 + handle: {
  849 + type: 'arc',
  850 + fillStyle: '#fff',
  851 + strokeStyle: '#c33',
  852 + strokeWidth: 2,
  853 + // width: 5, height: 5,
  854 + radius: 3
  855 + }
  856 + }).drawLayers();
  857 + }
  858 + else {
  859 + //jcanvas property
  860 + layer.draggable = false;
  861 + }
  862 + }
  863 + }).drawLayers();
  864 + }
748 865 $('.btnCursor').trigger('click');
749 866 $(".btn-annotation").removeClass("activebtncolor");
750 867 $('.btnCursor').addClass('activebtncolor');
751 868 }
752 869  
753   - $rootScope.ArrowFn = function (canvasId, ArrowNumber, shapestyleborderColor, shapestyleborderWidth, offsetX1, offsetY1, x, y) {
754   -
755   - $('#canvas').drawLine({
756   - layer: true,
757   - name: 'Arrow_' + ArrowNumber,
758   - draggable: true,
759   - strokeStyle: shapestyleborderColor,
760   - strokeWidth: shapestyleborderWidth,
761   - rounded: true,
762   - startArrow: true,
763   - arrowRadius: 7,
764   - arrowAngle: 90,
765   - x1: offsetX1, y1: offsetY1,
766   - x2: x, y2: y,
  870 + $rootScope.DrawArrowOnModuleItem = function (canvasId, ArrowNumber, shapestyleborderColor, shapestyleborderWidth, offsetX1, offsetY1, x, y) {
  871 + if ($rootScope.isArrowPreviewCompleted == true) {
  872 + $rootScope.isArrowPreviewCompleted = false;
  873 + $('#canvas').drawLine({
  874 + layer: true,
  875 + name: 'Arrow_' + ArrowNumber,
  876 + draggable: true,
  877 + strokeStyle: shapestyleborderColor,
  878 + strokeWidth: shapestyleborderWidth,
  879 + rounded: true,
  880 + startArrow: true,
  881 + arrowRadius: 7,
  882 + arrowAngle: 90,
  883 + x1: offsetX1, y1: offsetY1,
  884 + x2: x, y2: y,
767 885  
768   - click: function (layer) {
769   - $rootScope.canvasLayerNameCollection = [];
770   - $rootScope.canvasLayerNameCollection.push(layer.name);
771   - $(canvasId).setLayer(layer.name, {
772   - handle: {
773   - type: 'arc',
774   - fillStyle: '#fff',
775   - strokeStyle: '#c33',
776   - strokeWidth: 2,
777   - // width: 5, height: 5,
778   - radius: 3
  886 + click: function (layer) {
  887 + if ($rootScope.isAnnotaionToolBarDrawingModeActive == true) {
  888 + //jcanvas property
  889 + layer.draggable = true;
  890 + $rootScope.canvasLayerNameCollection = [];
  891 + $rootScope.canvasLayerNameCollection.push(layer.name);
  892 + $(canvasId).setLayer(layer.name, {
  893 + handle: {
  894 + type: 'arc',
  895 + fillStyle: '#fff',
  896 + strokeStyle: '#c33',
  897 + strokeWidth: 2,
  898 + // width: 5, height: 5,
  899 + radius: 3
  900 + }
  901 + }).drawLayers();
  902 + // $("#canvas").removeLayer(layer.name).drawLayers();
779 903 }
780   - }).drawLayers();
781   - // $("#canvas").removeLayer(layer.name).drawLayers();
782   -
783   - },
784   - mouseout: function (layer) {
785   - $rootScope.canvasLayerNameCollection = [];
786   - $(canvasId).setLayer(layer.name, {
787   - handle: {
788   - type: 'arc',
789   - fillStyle: '#fff',
790   - strokeStyle: '#c33',
791   - strokeWidth: 0,
792   - // width: 0, height: 0,
793   - radius: 0
  904 + else {
  905 + //jcanvas property
  906 + layer.draggable = false;
794 907 }
795 908  
796   - }).drawLayers();
797   -
798   - },
799   - mouseover: function (layer) {
800   -
801   -
802   - $(canvasId).setLayer(layer.name, {
803   - handle: {
804   - type: 'arc',
805   - fillStyle: '#fff',
806   - strokeStyle: '#c33',
807   - strokeWidth: 2,
808   - // width: 5, height: 5,
809   - radius: 3
  909 + },
  910 + mouseout: function (layer) {
  911 + if ($rootScope.isAnnotaionToolBarDrawingModeActive == true) {
  912 + //jcanvas property
  913 + layer.draggable = true;
  914 + $rootScope.canvasLayerNameCollection = [];
  915 + $(canvasId).setLayer(layer.name, {
  916 + handle: {
  917 + type: 'arc',
  918 + fillStyle: '#fff',
  919 + strokeStyle: '#c33',
  920 + strokeWidth: 0,
  921 + // width: 0, height: 0,
  922 + radius: 0
  923 + }
  924 +
  925 + }).drawLayers();
  926 + }
  927 + else {
  928 + //jcanvas property
  929 + layer.draggable = false;
810 930 }
811   - }).drawLayers();
  931 + },
  932 + mouseover: function (layer) {
812 933  
813   - }
  934 + if ($rootScope.isAnnotaionToolBarDrawingModeActive == true) {
  935 + //jcanvas property
  936 + layer.draggable = true;
  937 + $(canvasId).setLayer(layer.name, {
  938 + handle: {
  939 + type: 'arc',
  940 + fillStyle: '#fff',
  941 + strokeStyle: '#c33',
  942 + strokeWidth: 2,
  943 + // width: 5, height: 5,
  944 + radius: 3
  945 + }
  946 + }).drawLayers();
  947 + }
  948 + else {
  949 + //jcanvas property
  950 + layer.draggable = false;
  951 + }
  952 + }
814 953  
815   - });
  954 + });
  955 + }
  956 +
816 957 $('.btnCursor').trigger('click');
817 958 $(".btn-annotation").removeClass("activebtncolor");
818 959 $('.btnCursor').addClass('activebtncolor');
819 960 }
820 961  
821   - $rootScope.PinFn = function (canvasId, PinNumber, offsetX1, offsetY1, x, y, PinArcNumber) {
822   -
823   - var xAxisPinDiff = offsetX1 - x;
824   - var yAxisPinDiff = offsetY1 - y;
825   - if (xAxisPinDiff != 0 && yAxisPinDiff != 0)
826   - {
  962 + $rootScope.DrawPinOnModuleItem = function (canvasId, PinNumber, offsetX1, offsetY1, x, y, PinArcNumber) {
  963 +
  964 + if ($rootScope.isPinPreviewCompleted == true) {
  965 + $rootScope.isPinPreviewCompleted = false;
827 966 var radial = $('#canvas').createGradient({
828 967 x1: 50, y1: 50,
829 968 x2: 50, y2: 50,
... ... @@ -843,59 +982,77 @@ AIA.controller(&quot;HomeController&quot;, [&quot;$rootScope&quot;, &quot;Modules&quot;, &quot;$log&quot;, &quot;$location&quot;,
843 982 x2: x, y2: y,
844 983  
845 984 click: function (layer) {
  985 + if ($rootScope.isAnnotaionToolBarDrawingModeActive == true) {
  986 + //jcanvas property
  987 + layer.draggable = true;
  988 + $rootScope.shapeTypePin = "Pin";
  989 + $rootScope.canvasLayerNameCollection = [];
  990 + var pinLine_layer = layer.name;
  991 + var pinLine_layer_split = pinLine_layer.split("_");
  992 + var pinArcName = "ArcPin_";
  993 + var pinResult = pinArcName.concat(pinLine_layer_split[1]);
  994 +
  995 + $rootScope.canvasLayerNameCollection.push({ pinName: layer.name, ArcName: pinResult });
  996 +
  997 + $(canvasId).setLayer(layer.name, {
  998 + handle: {
  999 + type: 'arc',
  1000 + fillStyle: '#fff',
  1001 + strokeStyle: '#c33',
  1002 + strokeWidth: 2,
  1003 + // width: 5, height: 5,
  1004 + radius: 3
  1005 + }
  1006 + }).drawLayers();
846 1007  
847   - $rootScope.shapeTypePin = "Pin";
848   - $rootScope.canvasLayerNameCollection = [];
849   - var pinLine_layer = layer.name;
850   - var pinLine_layer_split = pinLine_layer.split("_");
851   - var pinArcName = "ArcPin_";
852   - var pinResult = pinArcName.concat(pinLine_layer_split[1]);
853   -
854   - $rootScope.canvasLayerNameCollection.push({ pinName: layer.name, ArcName: pinResult });
855   -
856   - $(canvasId).setLayer(layer.name, {
857   - handle: {
858   - type: 'arc',
859   - fillStyle: '#fff',
860   - strokeStyle: '#c33',
861   - strokeWidth: 2,
862   - // width: 5, height: 5,
863   - radius: 3
864   - }
865   - }).drawLayers();
866   -
867   -
  1008 + }
  1009 + else {
  1010 + //jcanvas property
  1011 + layer.draggable = false;
  1012 + }
868 1013 },
869 1014 mouseout: function (layer) {
870   -
871   - $rootScope.canvasLayerNameCollection = [];
872   - $(canvasId).setLayer(layer.name, {
873   - handle: {
874   - type: 'arc',
875   - fillStyle: '#fff',
876   - strokeStyle: '#c33',
877   - strokeWidth: 0,
878   - // width: 0, height: 0,
879   - radius: 0
880   - }
881   -
882   - }).drawLayers();
883   -
  1015 + if ($rootScope.isAnnotaionToolBarDrawingModeActive == true) {
  1016 + //jcanvas property
  1017 + layer.draggable = true;
  1018 + $rootScope.canvasLayerNameCollection = [];
  1019 + $(canvasId).setLayer(layer.name, {
  1020 + handle: {
  1021 + type: 'arc',
  1022 + fillStyle: '#fff',
  1023 + strokeStyle: '#c33',
  1024 + strokeWidth: 0,
  1025 + // width: 0, height: 0,
  1026 + radius: 0
  1027 + }
  1028 +
  1029 + }).drawLayers();
  1030 + }
  1031 + else {
  1032 + //jcanvas property
  1033 + layer.draggable = false;
  1034 + }
884 1035 },
885 1036 mouseover: function (layer) {
886 1037  
887   -
888   - $(canvasId).setLayer(layer.name, {
889   - handle: {
890   - type: 'arc',
891   - fillStyle: '#fff',
892   - strokeStyle: '#c33',
893   - strokeWidth: 2,
894   - // width: 5, height: 5,
895   - radius: 3
896   - }
897   - }).drawLayers();
898   -
  1038 + if ($rootScope.isAnnotaionToolBarDrawingModeActive == true) {
  1039 + //jcanvas property
  1040 + layer.draggable = true;
  1041 + $(canvasId).setLayer(layer.name, {
  1042 + handle: {
  1043 + type: 'arc',
  1044 + fillStyle: '#fff',
  1045 + strokeStyle: '#c33',
  1046 + strokeWidth: 2,
  1047 + // width: 5, height: 5,
  1048 + radius: 3
  1049 + }
  1050 + }).drawLayers();
  1051 + }
  1052 + else {
  1053 + //jcanvas property
  1054 + layer.draggable = false;
  1055 + }
899 1056 }
900 1057 }).drawArc({
901 1058 draggable: true,
... ... @@ -909,13 +1066,7 @@ AIA.controller(&quot;HomeController&quot;, [&quot;$rootScope&quot;, &quot;Modules&quot;, &quot;$log&quot;, &quot;$location&quot;,
909 1066 fillStyle: radial,
910 1067 x: offsetX1, y: offsetY1,
911 1068 radius: 5,
912   - //handle: {
913   - // type: 'arc',
914   - // fillStyle: '#fff',
915   - // strokeStyle: '#c33',
916   - // strokeWidth: 2,
917   - // radius: 3
918   - //},
  1069 +
919 1070  
920 1071 add: function (layer) {
921 1072  
... ... @@ -927,17 +1078,16 @@ AIA.controller(&quot;HomeController&quot;, [&quot;$rootScope&quot;, &quot;Modules&quot;, &quot;$log&quot;, &quot;$location&quot;,
927 1078  
928 1079 }).drawLayers();
929 1080 }
930   -
  1081 +
  1082 +
931 1083 $('.btnCursor').trigger('click');
932 1084 $(".btn-annotation").removeClass("activebtncolor");
933 1085 $('.btnCursor').addClass('activebtncolor');
934 1086 }
935 1087  
936   - $rootScope.TextAreaFn = function (canvasId, TextNumber, offsetX1, offsetY1, resetTextRect, shapestyleOpacity, shapestyleborderColor, shapestyleborderWidth, shapestyleFillColor, x, y) {
937   -
938   -
939   - debugger;
940   -
  1088 + $rootScope.TextEditorFunctionality = function (canvasId, TextNumber, offsetX1, offsetY1, resetTextRect, shapestyleOpacity, shapestyleborderColor, shapestyleborderWidth, shapestyleFillColor, x, y) {
  1089 + if ($rootScope.isTextAreaPreviewCompleted == true) {
  1090 + $rootScope.isTextAreaPreviewCompleted = false;
941 1091 $('#canvas').drawText({
942 1092 layer: true,
943 1093 draggable: true,
... ... @@ -948,6 +1098,7 @@ AIA.controller(&quot;HomeController&quot;, [&quot;$rootScope&quot;, &quot;Modules&quot;, &quot;$log&quot;, &quot;$location&quot;,
948 1098 fillStyle: '#36c',
949 1099 strokeWidth: 0,
950 1100 x: $rootScope.offsetX1, y: $rootScope.offsetY1,
  1101 + fromCenter: false,
951 1102 fontSize: '14pt',
952 1103 align: "left",
953 1104 fontFamily: 'Verdana, sans-serif',
... ... @@ -959,117 +1110,146 @@ AIA.controller(&quot;HomeController&quot;, [&quot;$rootScope&quot;, &quot;Modules&quot;, &quot;$log&quot;, &quot;$location&quot;,
959 1110  
960 1111  
961 1112 })
962   - // Draw rect as wide as the text
963   - .drawRect({
964   - layer: true,
965   - name: "TextRect_" + $rootScope.TextNumber,
966   - dragGroups: ['shapes'],
967   - opacity: $rootScope.shapestyleOpacity,
968   - strokeStyle: $rootScope.shapestyleborderColor,
969   - strokeWidth: $rootScope.shapestyleborderWidth,
970   - fillStyle: $rootScope.shapestyleFillColor,
971   - x: $rootScope.offsetX1, y: $rootScope.offsetY1,
972   - width: $rootScope.x - $rootScope.offsetX1,
973   - height: $rootScope.y - $rootScope.offsetY1,
974   - add: function (layer) {
975   -
976   - $rootScope.TextAreaRectID = layer.name;
977   - $rootScope.rectDimension.push({ width: layer.width, height: layer.height, x: layer.x, y: layer.y });
978   - $rootScope.CurrentWidth = layer.width;
979   - $rootScope.CurrentHeight = layer.height;
980   -
981   - },
982   - click: function (layer) {
983   -
984   - $rootScope.canvasLayerNameCollection = [];
985   - $rootScope.canvasLayerNameCollection.push(layer.name);
986   - $('#canvas').setLayer(layer.name, {
987   - handle: {
988   - type: 'rectangle',
989   - fillStyle: '#fff',
990   - strokeStyle: '#c33',
991   - strokeWidth: 2,
992   - width: 5, height: 5,
993   - cornerRadius: 3
994   - }
995   - }).drawLayers();
996   -
997   - },
998   - dblclick: function (layer) {
999   -
1000   - $rootScope.IsTextAlreadySave = false;
1001   - var RectNameArray = (layer.name).split("_");
1002   -
1003   - var TextAreaRectangleName = "TextArea_";
1004   - var TextAreaRectNameConcat = TextAreaRectangleName.concat(RectNameArray[1]);
1005   - $rootScope.TextAreaRectID = layer.name;
1006   - $rootScope.TextID = TextAreaRectNameConcat;
1007   -
1008   - $rootScope.rectDimension.push({ width: layer.width, height: layer.height, x: layer.x, y: layer.y });
1009   - $("#annotationTextModal").css("padding-right", "0px");
1010   - document.getElementById('modelbackground').style.display = "block";
1011   - $("#annotationTextModal").modal("toggle");
1012   -
1013   - $("#text_area").val('');
1014   - $("#text_area").css({ "font-family": "Arial", "font-size": "14px", "font-weight": "normal", "font-style": "normal", "color": "#000", "text-align": "left", "text-decoration": "none" });
1015   - $("#font-color .minicolors .minicolors-swatch .minicolors-swatch-color").css({ "background-color": "#000000" });
1016   - // $("#font-color .minicolors .minicolors-swatch .minicolors-swatch-color").addClass("ActiveDefaultColorAnnotation");
1017   -
1018   - $("#selected-font-family option:eq(0)").prop('selected', true);
1019   - $("#selected-font-size option:eq(0)").prop('selected', true);
1020   -
1021   - $("#text-italic").removeClass("ActiveFormattingButtonClass");
1022   -
1023   - $("#text-bold").removeClass("ActiveFormattingButtonClass");
1024   -
1025   - $("#text-underline").removeClass("ActiveFormattingButtonClass");
1026   -
1027   - $("#text-left").removeClass("ActiveFormattingButtonClass");
1028   -
1029   - $("#text-right").removeClass("ActiveFormattingButtonClass");
1030   -
1031   - $("#text-center").removeClass("ActiveFormattingButtonClass");
1032   -
1033   - },
1034   - mouseout: function (layer) {
1035   - $rootScope.canvasLayerNameCollection = [];
1036   - $('#canvas').setLayer(layer.name, {
1037   - handle: {
1038   - type: 'rectangle',
1039   - fillStyle: 'pink',
1040   - strokeStyle: 'yellow',
1041   - strokeWidth: 0,
1042   - width: 0, height: 0,
1043   - cornerRadius: 0
1044   - }
1045   -
1046   - }).drawLayers();
1047   -
1048   - },
1049   - mouseover: function (layer) {
1050   -
1051   - $('#canvas').setLayer(layer.name, {
1052   - handle: {
1053   - type: 'rectangle',
1054   - fillStyle: '#fff',
1055   - strokeStyle: '#c33',
1056   - strokeWidth: 2,
1057   - width: 5, height: 5,
1058   - cornerRadius: 3
1059   - }
1060   - }).drawLayers();
1061   -
1062   - }
1063   - });
  1113 + // Draw rect as wide as the text
  1114 + .drawRect({
  1115 + layer: true,
  1116 + name: "TextRect_" + $rootScope.TextNumber,
  1117 + dragGroups: ['shapes'],
  1118 + opacity: $rootScope.shapestyleOpacity,
  1119 + strokeStyle: $rootScope.shapestyleborderColor,
  1120 + fromCenter: false,
  1121 + strokeWidth: $rootScope.shapestyleborderWidth,
  1122 + fillStyle: $rootScope.shapestyleFillColor,
  1123 + x: $rootScope.offsetX1, y: $rootScope.offsetY1,
  1124 + width: ($rootScope.x - $rootScope.offsetX1),
  1125 + height: ($rootScope.y - $rootScope.offsetY1),
  1126 + resizeFromCenter: false,
  1127 + add: function (layer) {
  1128 +
  1129 + $rootScope.TextAreaRectID = layer.name;
  1130 + $rootScope.rectDimension.push({ width: layer.width, height: layer.height, x: layer.x, y: layer.y });
  1131 + // $rootScope.CurrentWidth = layer.width;
  1132 + // $rootScope.CurrentHeight = layer.height;
  1133 +
  1134 + },
  1135 + click: function (layer) {
  1136 + if ($rootScope.isAnnotaionToolBarDrawingModeActive == true) {
  1137 + //jcanvas property
  1138 + layer.draggable = true;
  1139 + $rootScope.canvasLayerNameCollection = [];
  1140 + $rootScope.canvasLayerNameCollection.push(layer.name);
  1141 + $('#canvas').setLayer(layer.name, {
  1142 + handle: {
  1143 + type: 'rectangle',
  1144 + fillStyle: '#fff',
  1145 + strokeStyle: '#c33',
  1146 + strokeWidth: 2,
  1147 + width: 5, height: 5,
  1148 + cornerRadius: 3
  1149 + }
  1150 + }).drawLayers();
  1151 + }
  1152 + else {
  1153 + //jcanvas property
  1154 + layer.draggable = false;
  1155 + }
  1156 + },
  1157 + dblclick: function (layer) {
  1158 + if ($rootScope.isAnnotaionToolBarDrawingModeActive == true) {
  1159 + //jcanvas property
  1160 + layer.draggable = true;
  1161 + $rootScope.IsTextAlreadySave = false;
  1162 + var RectNameArray = (layer.name).split("_");
  1163 +
  1164 + var TextAreaRectangleName = "TextArea_";
  1165 + var TextAreaRectNameConcat = TextAreaRectangleName.concat(RectNameArray[1]);
  1166 + $rootScope.TextAreaRectID = layer.name;
  1167 + $rootScope.TextID = TextAreaRectNameConcat;
  1168 +
  1169 + $rootScope.rectDimension.push({ width: layer.width, height: layer.height, x: layer.x, y: layer.y });
  1170 + $("#annotationTextModal").css("padding-right", "0px");
  1171 + document.getElementById('modelbackground').style.display = "block";
  1172 + $("#annotationTextModal").modal("toggle");
  1173 +
  1174 + $("#text_area").val('');
  1175 + $("#text_area").css({ "font-family": "Arial", "font-size": "14px", "font-weight": "normal", "font-style": "normal", "color": "#000", "text-align": "left", "text-decoration": "none" });
  1176 + $("#font-color .minicolors .minicolors-swatch .minicolors-swatch-color").css({ "background-color": "#000000" });
  1177 + // $("#font-color .minicolors .minicolors-swatch .minicolors-swatch-color").addClass("ActiveDefaultColorAnnotation");
  1178 +
  1179 + $("#selected-font-family option:eq(0)").prop('selected', true);
  1180 + $("#selected-font-size option:eq(0)").prop('selected', true);
  1181 +
  1182 + $("#text-italic").removeClass("ActiveFormattingButtonClass");
  1183 +
  1184 + $("#text-bold").removeClass("ActiveFormattingButtonClass");
  1185 +
  1186 + $("#text-underline").removeClass("ActiveFormattingButtonClass");
  1187 +
  1188 + $("#text-left").removeClass("ActiveFormattingButtonClass");
  1189 +
  1190 + $("#text-right").removeClass("ActiveFormattingButtonClass");
  1191 +
  1192 + $("#text-center").removeClass("ActiveFormattingButtonClass");
  1193 + }
  1194 + else {
  1195 + //jcanvas property
  1196 + layer.draggable = false;
  1197 + }
  1198 + },
  1199 + mouseout: function (layer) {
  1200 + if ($rootScope.isAnnotaionToolBarDrawingModeActive == true) {
  1201 + //jcanvas property
  1202 + layer.draggable = true;
  1203 + $rootScope.canvasLayerNameCollection = [];
  1204 + $('#canvas').setLayer(layer.name, {
  1205 + handle: {
  1206 + type: 'rectangle',
  1207 + fillStyle: 'pink',
  1208 + strokeStyle: 'yellow',
  1209 + strokeWidth: 0,
  1210 + width: 0, height: 0,
  1211 + cornerRadius: 0
  1212 + }
  1213 +
  1214 + }).drawLayers();
  1215 + }
  1216 + else {
  1217 + //jcanvas property
  1218 + layer.draggable = false;
  1219 + }
  1220 + },
  1221 + mouseover: function (layer) {
  1222 + if ($rootScope.isAnnotaionToolBarDrawingModeActive == true) {
  1223 + //jcanvas property
  1224 + layer.draggable = true;
  1225 + $('#canvas').setLayer(layer.name, {
  1226 + handle: {
  1227 + type: 'rectangle',
  1228 + fillStyle: '#fff',
  1229 + strokeStyle: '#c33',
  1230 + strokeWidth: 2,
  1231 + width: 5, height: 5,
  1232 + cornerRadius: 3
  1233 + }
  1234 + }).drawLayers();
  1235 +
  1236 + }
  1237 + else {
  1238 + //jcanvas property
  1239 + layer.draggable = false;
  1240 + }
  1241 + }
  1242 + });
  1243 +
  1244 +
  1245 +
1064 1246 // Annotation: Edit Text option is missing.
1065   - // alert($rootScope.CurrentWidth);
1066   - // alert($rootScope.CurrentHeight);
1067 1247 $("#annotationTextModal").css("padding-right", "0px");
1068   - if (($rootScope.CurrentWidth > 0 && $rootScope.CurrentHeight > 0) || ($rootScope.CurrentWidth > 0 && $rootScope.CurrentHeight <= 0) || ($rootScope.CurrentWidth <= 0 && $rootScope.CurrentHeight > 0)) {
1069   - $("#annotationTextModal").modal("toggle");
1070   - document.getElementById('modelbackground').style.display = "block";
1071   - }
1072   - $('.btnCursor').trigger('click');
  1248 + $("#annotationTextModal").modal("toggle");
  1249 + document.getElementById('modelbackground').style.display = "block";
  1250 +
  1251 + }
  1252 + $('.btnCursor').trigger('click');
1073 1253 $("#font-color .minicolors .minicolors-swatch .minicolors-swatch-color").css({ "background-color": "#000000" });
1074 1254  
1075 1255 $("#text_area").val('');
... ... @@ -1095,9 +1275,7 @@ AIA.controller(&quot;HomeController&quot;, [&quot;$rootScope&quot;, &quot;Modules&quot;, &quot;$log&quot;, &quot;$location&quot;,
1095 1275  
1096 1276 $(".btn-annotation").removeClass("activebtncolor");
1097 1277  
1098   - $('.btnCursor').addClass('activebtncolor');
1099   -
1100   -
  1278 + $('.btnCursor').addClass('activebtncolor');
1101 1279  
1102 1280 }
1103 1281  
... ... @@ -1120,15 +1298,18 @@ AIA.controller(&quot;HomeController&quot;, [&quot;$rootScope&quot;, &quot;Modules&quot;, &quot;$log&quot;, &quot;$location&quot;,
1120 1298 // var y = event.clientY;
1121 1299 $rootScope.offsetX1 = 0;
1122 1300 $rootScope.offsetY1 = 0;
  1301 + //alert($location.path());
  1302 +
  1303 + var canvasDiv = document.getElementById('canvasDiv');
  1304 + var verticalScrollPosition = canvasDiv.scrollTop;
  1305 + var horizontlScrollPosition = canvasDiv.scrollLeft;
1123 1306 $rootScope.offsetX1 = event.offsetX;
1124 1307 $rootScope.offsetY1 = event.offsetY;
1125   -
1126 1308 ctx.clearRect(0, 0, 2277, 3248);
1127 1309 $rootScope.clicked = true;
1128   -
1129 1310 // alert("x:"+$rootScope.offsetX1 + " y:" + $rootScope.offsetY1);
  1311 + canvasElement.addEventListener('mousemove', $rootScope.OnPaintCanvasMouseMove, false);
1130 1312 }
1131   -
1132 1313 $rootScope.rectNumber = 0;
1133 1314 $rootScope.LineNumber = 0;
1134 1315 $rootScope.CircleNumber = 0;
... ... @@ -1145,98 +1326,163 @@ AIA.controller(&quot;HomeController&quot;, [&quot;$rootScope&quot;, &quot;Modules&quot;, &quot;$log&quot;, &quot;$location&quot;,
1145 1326 var arrayRect = {};
1146 1327  
1147 1328 var storeLine = '';
1148   - //$rootScope.canvasLayerNameCollection1 = [];
  1329 +
1149 1330 $rootScope.OnPaintCanvasMouseUp = function (event) {
1150 1331  
1151 1332 if (!$rootScope.clicked) {
1152 1333 return;
1153 1334 }
  1335 + var AnnotationCanvas = document.getElementById('canvas');
  1336 + AnnotationCanvas.removeEventListener('mousemove', $rootScope.OnPaintCanvasMouseMove, false);
  1337 +
  1338 + $(".line").remove();
  1339 + $(".arrow").remove();
  1340 + $(".pin").remove();
  1341 + $(".circle").remove();
  1342 + $(".rectangle").remove();
  1343 + $(".textarea").remove();
1154 1344 $rootScope.clicked = false;
1155 1345 $rootScope.x = 0;
1156 1346 $rootScope.y = 0;
1157   -
1158   - $rootScope.x = parseInt(event.clientX - ($("#canvas").offset().left));
1159   - $rootScope.y = parseInt(event.clientY - ($("#canvas").offset().top));
1160   -
1161   -
  1347 + var canvasDiv = document.getElementById('canvasDiv');
  1348 + var verticalScrollPosition = canvasDiv.scrollTop;
  1349 + var horizontlScrollPosition = canvasDiv.scrollLeft;
  1350 + $rootScope.x = event.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left;
  1351 + $rootScope.y = event.pageY + verticalScrollPosition - $('#canvasDiv').offset().top;
1162 1352 var canvasElement = document.getElementById("canvas");
1163 1353 var ctx = canvasElement.getContext("2d");
1164   -
1165 1354 var canvasPaintElement = document.getElementById("canvasPaint");
1166 1355 var PaintCanvasctx = canvasPaintElement.getContext("2d");
1167   -
1168   -
1169 1356 switch ($rootScope.shapeType) {
1170   -
1171 1357 case "cursor":
1172   - // ctx.clearRect(0, 0, 2277, 3248);
1173 1358 ctx.beginPath();
1174 1359 PaintCanvasctx.beginPath();
1175   -
1176   -
1177 1360 break;
1178   -
1179 1361 case "Line":
1180   - //$rootScope.canvasLayerNameCollection = [];
  1362 + $rootScope.isAnnotaionToolBarDrawingModeActive = true;
1181 1363 $rootScope.LineNumber = $rootScope.ObjectIndex++;
1182   -
1183   - $rootScope.LineFn('#canvas', $rootScope.LineNumber, $rootScope.shapestyleborderColor, $rootScope.shapestyleborderWidth, $rootScope.offsetX1, $rootScope.offsetY1, $rootScope.x, $rootScope.y)
1184   -
  1364 + // $rootScope.isLinePreviewCompleted = true;
  1365 + $rootScope.DrawLineOnModuleItem('#canvas', $rootScope.LineNumber, $rootScope.shapestyleborderColor, $rootScope.shapestyleborderWidth, $rootScope.offsetX1, $rootScope.offsetY1, $rootScope.x, $rootScope.y)
1185 1366 break;
1186   -
1187 1367 case "Rectangle":
  1368 + $rootScope.isAnnotaionToolBarDrawingModeActive = true;
1188 1369 $rootScope.rectNumber = $rootScope.ObjectIndex++;
1189   - $rootScope.RectangleFn('#canvas', $rootScope.rectNumber, $rootScope.shapestyleFillColor, $rootScope.shapestyleborderColor, $rootScope.shapestyleOpacity, $rootScope.shapestyleborderWidth, $rootScope.offsetX1, $rootScope.offsetY1, $rootScope.x, $rootScope.y);
1190   -
  1370 + // $rootScope.isRectanglePreviewCompleted = true;
  1371 + $rootScope.DrawRectangleOnModuleItem('#canvas', $rootScope.rectNumber, $rootScope.shapestyleFillColor, $rootScope.shapestyleborderColor, $rootScope.shapestyleOpacity, $rootScope.shapestyleborderWidth, $rootScope.offsetX1, $rootScope.offsetY1, $rootScope.x, $rootScope.y);
  1372 +
1191 1373 break;
1192   -
1193 1374 case "Circle":
1194   - // alert($rootScope.shapestyleborderWidth);
  1375 + $rootScope.isAnnotaionToolBarDrawingModeActive = true;
1195 1376 $rootScope.CircleNumber = $rootScope.ObjectIndex++;
1196   -
1197   - $rootScope.CircleFn('#canvas', $rootScope.CircleNumber, $rootScope.shapestyleOpacity, $rootScope.shapestyleborderColor, $rootScope.shapestyleborderWidth, $rootScope.shapestyleFillColor, $rootScope.offsetX1, $rootScope.offsetY1, $rootScope.x, $rootScope.y);
  1377 + // $rootScope.isCirclePreviewCompleted = true;
  1378 + $rootScope.DrawCircleOnModuleItem('#canvas', $rootScope.CircleNumber, $rootScope.shapestyleOpacity, $rootScope.shapestyleborderColor, $rootScope.shapestyleborderWidth, $rootScope.shapestyleFillColor, $rootScope.offsetX1, $rootScope.offsetY1, $rootScope.x, $rootScope.y);
1198 1379 break;
1199 1380 case "Arrow":
  1381 + $rootScope.isAnnotaionToolBarDrawingModeActive = true;
1200 1382 $rootScope.ArrowNumber = $rootScope.ObjectIndex++;
1201   -
1202   - $rootScope.ArrowFn('#canvas', $rootScope.ArrowNumber, $rootScope.shapestyleborderColor, $rootScope.shapestyleborderWidth, $rootScope.offsetX1, $rootScope.offsetY1, $rootScope.x, $rootScope.y);
1203   -
1204   - // $scope.resetRect += 1;
  1383 + //$rootScope.isArrowPreviewCompleted = true;
  1384 + $rootScope.DrawArrowOnModuleItem('#canvas', $rootScope.ArrowNumber, $rootScope.shapestyleborderColor, $rootScope.shapestyleborderWidth, $rootScope.offsetX1, $rootScope.offsetY1, $rootScope.x, $rootScope.y);
1205 1385 break;
1206 1386 case "Pin":
  1387 + $rootScope.isAnnotaionToolBarDrawingModeActive = true;
1207 1388 $rootScope.PinNumber = $rootScope.PinObjectIndex++;
1208 1389 $rootScope.PinArcNumber = $rootScope.ArcObjectIndex++;
1209   - $rootScope.PinFn('#canvas', $rootScope.PinNumber, $rootScope.offsetX1, $rootScope.offsetY1, $rootScope.x, $rootScope.y, $rootScope.PinArcNumber);
1210 1390  
  1391 + //$rootScope.isPinPreviewCompleted = true;
  1392 +
  1393 + $rootScope.DrawPinOnModuleItem('#canvas', $rootScope.PinNumber, $rootScope.offsetX1, $rootScope.offsetY1, $rootScope.x, $rootScope.y, $rootScope.PinArcNumber);
1211 1394 break;
1212 1395 case "TextArea":
1213   -
  1396 + $rootScope.isAnnotaionToolBarDrawingModeActive = true;
1214 1397 $rootScope.IsTextAlreadySave = false;
1215 1398 $("#text_area").val('');
1216 1399 // Draw text
1217 1400 $rootScope.resetTextRect = $rootScope.ObjectIndex++;
1218 1401 $rootScope.TextNumber = $rootScope.ObjectIndex++;
1219   - $rootScope.TextAreaFn('#canvas', $rootScope.TextNumber, $rootScope.offsetX1, $rootScope.offsetY1, $rootScope.resetTextRect, $rootScope.shapestyleOpacity, $rootScope.shapestyleborderColor, $rootScope.shapestyleborderWidth, $rootScope.shapestyleFillColor, $rootScope.x, $rootScope.y);
  1402 + // $rootScope.isTextAreaPreviewCompleted = true;
  1403 + $rootScope.TextEditorFunctionality('#canvas', $rootScope.TextNumber, $rootScope.offsetX1, $rootScope.offsetY1, $rootScope.resetTextRect, $rootScope.shapestyleOpacity, $rootScope.shapestyleborderColor, $rootScope.shapestyleborderWidth, $rootScope.shapestyleFillColor, $rootScope.x, $rootScope.y);
1220 1404 break;
1221   -
1222 1405 case "DrawPolygon":
1223   -
1224 1406 break;
1225 1407  
1226 1408 }
1227 1409 //}
1228 1410  
1229 1411 }
1230   -
1231   -
1232   -
1233   -
1234   -
  1412 + $rootScope.OnPaintCanvasMouseMove = function (event) {
  1413 + var canvasDiv = document.getElementById('canvasDiv');
  1414 + var verticalScrollPosition = canvasDiv.scrollTop;
  1415 + var horizontlScrollPosition = canvasDiv.scrollLeft;
  1416 + $rootScope.MouseMoveXAxis = event.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left;
  1417 + $rootScope.MouseMoveYAxis = event.pageY + verticalScrollPosition - $('#canvasDiv').offset().top;
  1418 + switch ($rootScope.shapeType) {
  1419 + case "Line":
  1420 + $(".line").remove();
  1421 + $rootScope.isLinePreviewCompleted = true;
  1422 + $("#canvasDiv").append("<div class='line' style='border:1px dashed #000000;position:absolute;left:" + $rootScope.offsetX1 + "px;top:" + $rootScope.offsetY1 + "px;'></div>");
  1423 + $rootScope.Annotationangle();
  1424 + break;
  1425 + case "Arrow":
  1426 + $(".arrow").remove();
  1427 + $rootScope.isArrowPreviewCompleted = true;
  1428 + $("#canvasDiv").append("<div class='arrow' style='border:1px dashed #000000;position:absolute;left:" + $rootScope.offsetX1 + "px;top:" + $rootScope.offsetY1 + "px;width:" + Math.abs($rootScope.MouseMoveXAxis - $rootScope.offsetX1) + "px;'><div style='border-bottom: 9px solid transparent;border-right: 12px dashed #ccc;border-top: 7px solid transparent;height: 0;left: -6px;position: absolute;top: -8px;width: 0;'></div></div>");
  1429 + $rootScope.Annotationangle();
  1430 + break;
  1431 + case "Pin":
  1432 + $(".pin").remove();
  1433 + $rootScope.isPinPreviewCompleted = true;
  1434 + $("#canvasDiv").append("<div class='pin' style='border:1px dashed #000000;position:absolute;left:" + $rootScope.offsetX1 + "px;top:" + $rootScope.offsetY1 + "px;width:" + Math.abs($rootScope.MouseMoveXAxis - $rootScope.offsetX1) + "px;'><div style='background-color:#fff;left: -8px;position: absolute;top: -6px;width: 10;height:12px;width:12px;border:2px dashed #808080;border-radius:50%;'></div></div>");
  1435 + $rootScope.Annotationangle();
  1436 + break;
  1437 + case "Circle":
  1438 + $(".circle").remove();
  1439 + $rootScope.isCirclePreviewCompleted = true;
  1440 + $("#canvasDiv").append("<div class='circle' style='border-radius:50%;border:1px dashed #000000;position:absolute;left:" + $rootScope.offsetX1 + "px;top:" + $rootScope.offsetY1 + "px;width:" + (Math.abs($rootScope.MouseMoveXAxis - $rootScope.offsetX1)) + "px;height:" + (Math.abs($rootScope.MouseMoveYAxis - $rootScope.offsetY1)) + "px;'></div>");
  1441 + break;
  1442 + case "Rectangle":
  1443 + $(".rectangle").remove();
  1444 + $rootScope.isRectanglePreviewCompleted = true;
  1445 + $("#canvasDiv").append("<div class='rectangle' style='border:1px dashed #000000;position:absolute;left:" + $rootScope.offsetX1 + "px;top:" + $rootScope.offsetY1 + "px;width:" + (Math.abs($rootScope.MouseMoveXAxis - $rootScope.offsetX1)) + "px;height:" + (Math.abs($rootScope.MouseMoveYAxis - $rootScope.offsetY1)) + "px;'></div>");
  1446 + break;
  1447 + case "TextArea":
  1448 + $(".textarea").remove();
  1449 + $rootScope.isTextAreaPreviewCompleted = true;
  1450 + $("#canvasDiv").append("<div class='textarea' style='border:1px dashed #000000;position:absolute;left:" + $rootScope.offsetX1 + "px;top:" + $rootScope.offsetY1 + "px;width:" + (Math.abs($rootScope.MouseMoveXAxis - $rootScope.offsetX1)) + "px;height:" + (Math.abs($rootScope.MouseMoveYAxis - $rootScope.offsetY1)) + "px;'></div>");
  1451 + break;
  1452 + }
  1453 + }
  1454 + $rootScope.Annotationangle = function (event) {
  1455 + var dy = $rootScope.MouseMoveYAxis - $rootScope.offsetY1;
  1456 + var dx = $rootScope.MouseMoveXAxis - $rootScope.offsetX1;
  1457 + var theta = 0;
  1458 + if (dx < 0) {
  1459 + theta = Math.atan(dy / dx) * (180 / Math.PI);
  1460 + theta = theta + 180;
  1461 + }
  1462 + else if (dy < 0) {
  1463 + theta = Math.atan(dy / dx) * (180 / Math.PI);
  1464 + theta = theta + 360;
  1465 + }
  1466 + else {
  1467 + theta = Math.atan(dy / dx) * (180 / Math.PI);
  1468 + }
  1469 + var dottedLineWidth = Math.sqrt(($rootScope.offsetX1 - $rootScope.MouseMoveXAxis) * ($rootScope.offsetX1 - $rootScope.MouseMoveXAxis) + ($rootScope.offsetY1 - $rootScope.MouseMoveYAxis) * ($rootScope.offsetY1 - $rootScope.MouseMoveYAxis));
  1470 + switch ($rootScope.shapeType) {
  1471 + case "Line":
  1472 + $('.line').css({ 'transform': 'rotate(' + theta + 'deg)', '-moz-transform': 'rotate(' + theta + 'deg)', '-webkit-transform': 'rotate(' + theta + 'deg)', 'transform-origin': '0% 0%', 'width': dottedLineWidth + 'px' });
  1473 + break;
  1474 + case "Arrow":
  1475 + $('.arrow').css({ 'transform': 'rotate(' + theta + 'deg)', '-moz-transform': 'rotate(' + theta + 'deg)', '-webkit-transform': 'rotate(' + theta + 'deg)', 'transform-origin': '0% 0%', 'width': dottedLineWidth + 'px' });
  1476 + break;
  1477 + case "Pin":
  1478 + $('.pin').css({ 'transform': 'rotate(' + theta + 'deg)', '-moz-transform': 'rotate(' + theta + 'deg)', '-webkit-transform': 'rotate(' + theta + 'deg)', 'transform-origin': '0% 0%', 'width': dottedLineWidth + 'px' });
  1479 + break;
  1480 + }
  1481 + }
1235 1482  
1236 1483 ///-----
1237   -
1238 1484 $rootScope.saveText = function () {
1239   - debugger;
  1485 +
1240 1486 document.getElementById('modelbackground').style.display = "none";
1241 1487 // this part will work first time when save button will be clicked
1242 1488 if ($rootScope.IsTextAlreadySave == false) {
... ... @@ -1251,15 +1497,8 @@ AIA.controller(&quot;HomeController&quot;, [&quot;$rootScope&quot;, &quot;Modules&quot;, &quot;$log&quot;, &quot;$location&quot;,
1251 1497 $rootScope.textArea = $("#text_area").val();
1252 1498  
1253 1499 // deleting previous text area
1254   -
1255   -
1256 1500 $("#canvas").removeLayer($rootScope.TextID).drawLayers();
1257 1501 $("#canvas").removeLayer($rootScope.TextAreaRectID).drawLayers();
1258   -
1259   -
1260   - // $("#canvas").removeLayer('TextArea_' + $rootScope.TextNumber).drawLayers();
1261   - // $("#canvas").removeLayer("TextRect_" + $rootScope.TextNumber).drawLayers();
1262   -
1263 1502 // Text After Saving in Rectangle
1264 1503 $rootScope.resetTextRect = $rootScope.ObjectIndex++;
1265 1504 $('#canvas').drawText({
... ... @@ -1271,6 +1510,7 @@ AIA.controller(&quot;HomeController&quot;, [&quot;$rootScope&quot;, &quot;Modules&quot;, &quot;$log&quot;, &quot;$location&quot;,
1271 1510 fillStyle: $rootScope.fontColor,
1272 1511 fontStyle: $rootScope.fontWeight + " " + $rootScope.fontStyle,
1273 1512 fontSize: $rootScope.fontSizes,
  1513 + fromCenter: false,
1274 1514 fontFamily: $rootScope.fontFamily,
1275 1515 align: $rootScope.textAlignmt,
1276 1516 strokeWidth: 0,
... ... @@ -1294,228 +1534,221 @@ AIA.controller(&quot;HomeController&quot;, [&quot;$rootScope&quot;, &quot;Modules&quot;, &quot;$log&quot;, &quot;$location&quot;,
1294 1534 opacity: $rootScope.shapestyleOpacity,
1295 1535 strokeStyle: $rootScope.shapestyleborderColor,
1296 1536 strokeWidth: $rootScope.shapestyleborderWidth,
  1537 + fromCenter: false,
1297 1538 x: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].x, y: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].y,
1298 1539 width: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].width,
1299 1540 height: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].height,
  1541 + resizeFromCenter: false,
1300 1542 click: function (layer) {
1301   - $rootScope.shapeTypeText = "textAreaRect";
1302   -
1303   - var layerNameSplit = layer.name;
1304   - var splitedName = layerNameSplit.split("_");
1305   - var textValName = "TextAreaNew_";
1306   - var concatinateResult = textValName.concat(splitedName[1]);
1307   - $rootScope.canvasLayerNameCollection = [];
1308   - $rootScope.canvasLayerNameCollection.push({ textareaRectangle: layer.name, textareaString: concatinateResult });
1309   - $('#canvas').setLayer(layer.name, {
1310   - handle: {
1311   - type: 'rectangle',
1312   - fillStyle: '#fff',
1313   - strokeStyle: '#c33',
1314   - strokeWidth: 2,
1315   - width: 5, height: 5,
1316   - cornerRadius: 3
  1543 + if ($rootScope.isAnnotaionToolBarDrawingModeActive == true) {
  1544 + //jcanvas property
  1545 + layer.draggable = true;
  1546 + $rootScope.shapeTypeText = "textAreaRect";
  1547 +
  1548 + var layerName = layer.name;
  1549 + var splitedName = layerName.split("_");
  1550 + var textValName = "TextAreaNew_";
  1551 + var concatinateResult = textValName.concat(splitedName[1]);
  1552 + $rootScope.canvasLayerNameCollection = [];
  1553 + $rootScope.canvasLayerNameCollection.push({ textareaRectangle: layer.name, textareaString: concatinateResult });
  1554 + $('#canvas').setLayer(layer.name, {
  1555 + handle: {
  1556 + type: 'rectangle',
  1557 + fillStyle: '#fff',
  1558 + strokeStyle: '#c33',
  1559 + strokeWidth: 2,
  1560 + width: 5, height: 5,
  1561 + cornerRadius: 3
  1562 + }
  1563 + }).drawLayers();
  1564 + }
  1565 + else {
  1566 + //jcanvas property
  1567 + layer.draggable = false;
1317 1568 }
1318   - }).drawLayers();
1319 1569 },
1320 1570 dblclick: function (layer) {
  1571 + if ($rootScope.isAnnotaionToolBarDrawingModeActive == true) {
  1572 + //jcanvas property
  1573 + layer.draggable = true;
  1574 + $rootScope.isTextAreaClosedButtonActive = false;
  1575 + $rootScope.IsTextAlreadySave = true;
1321 1576  
1322   - $rootScope.isTextAreaClosedButtonActive = false;
1323   - $rootScope.IsTextAlreadySave = true;
1324   -
1325   - var _rectLayerOnSave = layer.name;
1326   - var _rectLayerOnSaveSplit = _rectLayerOnSave.split("_");
1327   - var TextAreaRectName = "TextAreaNew_";
1328   - var TextAreaRectNameConcatenated = TextAreaRectName.concat(_rectLayerOnSaveSplit[1]);
1329   - // alert(TextAreaRectNameConcatenated);
1330   - //if (_rectLayerOnSaveSplit[1]%2 == 0)
1331   - //{
1332   - // _rectLayerOnSaveSplit[1] = _rectLayerOnSaveSplit[1] - 1;
1333   -
1334   - //}
1335   - //else
1336   - //{
1337   -
1338   - // _rectLayerOnSaveSplit[1] = _rectLayerOnSaveSplit[1];
1339   - //}
1340   -
1341   - $rootScope.layerNameArr = layer.name;
1342   - $rootScope.rectTextArr = TextAreaRectNameConcatenated;
1343   -
1344   -
1345   - $rootScope.rectDimension.push({ width: layer.width, height: layer.height, x: layer.x, y: layer.y });
1346   - // var _rectLayerOnSaveSplitInt;
1347   -
1348   -
1349   - // _rectLayerOnSaveSplitInt = parseInt(_rectLayerOnSaveSplit[1]);
  1577 + var _rectLayerOnSave = layer.name;
  1578 + var _rectLayerOnSaveSplit = _rectLayerOnSave.split("_");
  1579 + var TextAreaRectName = "TextAreaNew_";
  1580 + var TextAreaRectNameConcatenated = TextAreaRectName.concat(_rectLayerOnSaveSplit[1]);
1350 1581  
1351   - //alert(_rectLayerOnSaveSplitInt);
1352   - // alert($rootScope.TextPropertyArray.length);
  1582 + $rootScope.layerNameArr = layer.name;
  1583 + $rootScope.rectTextArr = TextAreaRectNameConcatenated;
1353 1584  
1354 1585  
1355   - for (var i = 0; i <= $rootScope.TextPropertyArray.length - 1; i++) {
1356   - if ($rootScope.TextPropertyArray[i].layerName == TextAreaRectNameConcatenated) {
  1586 + $rootScope.rectDimension.push({ width: layer.width, height: layer.height, x: layer.x, y: layer.y });
1357 1587  
1358   - var textArrVal = $rootScope.TextPropertyArray[i].Rect_Text;
1359   - $("#text_area").val(textArrVal);
1360   - var fontStyleProp = $rootScope.TextPropertyArray[i].FontStyle;
1361   - var fontWeightProp = fontStyleProp.split(" ");
  1588 + for (var i = 0; i <= $rootScope.TextPropertyArray.length - 1; i++) {
  1589 + if ($rootScope.TextPropertyArray[i].layerName == TextAreaRectNameConcatenated) {
1362 1590  
1363   - $("#text_area").css("font-size", $rootScope.TextPropertyArray[i].FontSize);
1364   - $("#text_area").css("font-weight", fontWeightProp[0]);
1365   - $("#text_area").css("font-style", fontWeightProp[1]);
1366   - $("#text_area").css("text-align", $rootScope.TextPropertyArray[i].Align);
1367   - $("#text_area").css("color", $rootScope.TextPropertyArray[i].FontColor);
1368   - $("#text_area").css("font-family", $rootScope.TextPropertyArray[i].FontFamily);
1369   - $("#text_area").css("text-decoration", $rootScope.TextPropertyArray[i].TextDecoration);
1370   - $("#font-color .minicolors .minicolors-swatch .minicolors-swatch-color").css({ "background-color": $rootScope.TextPropertyArray[i].FontColor });
  1591 + var textArrVal = $rootScope.TextPropertyArray[i].Rect_Text;
  1592 + $("#text_area").val(textArrVal);
  1593 + var fontStyleProp = $rootScope.TextPropertyArray[i].FontStyle;
  1594 + var fontWeightProp = fontStyleProp.split(" ");
1371 1595  
1372   - var CurrentFontFamily = $rootScope.TextPropertyArray[i].FontFamily;
1373   - // alert(CurrentFontFamily);
1374   - // CurrentFontFamily = CurrentFontFamily.replace(/'/g, "");
1375   - var CurrentFontSize = parseInt($rootScope.TextPropertyArray[i].FontSize);
1376   - $("#selected-font-family option[value=" + CurrentFontFamily + "]").prop('selected', true);
1377   - $("#selected-font-size option[value=" + CurrentFontSize + "]").prop('selected', true);
  1596 + $("#text_area").css("font-size", $rootScope.TextPropertyArray[i].FontSize);
  1597 + $("#text_area").css("font-weight", fontWeightProp[0]);
  1598 + $("#text_area").css("font-style", fontWeightProp[1]);
  1599 + $("#text_area").css("text-align", $rootScope.TextPropertyArray[i].Align);
  1600 + $("#text_area").css("color", $rootScope.TextPropertyArray[i].FontColor);
  1601 + $("#text_area").css("font-family", $rootScope.TextPropertyArray[i].FontFamily);
  1602 + $("#text_area").css("text-decoration", $rootScope.TextPropertyArray[i].TextDecoration);
  1603 + $("#font-color .minicolors .minicolors-swatch .minicolors-swatch-color").css({ "background-color": $rootScope.TextPropertyArray[i].FontColor });
1378 1604  
1379   - CurrentFontFamily = '';
1380   - CurrentFontSize = '';
  1605 + var CurrentFontFamily = $rootScope.TextPropertyArray[i].FontFamily;
  1606 + // alert(CurrentFontFamily);
  1607 + // CurrentFontFamily = CurrentFontFamily.replace(/'/g, "");
  1608 + var CurrentFontSize = parseInt($rootScope.TextPropertyArray[i].FontSize);
  1609 + $("#selected-font-family option[value=" + CurrentFontFamily + "]").prop('selected', true);
  1610 + $("#selected-font-size option[value=" + CurrentFontSize + "]").prop('selected', true);
1381 1611  
1382   - // $(".ActiveDefaultColorAnnotation").css({ "background-color": $rootScope.TextPropertyArray[_rectLayerOnSaveSplitInt].FontColor + "!important" });
1383   - // $("#font-color .minicolors .minicolors-swatch .minicolors-swatch-color").addClass("ActiveDefaultColorAnnotation");
  1612 + CurrentFontFamily = '';
  1613 + CurrentFontSize = '';
1384 1614  
1385 1615  
1386   - //adding text text decoration active class in text edit pop-up
  1616 + if ($rootScope.TextPropertyArray[i].TextDecoration == "underline") {
1387 1617  
  1618 + $("#text-underline").addClass("ActiveFormattingButtonClass");
1388 1619  
  1620 + }
1389 1621  
  1622 + else {
1390 1623  
1391   - if ($rootScope.TextPropertyArray[i].TextDecoration == "underline") {
1392   -
1393   - $("#text-underline").addClass("ActiveFormattingButtonClass");
1394   -
1395   - }
1396   -
1397   - else {
1398   -
1399   - $("#text-underline").removeClass("ActiveFormattingButtonClass");
1400   -
1401   - }
  1624 + $("#text-underline").removeClass("ActiveFormattingButtonClass");
1402 1625  
  1626 + }
1403 1627  
  1628 + //adding text font weight active class in text edit pop-up
1404 1629  
1405   - //adding text font weight active class in text edit pop-up
  1630 + if (fontWeightProp[0] == 700) {
1406 1631  
1407   - if (fontWeightProp[0] == 700) {
  1632 + $("#text-bold").addClass("ActiveFormattingButtonClass");
1408 1633  
  1634 + }
1409 1635  
  1636 + else {
1410 1637  
1411   - $("#text-bold").addClass("ActiveFormattingButtonClass");
  1638 + $("#text-bold").removeClass("ActiveFormattingButtonClass");
1412 1639  
1413   - }
  1640 + }
1414 1641  
1415   - else {
  1642 + //adding text font style active class in text edit pop-up
1416 1643  
1417   - $("#text-bold").removeClass("ActiveFormattingButtonClass");
  1644 + if (fontWeightProp[1] == "italic") {
1418 1645  
1419   - }
1420 1646  
1421   - //adding text font style active class in text edit pop-up
  1647 + $("#text-italic").addClass("ActiveFormattingButtonClass");
  1648 + }
  1649 + else {
  1650 + $("#text-italic").removeClass("ActiveFormattingButtonClass");
1422 1651  
1423   - if (fontWeightProp[1] == "italic") {
1424 1652  
  1653 + }
1425 1654  
1426   - $("#text-italic").addClass("ActiveFormattingButtonClass");
1427   - }
1428   - else {
1429   - $("#text-italic").removeClass("ActiveFormattingButtonClass");
  1655 + //adding text alignment active class in text edit pop-up
1430 1656  
  1657 + if ($rootScope.TextPropertyArray[i].Align == "left") {
1431 1658  
1432   - }
  1659 + $("#text-right").removeClass("ActiveFormattingButtonClass");
1433 1660  
1434   - //adding text alignment active class in text edit pop-up
  1661 + $("#text-center").removeClass("ActiveFormattingButtonClass")
1435 1662  
1436   - if ($rootScope.TextPropertyArray[i].Align == "left") {
  1663 + $("#text-left").addClass("ActiveFormattingButtonClass");
1437 1664  
1438   - $("#text-right").removeClass("ActiveFormattingButtonClass");
  1665 + }
1439 1666  
1440   - $("#text-center").removeClass("ActiveFormattingButtonClass")
  1667 + else if ($rootScope.TextPropertyArray[i].Align == "right") {
1441 1668  
1442   - $("#text-left").addClass("ActiveFormattingButtonClass");
1443 1669  
1444   - }
1445 1670  
1446   - else if ($rootScope.TextPropertyArray[i].Align == "right") {
  1671 + $("#text-center").removeClass("ActiveFormattingButtonClass")
1447 1672  
  1673 + $("#text-left").removeClass("ActiveFormattingButtonClass");
1448 1674  
  1675 + $("#text-right").addClass("ActiveFormattingButtonClass");
  1676 + }
1449 1677  
1450   - $("#text-center").removeClass("ActiveFormattingButtonClass")
  1678 + else if ($rootScope.TextPropertyArray[i].Align == "center") {
1451 1679  
1452   - $("#text-left").removeClass("ActiveFormattingButtonClass");
  1680 + $("#text-left").removeClass("ActiveFormattingButtonClass");
1453 1681  
1454   - $("#text-right").addClass("ActiveFormattingButtonClass");
  1682 + $("#text-right").removeClass("ActiveFormattingButtonClass");
1455 1683  
  1684 + $("#text-center").addClass("ActiveFormattingButtonClass");
1456 1685  
  1686 + }
1457 1687  
1458 1688 }
1459   -
1460   - else if ($rootScope.TextPropertyArray[i].Align == "center") {
1461   -
1462   - $("#text-left").removeClass("ActiveFormattingButtonClass");
1463   -
1464   - $("#text-right").removeClass("ActiveFormattingButtonClass");
1465   -
1466   - $("#text-center").addClass("ActiveFormattingButtonClass");
1467   -
1468   -
  1689 + else {
  1690 + // alert("no");
1469 1691  
1470 1692 }
1471 1693  
1472   -
1473   -
1474 1694 }
1475   - else {
1476   - // alert("no");
1477   -
1478   - }
1479   -
1480   - }
1481   -
1482 1695  
1483   - // _rectLayerOnSaveSplitInt = '';
1484   - textArrVal = '';
1485   - $("#annotationTextModal").css("padding-right", "0px");
1486   - document.getElementById('modelbackground').style.display = "block";
1487   - $("#annotationTextModal").modal("toggle");
1488 1696  
1489   - // $("#selected-font-family").val(CurrentFontFamily);
1490   - // $("#selected-font-size").val(CurrentFontSize);
  1697 + // _rectLayerOnSaveSplitInt = '';
  1698 + textArrVal = '';
  1699 + $("#annotationTextModal").css("padding-right", "0px");
  1700 + document.getElementById('modelbackground').style.display = "block";
  1701 + $("#annotationTextModal").modal("toggle");
1491 1702  
  1703 + // $("#selected-font-family").val(CurrentFontFamily);
  1704 + // $("#selected-font-size").val(CurrentFontSize);
  1705 + }
  1706 + else {
  1707 + //jcanvas property
  1708 + layer.draggable = false;
  1709 + }
1492 1710  
1493 1711 },
1494 1712 mouseout: function (layer) {
1495   - $rootScope.canvasLayerNameCollection = [];
1496   - $('#canvas').setLayer(layer.name, {
1497   - handle: {
1498   - type: 'rectangle',
1499   - fillStyle: 'pink',
1500   - strokeStyle: 'yellow',
1501   - strokeWidth: 0,
1502   - width: 0, height: 0,
1503   - cornerRadius: 0
1504   - }
1505   - }).drawLayers();
  1713 + if ($rootScope.isAnnotaionToolBarDrawingModeActive == true) {
  1714 + //jcanvas property
  1715 + layer.draggable = true;
  1716 + $rootScope.canvasLayerNameCollection = [];
  1717 + $('#canvas').setLayer(layer.name, {
  1718 + handle: {
  1719 + type: 'rectangle',
  1720 + fillStyle: 'pink',
  1721 + strokeStyle: 'yellow',
  1722 + strokeWidth: 0,
  1723 + width: 0, height: 0,
  1724 + cornerRadius: 0
  1725 + }
  1726 + }).drawLayers();
  1727 + }
  1728 + else {
  1729 + //jcanvas property
  1730 + layer.draggable = false;
  1731 + }
1506 1732 },
1507 1733 mouseover: function (layer) {
1508   - $('#canvas').setLayer(layer.name, {
1509   - handle: {
1510   - type: 'rectangle',
1511   - fillStyle: '#fff',
1512   - strokeStyle: '#c33',
1513   - strokeWidth: 2,
1514   - width: 5, height: 5,
1515   - cornerRadius: 3
1516   - }
1517   - }).drawLayers();
1518   -
  1734 + if ($rootScope.isAnnotaionToolBarDrawingModeActive == true) {
  1735 + //jcanvas property
  1736 + layer.draggable = true;
  1737 + $('#canvas').setLayer(layer.name, {
  1738 + handle: {
  1739 + type: 'rectangle',
  1740 + fillStyle: '#fff',
  1741 + strokeStyle: '#c33',
  1742 + strokeWidth: 2,
  1743 + width: 5, height: 5,
  1744 + cornerRadius: 3
  1745 + }
  1746 + }).drawLayers();
  1747 + }
  1748 + else {
  1749 + //jcanvas property
  1750 + layer.draggable = false;
  1751 + }
1519 1752 }
1520 1753 });
1521 1754 $("#text_area").val('');
... ... @@ -1581,6 +1814,7 @@ AIA.controller(&quot;HomeController&quot;, [&quot;$rootScope&quot;, &quot;Modules&quot;, &quot;$log&quot;, &quot;$location&quot;,
1581 1814 fontFamily: _modifiedFontFamily,
1582 1815 align: _modifiedTextAlign,
1583 1816 strokeWidth: 0,
  1817 + fromCenter: false,
1584 1818 text: _modifiedText,
1585 1819 x: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].x, y: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].y,
1586 1820 maxWidth: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].width,
... ... @@ -1595,154 +1829,189 @@ AIA.controller(&quot;HomeController&quot;, [&quot;$rootScope&quot;, &quot;Modules&quot;, &quot;$log&quot;, &quot;$location&quot;,
1595 1829 groups: ['TextAreaAfterEdit_' + $rootScope.resetTextSave],
1596 1830 dragGroups: ['TextAreaAfterEdit_' + $rootScope.resetTextSave],
1597 1831 opacity: $rootScope.shapestyleOpacity,
  1832 + fromCenter: false,
1598 1833 strokeStyle: $rootScope.shapestyleborderColor,
1599 1834 strokeWidth: $rootScope.shapestyleborderWidth,
1600 1835 x: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].x, y: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].y,
1601 1836 width: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].width,
1602 1837 height: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].height,
  1838 + resizeFromCenter: false,
1603 1839 click: function (layer) {
1604   - $rootScope.shapeTypeText = "textAreaRect";
1605   - var layerNameSplit = layer.name;
1606   - var splitedName = layerNameSplit.split("_");
1607   - var textValName = "TextAreaAfterEdit_";
1608   - var concatinateResult = textValName.concat(splitedName[1]);
1609   - $rootScope.canvasLayerNameCollection = [];
1610   - $rootScope.canvasLayerNameCollection.push({ textareaRectangle: layer.name, textareaString: concatinateResult });
1611   -
1612   - $('#canvas').setLayer(layer.name, {
1613   - handle: {
1614   - type: 'rectangle',
1615   - fillStyle: '#fff',
1616   - strokeStyle: '#c33',
1617   - strokeWidth: 2,
1618   - width: 5, height: 5,
1619   - cornerRadius: 3
1620   - }
1621   - }).drawLayers();
  1840 + if ($rootScope.isAnnotaionToolBarDrawingModeActive == true) {
  1841 + //jcanvas property
  1842 + layer.draggable = true;
  1843 + $rootScope.shapeTypeText = "textAreaRect";
  1844 + var layerName = layer.name;
  1845 + var splitedName = layerName.split("_");
  1846 + var textValName = "TextAreaAfterEdit_";
  1847 + var concatinateResult = textValName.concat(splitedName[1]);
  1848 + $rootScope.canvasLayerNameCollection = [];
  1849 + $rootScope.canvasLayerNameCollection.push({ textareaRectangle: layer.name, textareaString: concatinateResult });
  1850 +
  1851 + $('#canvas').setLayer(layer.name, {
  1852 + handle: {
  1853 + type: 'rectangle',
  1854 + fillStyle: '#fff',
  1855 + strokeStyle: '#c33',
  1856 + strokeWidth: 2,
  1857 + width: 5, height: 5,
  1858 + cornerRadius: 3
  1859 + }
  1860 + }).drawLayers();
  1861 + }
  1862 + else {
  1863 + //jcanvas property
  1864 + layer.draggable = false;
  1865 + }
1622 1866  
1623 1867 },
1624 1868 dblclick: function (layer) {
1625 1869  
  1870 + if ($rootScope.isAnnotaionToolBarDrawingModeActive == true) {
  1871 + //jcanvas property
  1872 + layer.draggable = true;
  1873 + $rootScope.isTextAreaClosedButtonActive = false;
  1874 + $rootScope.IsTextAlreadySave = true;
  1875 + var _rectLayerOnSave = layer.name;
  1876 + var _rectLayerOnSaveSplit = _rectLayerOnSave.split("_");
  1877 + var RectNameAfterEdit = "TextAreaAfterEdit_";
  1878 + var RectNameAfterEditResult = RectNameAfterEdit.concat(_rectLayerOnSaveSplit[1]);
  1879 + $rootScope.modifySavedTextIndexNumber = _rectLayerOnSaveSplit[1];
  1880 +
  1881 + $rootScope.layerNameArr = layer.name;
  1882 + $rootScope.rectTextArr = RectNameAfterEditResult;
  1883 +
  1884 + $rootScope.rectDimension.push({ width: layer.width, height: layer.height, x: layer.x, y: layer.y });
  1885 + $("#text_area").val(_modifiedText);
  1886 + $("#text_area").css("font-size", _modifiedFontSize);
  1887 + $("#text_area").css("font-weight", _modifiedFontWeight);
  1888 + $("#text_area").css("font-style", _modifiedFontStyle);
  1889 + $("#text_area").css("text-align", _modifiedTextAlign);
  1890 + $("#text_area").css("color", _modifiedFontColor);
  1891 + $("#text_area").css("font-family", _modifiedFontFamily);
  1892 + $("#text_area").css("text-decoration", _modifiedFontDecoration);
  1893 + $("#font-color .minicolors .minicolors-swatch .minicolors-swatch-color").css({ "background-color": _modifiedFontColor });
  1894 +
  1895 + // $(".ActiveDefaultColorAnnotation").css({ "background-color": _modifiedFontColor + "!important" });
  1896 + // $("#font-color .minicolors .minicolors-swatch .minicolors-swatch-color").addClass("ActiveDefaultColorAnnotation");
  1897 +
  1898 + //khushbu
  1899 + var CurrentFontFamily = _modifiedFontFamily;
  1900 + // alert(CurrentFontFamily);
  1901 + // CurrentFontFamily = CurrentFontFamily.replace(/'/g, "");
  1902 + var CurrentFontSize = parseInt(_modifiedFontSize);
  1903 + $("#selected-font-family option[value=" + CurrentFontFamily + "]").prop('selected', true);
  1904 + $("#selected-font-size option[value=" + CurrentFontSize + "]").prop('selected', true);
  1905 + CurrentFontFamily = '';
  1906 + CurrentFontSize = '';
  1907 + //adding text text decoration active class in text edit pop-up
  1908 + if (_modifiedFontDecoration == "underline") {
  1909 + $("#text-underline").addClass("ActiveFormattingButtonClass");
  1910 + }
  1911 + else {
  1912 + $("#text-underline").removeClass("ActiveFormattingButtonClass");
  1913 + }
1626 1914  
1627   - $rootScope.isTextAreaClosedButtonActive = false;
1628   - $rootScope.IsTextAlreadySave = true;
1629   - var _rectLayerOnSave = layer.name;
1630   - var _rectLayerOnSaveSplit = _rectLayerOnSave.split("_");
1631   - var RectNameAfterEdit = "TextAreaAfterEdit_";
1632   - var RectNameAfterEditResult = RectNameAfterEdit.concat(_rectLayerOnSaveSplit[1]);
1633   - $rootScope.modifySavedTextIndexNumber = _rectLayerOnSaveSplit[1];
1634   -
1635   - $rootScope.layerNameArr = layer.name;
1636   - $rootScope.rectTextArr = RectNameAfterEditResult;
1637   -
1638   - $rootScope.rectDimension.push({ width: layer.width, height: layer.height, x: layer.x, y: layer.y });
1639   - $("#text_area").val(_modifiedText);
1640   - $("#text_area").css("font-size", _modifiedFontSize);
1641   - $("#text_area").css("font-weight", _modifiedFontWeight);
1642   - $("#text_area").css("font-style", _modifiedFontStyle);
1643   - $("#text_area").css("text-align", _modifiedTextAlign);
1644   - $("#text_area").css("color", _modifiedFontColor);
1645   - $("#text_area").css("font-family", _modifiedFontFamily);
1646   - $("#text_area").css("text-decoration", _modifiedFontDecoration);
1647   - $("#font-color .minicolors .minicolors-swatch .minicolors-swatch-color").css({ "background-color": _modifiedFontColor });
1648   -
1649   - // $(".ActiveDefaultColorAnnotation").css({ "background-color": _modifiedFontColor + "!important" });
1650   - // $("#font-color .minicolors .minicolors-swatch .minicolors-swatch-color").addClass("ActiveDefaultColorAnnotation");
1651   -
1652   - //khushbu
1653   - var CurrentFontFamily = _modifiedFontFamily;
1654   - // alert(CurrentFontFamily);
1655   - // CurrentFontFamily = CurrentFontFamily.replace(/'/g, "");
1656   - var CurrentFontSize = parseInt(_modifiedFontSize);
1657   - $("#selected-font-family option[value=" + CurrentFontFamily + "]").prop('selected', true);
1658   - $("#selected-font-size option[value=" + CurrentFontSize + "]").prop('selected', true);
1659   - CurrentFontFamily = '';
1660   - CurrentFontSize = '';
1661   - //adding text text decoration active class in text edit pop-up
1662   - if (_modifiedFontDecoration == "underline") {
1663   - $("#text-underline").addClass("ActiveFormattingButtonClass");
1664   - }
1665   - else {
1666   - $("#text-underline").removeClass("ActiveFormattingButtonClass");
1667   - }
  1915 + //adding text font weight active class in text edit pop-up
  1916 + if (_modifiedFontWeight == 700) {
1668 1917  
1669   - //adding text font weight active class in text edit pop-up
1670   - if (_modifiedFontWeight == 700) {
  1918 + $("#text-bold").addClass("ActiveFormattingButtonClass");
  1919 + }
  1920 + else {
1671 1921  
1672   - $("#text-bold").addClass("ActiveFormattingButtonClass");
1673   - }
1674   - else {
  1922 + $("#text-bold").removeClass("ActiveFormattingButtonClass");
1675 1923  
1676   - $("#text-bold").removeClass("ActiveFormattingButtonClass");
  1924 + }
1677 1925  
1678   - }
  1926 + //adding text font style active class in text edit pop-up
  1927 + if (_modifiedFontStyle == "italic") {
1679 1928  
1680   - //adding text font style active class in text edit pop-up
1681   - if (_modifiedFontStyle == "italic") {
  1929 + $("#text-italic").addClass("ActiveFormattingButtonClass");
  1930 + }
  1931 + else {
  1932 + $("#text-italic").removeClass("ActiveFormattingButtonClass");
1682 1933  
1683   - $("#text-italic").addClass("ActiveFormattingButtonClass");
1684   - }
1685   - else {
1686   - $("#text-italic").removeClass("ActiveFormattingButtonClass");
  1934 + }
1687 1935  
1688   - }
  1936 + //adding text alignment active class in text edit pop-up
  1937 + if (_modifiedTextAlign == "left") {
  1938 + $("#text-right").removeClass("ActiveFormattingButtonClass");
  1939 + $("#text-center").removeClass("ActiveFormattingButtonClass")
  1940 + $("#text-left").addClass("ActiveFormattingButtonClass");
  1941 + }
  1942 + else if (_modifiedTextAlign == "right") {
1689 1943  
1690   - //adding text alignment active class in text edit pop-up
1691   - if (_modifiedTextAlign == "left") {
1692   - $("#text-right").removeClass("ActiveFormattingButtonClass");
1693   - $("#text-center").removeClass("ActiveFormattingButtonClass")
1694   - $("#text-left").addClass("ActiveFormattingButtonClass");
1695   - }
1696   - else if (_modifiedTextAlign == "right") {
  1944 + $("#text-center").removeClass("ActiveFormattingButtonClass")
  1945 + $("#text-left").removeClass("ActiveFormattingButtonClass");
  1946 + $("#text-right").addClass("ActiveFormattingButtonClass");
1697 1947  
1698   - $("#text-center").removeClass("ActiveFormattingButtonClass")
1699   - $("#text-left").removeClass("ActiveFormattingButtonClass");
1700   - $("#text-right").addClass("ActiveFormattingButtonClass");
  1948 + }
  1949 + else if (_modifiedTextAlign == "center") {
  1950 + $("#text-left").removeClass("ActiveFormattingButtonClass");
  1951 + $("#text-right").removeClass("ActiveFormattingButtonClass");
  1952 + $("#text-center").addClass("ActiveFormattingButtonClass");
1701 1953  
1702   - }
1703   - else if (_modifiedTextAlign == "center") {
1704   - $("#text-left").removeClass("ActiveFormattingButtonClass");
1705   - $("#text-right").removeClass("ActiveFormattingButtonClass");
1706   - $("#text-center").addClass("ActiveFormattingButtonClass");
  1954 + }
1707 1955  
  1956 + document.getElementById('modelbackground').style.display = "block";
  1957 + $("#annotationTextModal").modal("toggle");
1708 1958 }
1709   -
1710   - document.getElementById('modelbackground').style.display = "block";
1711   - $("#annotationTextModal").modal("toggle");
  1959 + else {
  1960 + //jcanvas property
  1961 + layer.draggable = false;
  1962 + }
1712 1963 },
1713 1964 mouseout: function (layer) {
1714   - $rootScope.canvasLayerNameCollection = [];
1715   - $('#canvas').setLayer(layer.name, {
1716   - handle: {
1717   - type: 'rectangle',
1718   - fillStyle: 'pink',
1719   - strokeStyle: 'yellow',
1720   - strokeWidth: 0,
1721   - width: 0, height: 0,
1722   - cornerRadius: 0
1723   - }
1724   - }).drawLayers();
  1965 + if ($rootScope.isAnnotaionToolBarDrawingModeActive == true) {
  1966 + //jcanvas property
  1967 + layer.draggable = true;
  1968 + $rootScope.canvasLayerNameCollection = [];
  1969 + $('#canvas').setLayer(layer.name, {
  1970 + handle: {
  1971 + type: 'rectangle',
  1972 + fillStyle: 'pink',
  1973 + strokeStyle: 'yellow',
  1974 + strokeWidth: 0,
  1975 + width: 0, height: 0,
  1976 + cornerRadius: 0
  1977 + }
  1978 + }).drawLayers();
  1979 + }
  1980 + else {
  1981 + //jcanvas property
  1982 + layer.draggable = false;
  1983 + }
1725 1984 },
1726 1985 mouseover: function (layer) {
1727   - $('#canvas').setLayer(layer.name, {
1728   - handle: {
1729   - type: 'rectangle',
1730   - fillStyle: '#fff',
1731   - strokeStyle: '#c33',
1732   - strokeWidth: 2,
1733   - width: 5, height: 5,
1734   - cornerRadius: 3
1735   - }
1736   - }).drawLayers();
  1986 + if ($rootScope.isAnnotaionToolBarDrawingModeActive == true) {
  1987 + //jcanvas property
  1988 + layer.draggable = true;
  1989 + $('#canvas').setLayer(layer.name, {
  1990 + handle: {
  1991 + type: 'rectangle',
  1992 + fillStyle: '#fff',
  1993 + strokeStyle: '#c33',
  1994 + strokeWidth: 2,
  1995 + width: 5, height: 5,
  1996 + cornerRadius: 3
  1997 + }
  1998 + }).drawLayers();
1737 1999  
  2000 + }
  2001 +
  2002 + else {
  2003 + //jcanvas property
  2004 + layer.draggable = false;
  2005 + }
1738 2006 }
  2007 +
1739 2008 });
1740 2009  
1741 2010 }
1742 2011 }
1743 2012 //----
1744 2013  
1745   - $rootScope.BindCanvasDrawingListners = function (event) {
  2014 + $rootScope.onDrawingCanvasClick = function (event) {
1746 2015  
1747 2016 $rootScope.clicked = true;
1748 2017 // OnPaintCanvasMouseDown(event);
... ... @@ -1753,6 +2022,16 @@ AIA.controller(&quot;HomeController&quot;, [&quot;$rootScope&quot;, &quot;Modules&quot;, &quot;$log&quot;, &quot;$location&quot;,
1753 2022 annotationCanvas.addEventListener('mouseup', $rootScope.OnPaintCanvasMouseUp, false);
1754 2023 }
1755 2024 // alert("doclick");
  2025 + // annotation history
  2026 + if (event != undefined) {
  2027 + if ($rootScope.isAnnotaionToolBarDrawingModeActive == false) {
  2028 +
  2029 + $rootScope.getAnnotationTextBasedOnSelectedBodyRegion(event);
  2030 +
  2031 + }
  2032 + }
  2033 +
  2034 +
1756 2035 };
1757 2036  
1758 2037  
... ... @@ -1770,9 +2049,6 @@ AIA.controller(&quot;HomeController&quot;, [&quot;$rootScope&quot;, &quot;Modules&quot;, &quot;$log&quot;, &quot;$location&quot;,
1770 2049  
1771 2050 }
1772 2051 else if ($rootScope.shapeTypeText == "textAreaRect") {
1773   -
1774   -
1775   -
1776 2052 $("#canvas").removeLayer($rootScope.canvasLayerNameCollection[0].textareaRectangle).drawLayers();
1777 2053 $("#canvas").removeLayer($rootScope.canvasLayerNameCollection[0].textareaString).drawLayers();
1778 2054 $rootScope.shapeTypeText = "";
... ... @@ -1780,7 +2056,6 @@ AIA.controller(&quot;HomeController&quot;, [&quot;$rootScope&quot;, &quot;Modules&quot;, &quot;$log&quot;, &quot;$location&quot;,
1780 2056 }
1781 2057 else {
1782 2058  
1783   - // alert($rootScope.canvasLayerNameCollection);
1784 2059 $("#canvas").removeLayer($rootScope.canvasLayerNameCollection).drawLayers();
1785 2060 }
1786 2061  
... ... @@ -1794,12 +2069,6 @@ AIA.controller(&quot;HomeController&quot;, [&quot;$rootScope&quot;, &quot;Modules&quot;, &quot;$log&quot;, &quot;$location&quot;,
1794 2069  
1795 2070 document.getElementById('modelbackground').style.display = "none";
1796 2071  
1797   - //if ($rootScope.isTextAreaClosedButtonActive == true) {
1798   - // $("#canvas").removeLayer('TextArea_' + $rootScope.TextNumber).drawLayers();
1799   - // $("#canvas").removeLayer("TextRect_" + $rootScope.resetTextRect).drawLayers();
1800   -
1801   - //}
1802   -
1803 2072 }
1804 2073 //-- End ----------------------------
1805 2074  
... ... @@ -1836,17 +2105,9 @@ AIA.controller(&quot;HomeController&quot;, [&quot;$rootScope&quot;, &quot;Modules&quot;, &quot;$log&quot;, &quot;$location&quot;,
1836 2105 $rootScope.PaintCanvasMousedownListener = function (canvasContext, x, y) {
1837 2106 if ($rootScope.isLineDrawSelecyed == true) {
1838 2107  
1839   - canvasContext.lineWidth = 0.1;
1840   - //$scope.paintCanvasContext.lineJoin = 'round';
1841   - //$scope.paintCanvasContext.lineCap = 'round';
  2108 + canvasContext.lineWidth = 0.1;
1842 2109 canvasContext.strokeStyle = 'red';
1843   -
1844   -
1845 2110 canvasContext.beginPath();
1846   -
1847   - //var canvasOffset = $("#myCanvas").offset();
1848   - //var offsetX = canvasOffset.left;
1849   - //var offsetY = canvasOffset.top;
1850 2111 canvasContext.moveTo(x, y);
1851 2112 }
1852 2113  
... ... @@ -1891,41 +2152,50 @@ AIA.controller(&quot;HomeController&quot;, [&quot;$rootScope&quot;, &quot;Modules&quot;, &quot;$log&quot;, &quot;$location&quot;,
1891 2152  
1892 2153 $rootScope.disableAnnotationtoolOnListManager = false;
1893 2154 $rootScope.ShowListManager = function () {
  2155 + $rootScope.switchCanvas();
  2156 + $("#annotationpaintbrushsize").attr("href", "#");
1894 2157 console.log('ShowListManager')
1895 2158 $rootScope.disableAnnotationtoolOnListManager = true;
1896   - $('#AnnotaionPopupDiv').find('input, textarea, button, select,img,div').attr('disabled', 'disabled');
  2159 + $('#AnnotaionPopupDiv').find('a,input, textarea, button, select,img,div').attr('disabled', 'disabled');
1897 2160 $('#slider-range-min-2').slider('disable');
  2161 + $("#annotationpaintbrushsize").attr('disabled', 'disabled');
1898 2162 $rootScope.isLoading = true;
1899 2163 $('#spinner').css('visibility', 'visible');
1900 2164  
1901 2165 $('#listManager').css('display', 'block');
1902 2166 $("#listManager").css("visibility", "visible");
1903   -
1904   - // $('#termList option[selected="selected"]').prop("selected", false);
1905   - // $("#termList").find("option[value=" + $rootScope.searchSelectedText + "]").prop("selected", true);
1906   - // $("#termList").find("option").css({ "background-color": "#ffffff", "color": "#000000" });
1907   - // $("#termList").find("option[value=" + $rootScope.searchSelectedText + "]").css({ "background-color": "#3399FF", "color": "#ffffff" });
  2167 +
  2168 + // $('#termList option[selected="selected"]').prop("selected", false);
  2169 + // $("#termList").find("option[value=" + $rootScope.searchSelectedText + "]").prop("selected", true);
  2170 + // $("#termList").find("option").css({ "background-color": "#ffffff", "color": "#000000" });
  2171 + // $("#termList").find("option[value=" + $rootScope.searchSelectedText + "]").css({ "background-color": "#3399FF", "color": "#ffffff" });
1908 2172 $('#listManager').draggable();
1909 2173  
1910 2174  
1911 2175 $rootScope.islistManagerEventAlredayDispachted = true;
1912 2176  
1913 2177 $rootScope.$broadcast('listManagerEvent', true);
1914   -
  2178 +
1915 2179 $('#termList option[selected="selected"]').prop("selected", false);
1916 2180 $('#termList option[value="' + $rootScope.searchSelectedText + '"]').prop("selected", true);
1917 2181 $("#termList").find("option").css({ "background-color": "#ffffff", "color": "#000000" });
1918 2182 $('#termList option[value="' + $rootScope.searchSelectedText + '"]').css({ "background-color": "#3399FF", "color": "#ffffff" });
  2183 +
  2184 +
1919 2185 }
1920 2186  
1921 2187 $rootScope.CloseListManager = function () {
1922   - console.log('close')
  2188 +
  2189 +
  2190 + console.log('close');
1923 2191 $rootScope.disableAnnotationtoolOnListManager = false;
1924 2192 if ($rootScope.MenuModuleName == "DA") {
1925   -
  2193 + $("#annotationpaintbrushsize").attr("href", "#canvasPaint");
1926 2194 if ($rootScope.disableAnnotationtoolOnListManager == false) {
1927   - $('#AnnotaionPopupDiv').find('input, textarea, button, select,img,div').removeAttr('disabled', 'disabled');
  2195 + $('#AnnotaionPopupDiv').find('a,input, textarea, button, select,img,div').removeAttr('disabled', 'disabled');
1928 2196 $('#slider-range-min-2').slider('enable');
  2197 + $("#annotationpaintbrushsize").removeAttr('disabled', 'disabled');
  2198 + $rootScope.switchCanvasToPaintCanvas();
1929 2199 }
1930 2200 }
1931 2201 $('#listManager').css('display', 'none');
... ... @@ -1948,7 +2218,7 @@ AIA.controller(&quot;HomeController&quot;, [&quot;$rootScope&quot;, &quot;Modules&quot;, &quot;$log&quot;, &quot;$location&quot;,
1948 2218 }
1949 2219 }
1950 2220  
1951   -
  2221 + $rootScope.prevId = "";
1952 2222 }
1953 2223  
1954 2224 function fillListManagerTerms() {
... ... @@ -2068,39 +2338,137 @@ AIA.controller(&quot;HomeController&quot;, [&quot;$rootScope&quot;, &quot;Modules&quot;, &quot;$log&quot;, &quot;$location&quot;,
2068 2338 };
2069 2339  
2070 2340 $rootScope.UpdateSetting = function (setting) {
2071   -
  2341 + var isReloadingViewRequired = false;
2072 2342 //1.
2073 2343 if (typeof (setting.ethnicity) !== "undefined" && setting.ethnicity !== null) {
2074 2344 $rootScope.ChangeEthnicity(setting, setting.ethnicity);
  2345 + }
  2346 + if (typeof (setting.modesty) !== "undefined" && setting.modesty !== null) {
  2347 + $rootScope.ChangeModesty(setting, setting.modesty);
  2348 + }
  2349 +
  2350 + //2.
  2351 + if((setting.ethnicity!=null && setting.ethnicity!= $rootScope.globalSetting.ethnicity) && (setting.modesty!=null && setting.modesty != $rootScope.globalSetting.modesty) ){
2075 2352 $rootScope.globalSetting.ethnicity = setting.ethnicity;
2076 2353 localStorage.setItem("globalEthnicity", $rootScope.globalSetting.ethnicity);
2077   - $rootScope.setEthncitySettings($rootScope.globalSetting.ethnicity);
  2354 +
  2355 + $rootScope.globalSetting.modesty = setting.modesty;
  2356 + localStorage.setItem("globalModesty", setting.modesty);
  2357 +
  2358 + isReloadingViewRequired = true;
  2359 +
2078 2360 }
2079   - if (typeof (setting.modesty) !== "undefined" && setting.modesty !== null) {
2080   - $rootScope.ChangeModesty(setting, setting.modesty);
  2361 +
  2362 + else if (setting.ethnicity!=null && setting.ethnicity != $rootScope.globalSetting.ethnicity) {
  2363 +
  2364 + $rootScope.globalSetting.ethnicity = setting.ethnicity;
  2365 + localStorage.setItem("globalEthnicity", $rootScope.globalSetting.ethnicity);
  2366 +
  2367 + $rootScope.globalSetting.modesty = localStorage.getItem("globalModesty");
  2368 +
  2369 + isReloadingViewRequired = true;
  2370 + }
  2371 + else if (setting.modesty!= null && setting.modesty != $rootScope.globalSetting.modesty) {
2081 2372 $rootScope.globalSetting.modesty = setting.modesty;
2082 2373 localStorage.setItem("globalModesty", $rootScope.globalSetting.modesty);
2083   - $rootScope.setModestySettings($rootScope.globalSetting.modesty);
  2374 +
  2375 + $rootScope.globalSetting.ethnicity = localStorage.getItem("globalEthnicity");
  2376 +
  2377 + if ($('.modestyImg') != null) {
  2378 + if (($rootScope.globalSetting.modesty == 'Y')) {
  2379 + $('.modestyImg').css('visibility', 'visible');
  2380 + }
  2381 +
  2382 + else {
  2383 + $('.modestyImg').css('visibility', 'hidden');
  2384 + }
  2385 + }
  2386 + $rootScope.changeNavigatorModesty();
2084 2387 }
  2388 +
  2389 + var len = $rootScope.openModules.length;
  2390 + if (len > 0) {
  2391 + if (isReloadingViewRequired == true) {
  2392 + $rootScope.reloadChildController();
  2393 + }
  2394 + }
  2395 + else {
  2396 + $('#modal-settings').modal('hide');
  2397 + }
2085 2398  
2086   - //2.
2087   - //localStorage.setItem("globalEthnicity", $rootScope.globalSetting.ethnicity);
  2399 + };
2088 2400  
2089   - //3.
2090   - //localStorage.setItem("globalModesty", $rootScope.globalSetting.modesty);
2091 2401  
2092   - //4.
2093   - //$rootScope.reloadChildController();
2094 2402  
2095   - var len = $rootScope.openModules.length;
2096   - if (len > 0) {
2097   - $rootScope.reloadChildController();
  2403 + $rootScope.FreeStylePaint = function (e) {
  2404 +
  2405 + var annotationCanvas = document.getElementById("canvas");
  2406 + annotationCanvas.addEventListener('mousedown', $rootScope.OnPaintBrushCanvasMouseDown, false);
  2407 + annotationCanvas.addEventListener('mouseup', $rootScope.OnPaintBrushCanvasMouseUp, false);
  2408 + // document.getElementById("canvasPaint").addEventListener("mouseup", OnPaintBrushCanvasMouseUp);
  2409 + //alert($rootScope.isAnnotaionToolBarDrawingModeActive);
  2410 + //if ($rootScope.isAnnotaionToolBarDrawingModeActive == true) {
  2411 +
  2412 + // alert($rootScope.isAnnotaionToolBarDrawingModeActive);
  2413 + // $rootScope.getAnnotationTextBasedOnSelectedBodyRegion(e);
  2414 +
  2415 + //}
  2416 + //else {
  2417 +
  2418 +
  2419 +
  2420 + //}
2098 2421 }
2099   - else {
2100   - $('#modal-settings').modal('hide');
  2422 +
  2423 +
  2424 +
  2425 +
  2426 +
  2427 +
  2428 +
  2429 + $rootScope.OnPaintBrushCanvasMouseDown = function (event) {
  2430 + $rootScope.isMousedownOnPaintCanvas = true;
  2431 + $rootScope.isStartPointDeleted = false;
  2432 + var annotationCanvas = document.getElementById("canvas");
  2433 + $rootScope.startPageX = parseInt(event.clientX - ($("#canvas").offset().left));
  2434 + $rootScope.startPageY = parseInt(event.clientY - ($("#canvas").offset().top));
  2435 +
  2436 + annotationCanvas.addEventListener('mousemove', $rootScope.OnPaintBrushCanvasMouseMove, false);
  2437 +
  2438 + }
  2439 + $rootScope.OnPaintBrushCanvasMouseMove = function (event) {
  2440 +
  2441 + $rootScope.xPage = parseInt(event.clientX - ($("#canvas").offset().left));
  2442 + $rootScope.yPage = parseInt(event.clientY - ($("#canvas").offset().top));
  2443 +
  2444 + var btneraseBrushSizeValue = $("#btnBrushSize").val();
  2445 + $rootScope.eraseshapeSize = parseInt(btneraseBrushSizeValue);
  2446 +
  2447 + if ($rootScope.isEraseToolSelected == true && $rootScope.isMousedownOnPaintCanvas == true) {
  2448 +
  2449 + var sktch = $('#canvasPaint').sketch();
  2450 + $('#canvasPaint').sketch().actions = [];
  2451 + var paintCanvas = document.getElementById("canvasPaint");
  2452 + var paintCanvasContext = paintCanvas.getContext('2d');
  2453 + if ($rootScope.isStartPointDeleted == false) {
  2454 +
  2455 + paintCanvasContext.clearRect($rootScope.startPageX, $rootScope.startPageY, $rootScope.eraseshapeSize, $rootScope.eraseshapeSize);
  2456 +
  2457 + $rootScope.isStartPointDeleted = true;
  2458 + }
  2459 +
  2460 + paintCanvasContext.clearRect($rootScope.xPage, $rootScope.yPage, $rootScope.eraseshapeSize, $rootScope.eraseshapeSize);
  2461 +
  2462 +
2101 2463 }
  2464 + }
  2465 + $rootScope.OnPaintBrushCanvasMouseUp = function (event) {
  2466 + $rootScope.isMousedownOnPaintCanvas = false;
  2467 + $rootScope.isEraseToolSelected = false;
  2468 + $(".btn-annotation-erase").removeClass("activebtncolor");
  2469 +
  2470 + }
2102 2471  
2103   - };
2104 2472  
2105 2473 $rootScope.reloadChildController = function () {
2106 2474  
... ... @@ -2114,8 +2482,8 @@ AIA.controller(&quot;HomeController&quot;, [&quot;$rootScope&quot;, &quot;Modules&quot;, &quot;$log&quot;, &quot;$location&quot;,
2114 2482 //Check that what current bodyview is open
2115 2483 if ($rootScope.openViews.length > 0) {
2116 2484 var openViewLen = $rootScope.openViews.length;
2117   - var currentOpenViewId = $rootScope.openViews[openViewLen - 1].BodyViewId;
2118   - //$rootScope.isSettingEventAlredayDispachted = true;
  2485 + var currentOpenViewId = localStorage.getItem("currentBodyViewId");//$rootScope.openViews[openViewLen - 1].BodyViewId;
  2486 + $rootScope.isSettingEventAlredayDispachted = true;
2119 2487 $rootScope.$broadcast('reloadDABodyViewEvent', { reloadDABodyViewId: currentOpenViewId }, true);
2120 2488 }
2121 2489 else {
... ... @@ -2125,6 +2493,14 @@ AIA.controller(&quot;HomeController&quot;, [&quot;$rootScope&quot;, &quot;Modules&quot;, &quot;$log&quot;, &quot;$location&quot;,
2125 2493 }
2126 2494 };
2127 2495  
  2496 + $rootScope.ShowExportImageWindow = function () {
  2497 + $(".export-image").css("display", "block");
  2498 + };
2128 2499  
  2500 + $rootScope.CloseExportImageWindow = function () {
  2501 + console.log('close')
  2502 + $(".export-image").css("display", "none");
  2503 + };
  2504 +
2129 2505 }]
2130 2506 );
2131 2507 \ No newline at end of file
... ...
400-SOURCECODE/AIAHTML5.Web/app/views/ca/ca-view.html
  View file @122a725
... ... @@ -59,43 +59,43 @@
59 59 </div>
60 60 <div role="tabpanel" ng-class="{'tab-pane active' : activeTab === 2,'tab-pane' : activeTab !==2 }" id="list-view">
61 61 <div class="panel col-sm-12 table-responsive" style="padding-left:0px; padding-right:0; margin-left:11px; margin-bottom:0; width:99%;">
62   - <table class="table table-hover table-fixed bg-white table-txt12" style="padding-left:25px; width:100%;">
  62 + <table class="table table-hover table-fixed bg-white table-txt12 tablecaview" style="padding-left:25px; width:100%;">
63 63 <thead class="clstheadca">
64   - <tr class="active">
65   - <th style="min-width: 250px;">Title</th>
66   - <th style="min-width: 250px;">Region</th>
67   - <th style="min-width: 260px;">System</th>
68   - <th style="min-width: 280px;">Specialty</th>
  64 + <tr class="active" style="background:#f5f5f5;">
  65 + <th style="width:25%">Title</th>
  66 + <th style="width:25%">Region</th>
  67 + <th style="width:25%">System</th>
  68 + <th style="width:25%">Specialty</th>
69 69 </tr>
70 70 </thead>
71 71 <tbody id="ListViewDiv" ng-if="!filterstring" class="clstbodyca">
72 72 <tr id="{{item._id}}" ng-class="{selected: item._id === idSelected}" ng-click="showItem(item._id)" ng-dblclick="openView($event)" ng-repeat="item in selectedCAListViewData">
73   - <td style="max-width: 250px;">
  73 + <td style="width:25%">
74 74 {{item._Title}}
75 75 </td>
76   - <td style="max-width: 250px;">
  76 + <td style="width:25%">
77 77 {{item._BodyRegion}}
78 78 </td>
79   - <td style="min-width: 260px;">
  79 + <td style="width:25%">
80 80 {{item._BodySystem}}
81 81 </td>
82   - <td style="max-width: 280px;">
  82 + <td style="width:25%">
83 83 {{item._MedicalSpecialty}}
84 84 </td>
85 85 </tr>
86 86 </tbody>
87 87 <tbody id="ListViewDiv" ng-if="filterstring" class="clstbodyca">
88 88 <tr ng-click="showItem(item._id)" ng-class="{selected: item._id === idSelected}" ng-dblclick="openView($event)" ng-repeat="item in searchCAListViewData">
89   - <td style="max-width: 250px;">
  89 + <td style="width:25%">
90 90 {{item._Title}}
91 91 </td>
92   - <td style="max-width: 250px;">
  92 + <td style="width:25%">
93 93 {{item._BodyRegion}}
94 94 </td>
95   - <td style="min-width: 260px;">
  95 + <td style="width:25%">
96 96 {{item._BodySystem}}
97 97 </td>
98   - <td style="max-width: 280px;">
  98 + <td style="width:25%">
99 99 {{item._MedicalSpecialty}}
100 100 </td>
101 101 </tr>
... ...
400-SOURCECODE/AIAHTML5.Web/app/views/da/da-view.html
  View file @122a725
... ... @@ -238,7 +238,7 @@
238 238 </div>
239 239  
240 240 <div class="col-xs-12">
241   - <button id="btnStrutureBox" onclick="enableShowHideStructureBox()" class="btn btn-primary btn-sm marginTop5 btn-block tooltip-custom" data-toggle="tooltip" data-placement="bottom" title="Show/Hide Structure Name Boxes"> <img src="content/images/comment-box.png" alt=""></button>
  241 + <button id="btnStrutureBox" onclick="enableShowHideStructureBox()" class="btn btn-primary btn-sm marginTop5 btn-block tooltip-custom" data-toggle="tooltip" data-placement="bottom" name="showAnnotationStructure" title="Show/Hide Structure Name Boxes"> <img src="content/images/comment-box.png" alt=""></button>
242 242 </div>
243 243  
244 244 </div>
... ... @@ -313,7 +313,7 @@
313 313  
314 314 <div class="dropdown-menu active" id="navigatorDiv" style="min-height:auto; min-width:auto; ">
315 315 <div id="containment-wrapper" align="center" style="min-width:auto;height:119px; ">
316   - <img id="navimg" ng-src="{{navimgsrc}}" alt=""></img>
  316 + <img id="navimg" alt=""></img>
317 317 <div id="draggable" class="draggable ui-widget-content" ng-mouseup="ScrollCanvasDiv()" ng-style="dragdivposition">
318 318 </div>
319 319 </div>
... ... @@ -328,7 +328,7 @@
328 328 <div class="row">
329 329 <div id="canvasDiv" class="col-sm-12 img-thumbnail" align="center">
330 330 <canvas id="canvasPaint" ng-click="FreeStylePaint($event)" width="2277" height="3248" class="canvas-annotationStyle1"></canvas>
331   - <canvas id="canvas" ng-click="BindCanvasDrawingListners($event)" width="2277" height="3248" class="canvas-annotationStyle"></canvas>
  331 + <canvas id="canvas" ng-click="onDrawingCanvasClick($event)" width="2277" height="3248" class="canvas-annotationStyle"></canvas>
332 332 </div>
333 333 <!--<div id="canvasDiv" style=" width: 95% !important;top:0px;overflow:scroll;background-color:white;">-->
334 334 <!--<div id="daLoaderLabel">Loading....</div>-->
... ...
400-SOURCECODE/AIAHTML5.Web/app/widget/TopMenu.html
  View file @122a725
... ... @@ -15,7 +15,7 @@
15 15 <li><a href="#">Open Existing Curriculum</a></li>
16 16 <li><a href="#">Save Curriculum As</a></li>
17 17 <li role="separator" class="divider"></li>
18   - <li><a href="#">Export Image</a></li>
  18 + <li><a href="" id="exportImageAnchor" data-toggle="modal" ng-click="ShowExportImageWindow()">Export Image</a></li>
19 19 <li role="separator" class="divider"></li>
20 20 <li><a href="#">Print Active Viewer</a></li>
21 21 <li><a href="#">Print All Open Viewers</a></li>
... ... @@ -30,14 +30,14 @@
30 30 <ul class="dropdown-menu">
31 31 <!--<li><a href="#" ng-click="ShowListManager()">List Manager</a></li>-->
32 32  
33   - <li><a href="#" ng-click="ShowListManager()">List Manager</a></li>
  33 + <li ng-class="disableSubMenu"><a href="#" ng-click="ShowListManager()">List Manager</a></li>
34 34 <!--#7904-->
35 35 <li><a href="#" id="annotationToolBarOptions" ng-click="ShowAnnotationWindow()">Annotation Toolbar</a></li>
36 36  
37   - <li><a href="#">Add to Existing Curriculum</a></li>
  37 + <li ng-class="disableSubMenu"><a href="#">Add to Existing Curriculum</a></li>
38 38 <li><a ng-click="ShowSettingWindow()" class="cursor-pointer">Settings</a></li>
39 39 <li role="separator" class="divider"></li>
40   - <li><a href="#">Lab Exercises PDF</a></li>
  40 + <li ng-class="disableMenuoption"><a href="#">Lab Exercises PDF</a></li>
41 41 </ul>
42 42 </li>
43 43 <li class="dropdown">
... ... @@ -87,5 +87,5 @@
87 87 </div>
88 88 </div>
89 89 </div>
90   -
  90 +
91 91 </div>
... ...
400-SOURCECODE/AIAHTML5.Web/content/data/json/settings/fontstyle.json
  View file @122a725
... ... @@ -160,8 +160,6 @@
160 160 },{
161 161 "FontName": "Vivaldi"
162 162 },{
163   -"FontName": "Webdings"
164   -},{
165 163 "FontName": "Wide Latin"
166 164 },{
167 165 "FontName": "Wingdings"
... ...
400-SOURCECODE/AIAHTML5.Web/index.html
  View file @122a725
1 1 ๏ปฟ<!DOCTYPE html>
2 2 <html lang="en" ng-cloak ng-app="AIA">
3 3 <head>
4   - <!--<base href="/AIAHTML5/" />-->
  4 + <!--<base href="/AIAHTML5/" />-->
5 5 <!--<base href="/AIA/" />-->
6 6 <base href="/" />
7 7 <meta charset="utf-8">
... ... @@ -19,7 +19,6 @@
19 19  
20 20  
21 21 <!--<link rel="styleSheet" href="themes/default/css/uigrid/ui-grid.min.css" />-->
22   -
23 22 <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
24 23 <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
25 24 <!--[if lt IE 9]>
... ... @@ -38,7 +37,6 @@
38 37  
39 38 <!--Annotation Toolbar: Jcanvas-->
40 39 <style>
41   -
42 40 /*.ActiveDefaultColorAnnotation {
43 41 background-color: #000000!important;
44 42 }*/
... ... @@ -49,9 +47,9 @@
49 47 color: #fff !important;
50 48  
51 49 }
52   -
53   -
54   - .ActiveFormattingButtonClass {
  50 +
  51 +
  52 + .ActiveFormattingButtonClass {
55 53 background-color: #1B92D0 !important;
56 54 }
57 55  
... ... @@ -147,7 +145,6 @@
147 145 color: #000;
148 146 border-radius: 0;
149 147 }
150   -
151 148 </style>
152 149  
153 150  
... ... @@ -483,7 +480,7 @@
483 480 <button type="button" class="close" aria-label="Close" ng-click="CloseAnnotationTool()"><span aria-hidden="true">&times;</span></button>
484 481 <h4 class="modal-title" id="myModalLabel">Annotation</h4>
485 482 </div>
486   - <div class="modal-body" id="AnnotaionPopupDiv" >
  483 + <div class="modal-body" id="AnnotaionPopupDiv">
487 484 <div class="row">
488 485 <div class="col-sm-12">
489 486 <h5>Mode</h5>
... ... @@ -491,7 +488,7 @@
491 488 <div class="btn-group btn-group-justified" role="group" aria-label="...">
492 489 <div class="btn-group" role="group" tooltip>
493 490 <div id="identify-block" style="display: none; font-size:13px;">Identify Mode</div>
494   - <button id="OnIdentify" type="button" class="btn btn-sm btn-success" ng-click="OnIdentifyClick()">Identify</button>
  491 + <button id="OnIdentify" type="button" class="btn btn-sm btn-success" ng-click="OnIdentifyClick()">Identify</button>
495 492 </div>
496 493 <div class="btn-group" role="group">
497 494 <div id="draw-block" style="display: none; font-size: 13px;">Draw Mode</div>
... ... @@ -507,24 +504,24 @@
507 504 <div class="" role="group" align="center">
508 505 <div id="cursor-block" style="display: none; font-size:13px;"></div>
509 506 <button type="button" class="btn btn-black-annotation btn-xs mrgnBtm5 btnCursor" ng-mouseover="mouseMoveToolTip(75, 60, 120, 'Select Cursor(s)')" ng-mouseleave="mouseOutToolTip()" ng-click="Cursor()"><img src="content/images/icon-identity.png" alt="" title=""></button>
510   - <button type="button" class="btn btn-black-annotation btn-xs mrgnBtm5 btn-annotation btn-annotation-pin" ng-mouseover="mouseMoveToolTip(75, 100, 120, 'Draw Pin')" ng-mouseleave="mouseOutToolTip()" ng-click="DrPin($event)"><img src="content/images/draw-pin.png" alt="" title=""></button>
  507 + <button type="button" class="btn btn-black-annotation btn-xs mrgnBtm5 btn-annotation btn-annotation-pin" ng-mouseover="mouseMoveToolTip(75, 100, 120, 'Draw Pin')" ng-mouseleave="mouseOutToolTip()" ng-click="DrawPin($event)"><img src="content/images/draw-pin.png" alt="" title=""></button>
511 508 <button type="button" class="btn btn-black-annotation btn-xs mrgnBtm5 btn-annotation btn-annotation-arrow" ng-mouseover="mouseMoveToolTip(75, 120, 120, 'Draw Arrow')" ng-mouseleave="mouseOutToolTip()" ng-click="DrawArrow($event)"><img src="content/images/draw-arrow.png" alt="" title=""></button>
512 509 <button type="button" class="btn btn-black-annotation btn-xs mrgnBtm5 btn-annotation btn-annotation-Text" ng-mouseover="mouseMoveToolTip(75, 140, 120, 'Draw Text')" ng-mouseleave="mouseOutToolTip()" ng-click="DrawText($event)"><img src="content/images/draw-text.png" alt="" title=""></button>
513 510 </div>
514 511 <div class="" role="group" align="center">
515   - <button type="button" class="btn btn-black-annotation btn-xs btn-annotation btn-annotation-line" ng-mouseover="mouseMoveToolTip(95, 60, 120, 'Draw Line')" ng-mouseleave="mouseOutToolTip()" ng-click="DrLine($event)"><img src="content/images/draw-line.png" alt="" title=""></button>
  512 + <button type="button" class="btn btn-black-annotation btn-xs btn-annotation btn-annotation-line" ng-mouseover="mouseMoveToolTip(95, 60, 120, 'Draw Line')" ng-mouseleave="mouseOutToolTip()" ng-click="DrawLine($event)"><img src="content/images/draw-line.png" alt="" title=""></button>
516 513 <button type="button" class="btn btn-black-annotation btn-xs btn-annotation btn-annotation-rectangle" ng-mouseover="mouseMoveToolTip(95, 100, 120, 'Draw Rectangle')" ng-mouseleave="mouseOutToolTip()" ng-click="DrawRectangle($event)"><img src="content/images/draw-rec.png" alt="" title=""></button>
517 514 <button type="button" class="btn btn-black-annotation btn-xs btn-annotation btn-annotation-circle" ng-mouseover="mouseMoveToolTip(95, 120, 120, 'Draw Circle')" ng-mouseleave="mouseOutToolTip()" ng-click="DrawCircle($event)"><img src="content/images/draw-cir.png" alt="" title=""></button>
518   - <button type="button" class="btn btn-black-annotation btn-xs btn-annotation" ng-mouseover="mouseMoveToolTip(95, 140, 120, 'Draw Polygon')" ng-mouseleave="mouseOutToolTip()" ng-click="DrawPolygon($event)"><img src="content/images/draw-poly.png" alt="" title=""></button>
  515 + <!--<button type="button" class="btn btn-black-annotation btn-xs btn-annotation" ng-mouseover="mouseMoveToolTip(95, 140, 120, 'Draw Polygon')" ng-mouseleave="mouseOutToolTip()" ng-click="DrawPolygon($event)"><img src="content/images/draw-poly.png" alt="" title=""></button>-->
519 516 </div>
520 517 </div>
521 518 </div>
522   - <div class="well-popup well blankshapediv">
  519 + <div class="well-popup well blankshapediv" ng-mouseover="mouseMoveToolTip(200, 170, 120, 'Edit Style')" ng-mouseleave="mouseOutToolTip()">
523 520 <!--#7931-->
524 521  
525 522 <div id="edit-block" style="display: none; font-size: 13px;">Edit Shape Style</div>
526   - <div class="outlinediv">
527   - <div id="shapeStyleDiv" class="fullcolordiv" ng-click="disableAnnotationtoolOnListManager||enableAnnotationToolBar()">
  523 + <div id="previewBorder" class="outlinediv" ng-mouseover="mouseMoveToolTip(170, 170, 120, 'Edit Style')" ng-mouseleave="mouseOutToolTip()">
  524 + <div id="shapeStyleDiv" style="background-color: #ffffff;" class="fullcolordiv" ng-click="disableAnnotationtoolOnListManager||enableAnnotationToolBar()">
528 525  
529 526 </div>
530 527  
... ... @@ -533,21 +530,21 @@
533 530 <div class="well well-popup">
534 531 <div class="" role="group" aria-label="...">
535 532 <div>
536   - <a href="#canvasPaint" data-size="1" data-color="#fff" id="annotationpaintbrushsize" class="btn btn-primary btn-xs pull-left btn-annotation" role="button" data-toggle="tooltip" data-placement="top" title="Paint" style="margin-right:1%;" ng-click="paintBrush()"><i class="fa fa-paint-brush"></i></a>
537   - <button type="button" class="btn btn-primary btn-xs pull-left btn-annotation" data-toggle="tooltip" data-placement="top" title="Erase" ng-click="EraseDrawing()"><i class="fa fa-eraser"></i></button>&nbsp;
  533 + <a href="#canvasPaint" data-size="1" data-color="#fff" id="annotationpaintbrushsize" ng-mouseover="mouseMoveToolTip(270, 50, 120, 'Paint')" ng-mouseleave="mouseOutToolTip()" class="btn btn-black-annotation btn-xs pull-left btn-annotation btn-annotation-brush" role="button" data-placement="top" style="margin-right:1%;" ng-click="paintBrush()"><i class="fa fa-paint-brush"></i></a>
  534 + <button type="button" class="btn btn-black-annotation btn-xs pull-left btn-annotation btn-annotation-erase" data-placement="top" ng-click="EraseDrawing()" ng-mouseover="mouseMoveToolTip(270, 70, 120, 'Erase')" ng-mouseleave="mouseOutToolTip()"><i class="fa fa-eraser"></i></button>&nbsp;
538 535 <div style="width: 80px; margin: 0px 0px 0px 4px; display: inline-block;float:left;">
539   - <div style="width: 58px; float: left;">
  536 + <div style="width: 58px; float: left;" ng-mouseover="mouseMoveToolTip(270, 100, 120, 'Brush Size')" ng-mouseleave="mouseOutToolTip()">
540 537 <input type="text" id="btnBrushSize" class="form-control" value="1" style="height:32px;border-radius:0;" oninput="Brushsize(this)">
541 538 </div>
542 539 <div style="width: 22px; float: left;">
543 540 <div style="width: 100%; float: left; height: 16px;">
544   - <button type="button" id="btnBrushSizeIncrement" class="btn btn-default" style="padding:0 5px;border-radius:0;font-size: 10px;vertical-align:top;">
  541 + <button type="button" id="btnBrushSizeIncrement" ng-mouseover="mouseMoveToolTip(270, 100, 120, 'Brush Size')" ng-mouseleave="mouseOutToolTip()" class="btn btn-default" style="padding:0 5px;border-radius:0;font-size: 10px;vertical-align:top;">
545 542  
546 543 <img style="width:10px;height:10px;" src="~/../content/images/DA/angle-up.png">
547 544 </button>
548 545 </div>
549 546 <div style="width: 100%; float: left; height: 16px;">
550   - <button type="button" id="btnBrushSizeDecrease" class="btn btn-default" style="padding:0 5px;border-radius:0;font-size: 10px;vertical-align:top;">
  547 + <button type="button" id="btnBrushSizeDecrease" ng-mouseover="mouseMoveToolTip(270, 100, 120, 'Brush Size')" ng-mouseleave="mouseOutToolTip()" class="btn btn-default" style="padding:0 5px;border-radius:0;font-size: 10px;vertical-align:top;">
551 548 <img style="width:10px;height:10px;" src="~/../content/images/DA/angle-down.png">
552 549 </button>
553 550 </div>
... ... @@ -556,7 +553,7 @@
556 553 </div>
557 554  
558 555 <div class="pull-left" style="width:45%; margin-left:2%;margin-top:5px;">
559   - <div id="slider-range-min-2"></div>
  556 + <div id="slider-range-min-2" ng-mouseover="mouseMoveToolTip(270, 170, 120, 'Brush Size')" ng-mouseleave="mouseOutToolTip()"></div>
560 557 </div>
561 558 <div class="clearfix"></div>
562 559 </div>
... ... @@ -575,77 +572,77 @@
575 572 </div>
576 573  
577 574 <!--Modal For Annotation Text Box-->
578   - <div id="annotationTextModal" style="display:none;z-index: 1000000000;width:500px;height:241px;padding-right:0!important;position:fixed;left:0;right:0;top:0px;bottom:0;margin:auto;">
579   -
580   - <div class="modal-content">
581   - <div class="modal-header" style="background-color: #808D43;padding:10px;border-bottom:0;">
582   - <!--<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>-->
583   - <h4 class="modal-title" id="myModalLabel" style="font-weight:bold;">Enter Text to be put in a box</h4>
584   - </div>
585   - <div class="modal-body">
586   - <div class="col-xs-12" style="padding:20px 0;">
587   - <div class="form-inline">
588   - <!--Annotation: Text in different font style is same.-->
589   - <select class="form-control" id="selected-font-family"></select>
590   - <select class="form-control" id="selected-font-size">
591   - <option>14</option>
592   - <option>16</option>
593   - <option>18</option>
594   - <option>20</option>
595   - <option>22</option>
596   - <option>24</option>
597   - <option>26</option>
598   - <option>28</option>
599   - <option>36</option>
600   - <option>48</option>
601   - <option>72</option>
602   - </select>
603   - <span style="vertical-align:middle;">
604   - <span id="text-bold" class="Edittext-btn-css">
605   - <i aria-hidden="true" class="fa fa-bold" style="color: #fff"></i>
606   - </span>
607   - <span id="text-italic" class="Edittext-btn-css">
608   - <i class="fa fa-italic" aria-hidden="true" style="color: #fff"></i>
609   -
610   - </span>
611   - <span id="text-underline" class="underline-btn-css">
612   - <i class="fa fa-underline" aria-hidden="true" style="color: #fff"></i>
613   - </span>
  575 + <div id="annotationTextModal" style="display:none;z-index: 1000000000;width:500px;height:241px;padding-right:0!important;position:fixed;left:0;right:0;top:0px;bottom:0;margin:auto;">
  576 +
  577 + <div class="modal-content">
  578 + <div class="modal-header" style="background-color: #808D43;padding:10px;border-bottom:0;">
  579 + <!--<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>-->
  580 + <h4 class="modal-title" id="myModalLabel" style="font-weight:bold;">Enter Text to be put in a box</h4>
  581 + </div>
  582 + <div class="modal-body">
  583 + <div class="col-xs-12" style="padding:20px 0;">
  584 + <div class="form-inline">
  585 + <!--Annotation: Text in different font style is same.-->
  586 + <select class="form-control" id="selected-font-family"></select>
  587 + <select class="form-control" id="selected-font-size">
  588 + <option>14</option>
  589 + <option>16</option>
  590 + <option>18</option>
  591 + <option>20</option>
  592 + <option>22</option>
  593 + <option>24</option>
  594 + <option>26</option>
  595 + <option>28</option>
  596 + <option>36</option>
  597 + <option>48</option>
  598 + <option>72</option>
  599 + </select>
  600 + <span style="vertical-align:middle;">
  601 + <span id="text-bold" class="Edittext-btn-css">
  602 + <i aria-hidden="true" class="fa fa-bold" style="color: #fff"></i>
614 603 </span>
  604 + <span id="text-italic" class="Edittext-btn-css">
  605 + <i class="fa fa-italic" aria-hidden="true" style="color: #fff"></i>
615 606  
616   - <div class="form-group" id="font-color" style="display:inline-flex;vertical-align:top;cursor:pointer;margin-right:36px;">
  607 + </span>
  608 + <span id="text-underline" class="underline-btn-css">
  609 + <i class="fa fa-underline" aria-hidden="true" style="color: #fff"></i>
  610 + </span>
  611 + </span>
617 612  
618   - <input type="text" id="saturation-demo" class="form-control demo" data-control="saturation" style="display:none;" value="#0088cc">
619   - </div>
  613 + <div class="form-group" id="font-color" style="display:inline-flex;vertical-align:top;cursor:pointer;margin-right:36px;">
620 614  
621   - <span style="vertical-align:middle;">
622   - <span id="text-left" class="Edittext-btn-css">
623   - <i aria-hidden="true" class="fa fa-align-left" style="color: #fff"></i>
624   - </span>
625   - <span id="text-center" class="Edittext-btn-css">
626   - <i class="fa fa-align-center" aria-hidden="true" style="color: #fff"></i>
  615 + <input type="text" id="saturation-demo" class="form-control demo" data-control="saturation" style="display:none;" value="#0088cc">
  616 + </div>
627 617  
  618 + <span style="vertical-align:middle;">
  619 + <span id="text-left" class="Edittext-btn-css">
  620 + <i aria-hidden="true" class="fa fa-align-left" style="color: #fff"></i>
  621 + </span>
  622 + <span id="text-center" class="Edittext-btn-css">
  623 + <i class="fa fa-align-center" aria-hidden="true" style="color: #fff"></i>
628 624  
629   - </span>
630   - <span id="text-right" class="underline-btn-css">
631   - <i class="fa fa-align-right" aria-hidden="true" style="color: #fff"></i>
  625 +
  626 + </span>
  627 + <span id="text-right" class="underline-btn-css">
  628 + <i class="fa fa-align-right" aria-hidden="true" style="color: #fff"></i>
632 629  
633 630  
634   - </span>
635 631 </span>
  632 + </span>
636 633  
637 634  
638   - </div>
639 635 </div>
640   - <textarea class="form-control" id="text_area" rows="3" style="font-family: 'Verdana, sans-serif';font-size:14px; font-weight: normal; font-style: normal; color: #000; text-align: left; text-decoration: none;"></textarea>
641   - </div>
642   - <div class="modal-footer">
643   - <!--<button type="button" class="btn btn-default" ng-click="closeModal()" data-dismiss="modal">Close</button>-->
644   - <button type="button" class="btn btn-default" ng-click="closeModal()" id="closeEditText" data-dismiss="modal">Close</button>
645   - <button type="button" id="saveBtn" class="btn btn-primary" data-dismiss="modal" ng-click="saveText()">Save</button>
646 636 </div>
  637 + <textarea class="form-control" id="text_area" rows="3" style="font-family: 'Verdana, sans-serif';font-size:14px; font-weight: normal; font-style: normal; color: #000; text-align: left; text-decoration: none;"></textarea>
  638 + </div>
  639 + <div class="modal-footer">
  640 + <!--<button type="button" class="btn btn-default" ng-click="closeModal()" data-dismiss="modal">Close</button>-->
  641 + <button type="button" class="btn btn-default" ng-click="closeModal()" id="closeEditText" data-dismiss="modal">Close</button>
  642 + <button type="button" id="saveBtn" class="btn btn-primary" data-dismiss="modal" ng-click="saveText()">Save</button>
647 643 </div>
648   -
  644 + </div>
  645 +
649 646 </div>
650 647  
651 648  
... ... @@ -666,7 +663,7 @@
666 663 top: 170px;
667 664 left: 140px;
668 665 display: none;
669   - z-index: 1100;
  666 + z-index: 110000;
670 667 }
671 668  
672 669 #listManager .annotation-modal-header {
... ... @@ -769,7 +766,7 @@
769 766 <!--Edit Shape Modal-->
770 767  
771 768  
772   - <div class="modeleditstyle" id="modeleditstyle" style="z-index: 1000000000; background: white; height: 433px; width: 302px;position:absolute;left:40%;right:0;top:70px;">
  769 + <div class="modeleditstyle" id="modeleditstyle" style="z-index: 1000000000; background: white;width: 302px;position:absolute;left:40%;right:0;top:70px;">
773 770 <div class="modal-content">
774 771 <div class="modal-header annotation-modal-header">
775 772 <h4 class="modal-title" id="myModalLabel33">Edit Shape Style</h4>
... ... @@ -786,13 +783,13 @@
786 783 </div>
787 784 </div>
788 785 <div class="col-sm-6 enableDisableOpacity">
789   - <div class="radio">
  786 + <!--<div class="radio">
790 787 <label>
791 788 <input type="radio" name="filloption" id="filloption1" value="filloption1">
792 789 <span class="">Texture</span>
793 790 <img id="editstyleTexture" src="~/../content/images/common/annotation-tool-bar/pattern-picker.png" alt="" class="pattern-picker" data-toggle="modal" data-target="#pattern">
794 791 </label>
795   - </div>
  792 + </div>-->
796 793 <div class="radio">
797 794 <label>
798 795 <input type="radio" name="filloption" id="filloption2" value="filloption2" checked style="margin-top:8px;">
... ... @@ -874,18 +871,18 @@
874 871 </div>
875 872  
876 873 <div class="marginTopBtm10">
877   -
  874 +
878 875 <div class="well well-sm no-margin-btm blankshapediv">
879   - <div class="outlinediv">
880   - <div id="imgOpacity" class="fullcolordiv imgopacity">
881   - </div>
882   - </div>
883   - </div>
  876 + <div class="outlinediv" id="outlinedivId" style="border: 1px solid #000000;">
  877 + <div id="imgOpacity" style="background-color: #ffffff" class="fullcolordiv imgopacity">
  878 + </div>
  879 + </div>
  880 + </div>
884 881  
885 882 </div>
886 883 </div>
887 884 <div class="modal-footer">
888   - <button type="button" class="btn btn-primary btn-sm" ng-click="shapestyle('imgOpacity')">
  885 + <button id="btnShapeStyle" type="button" class="btn btn-primary btn-sm" ng-click="setPropertiesForShapes('imgOpacity')">
889 886 OK
890 887 </button>
891 888 <button type="button" class="btn btn-primary btn-sm" data-dismiss="modal" ng-click="disableAnnotationToolBar()">Cancel</button>
... ... @@ -893,8 +890,39 @@
893 890 </div>
894 891 </div>
895 892  
  893 + <!--Export Image Modal-->
  894 + <div class="modal fade export-image ui-draggable in" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="display: none;">
  895 + <div class="modal-dialog modal-sm" role="document">
  896 + <div class="modal-content">
  897 + <div class="modal-header annotation-modal-header ui-draggable-handle">
  898 + <button type="button" class="close" data-dismiss="modal" ng-click="CloseExportImageWindow()" aria-label="Close"><span aria-hidden="true">ร—</span></button>
  899 + <h4 class="modal-title" id="">Save As</h4>
  900 + </div>
  901 + <div class="modal-body">
  902 + <div class="row paddTopbtm15">
  903 + <div class="col-sm-12">
  904 + <div class="form-group">
  905 + <label for="filename">Filename:</label>
  906 + <div class="input-group">
  907 + <input type="text" class="form-control" id="filename" placeholder="" ng-model="filename">
  908 + <div class="input-group-addon">.jpg</div>
  909 + </div>
  910 + </div>
  911 + </div>
  912 + </div>
896 913  
  914 + </div>
  915 + <div class="modal-footer">
  916 + <div class="row">
  917 + <input type="file" id="file1" style="display:none">
  918 + <!--<a href="data:application/xml;charset=utf-8,your code here" download="filename.html">Save</a-->>
  919 + <div class="col-sm-12"><button id="btnSaveEI" class="btn btn-primary" type="button">Ok</button></div> <!--onclick="makeScreenshot();"--><!--ng-click="dialogs.saveAs()"--><!--ng-click="ShowAlert()"-->
  920 + </div>
  921 + </div>
897 922  
  923 + </div>
  924 + </div>
  925 + </div>
898 926  
899 927 <!--<div class="modal fade" id="editshapestyle" tabindex="-1" role="dialog" aria-labelledby="myModalLabel33" style="z-index:1000000000;width:302px;margin-left:auto;margin-right:auto;overflow:hidden;height:460px;">
900 928 <div class="modal-dialog modal-sm" role="document">
... ... @@ -932,7 +960,7 @@
932 960 </div>
933 961  
934 962  
935   -
  963 +
936 964 </label>
937 965 </div>
938 966 </div>
... ... @@ -941,7 +969,7 @@
941 969 <label class="pull-left" style="font-weight:normal;">Scale</label>
942 970 <div id="edit-slider-3" class="pull-left" style="width:62%; margin-left:3%; margin-top:2%;">
943 971 <div id="slider-range-min-3"></div>
944   -
  972 +
945 973 </div>
946 974 </div>
947 975  
... ... @@ -1010,7 +1038,7 @@
1010 1038 </div>
1011 1039 </div>
1012 1040 <div class="modal-footer">
1013   - <button type="button" class="btn btn-primary btn-sm" ng-click="shapestyle('imgOpacity')">
  1041 + <button type="button" class="btn btn-primary btn-sm" ng-click="setPropertiesForShapes('imgOpacity')">
1014 1042 OK
1015 1043 </button>
1016 1044 <button type="button" class="btn btn-primary btn-sm" data-dismiss="modal" ng-click="disableAnnotationToolBar()">Cancel</button>
... ... @@ -1020,14 +1048,17 @@
1020 1048 </div>-->
1021 1049  
1022 1050 <script>
1023   - function enableDisableFillOption()
1024   - {
1025   -
1026   - if (document.getElementById('fill-option').checked)
1027   - {
1028   -
  1051 +
  1052 + function enableDisableFillOption() {
  1053 + //debugger;
  1054 + if (document.getElementById('fill-option').checked) {
  1055 + // $('#imgOpacity').attr("background-color");
  1056 + //$('#imgOpacity').css({"background-color"})
1029 1057 //$("#filloption1").css({ "pointer-events": "auto" });
1030 1058 //$("#filloption12").css({ "pointer-events": "auto" });
  1059 +
  1060 + var x = $("#editstylebackgroundcolor span.minicolors-swatch-color").css('background-color');
  1061 + $("#imgOpacity").css("background-color", x);
1031 1062 $("#edit-slider-3").css({ "pointer-events": "auto" });
1032 1063 $("#edit-slider-4").css({ "pointer-events": "auto" });
1033 1064 $("#editstylebackgroundcolor").css({ "pointer-events": "auto" });
... ... @@ -1042,14 +1073,13 @@
1042 1073  
1043 1074  
1044 1075 }
1045   - else
1046   - {
1047   -
  1076 + else {
  1077 + $('#imgOpacity').css("background-color","transparent");
1048 1078 //$("#filloption1").css({ "pointer-events": "none" });
1049 1079 //$("#filloption2").css({ "pointer-events": "none" });
1050   - $("#edit-slider-3").css({ "pointer-events": "none"});
1051   - $("#edit-slider-4").css({ "pointer-events": "none"});
1052   - $("#editstylebackgroundcolor").css({ "pointer-events": "none"});
  1080 + $("#edit-slider-3").css({ "pointer-events": "none" });
  1081 + $("#edit-slider-4").css({ "pointer-events": "none" });
  1082 + $("#editstylebackgroundcolor").css({ "pointer-events": "none" });
1053 1083 $("#editstyleTexture").css({ "pointer-events": "none" });
1054 1084 $(".enableDisableOpacity label").css({ "cursor": "default" });
1055 1085 $(".enableDisableOpacity").css({ "opacity": ".5" })
... ... @@ -1066,32 +1096,37 @@
1066 1096 function enableDisableOutline() {
1067 1097  
1068 1098 if (document.getElementById('Outline-Option').checked) {
  1099 + var x = $("#outlineColor span.minicolors-swatch-color").css('background-color');
  1100 + $(".marginTopBtm10 div.outlinediv").css("border-color", x);
  1101 + // var borderWidth = $("#outlineColor span.minicolors-swatch-color").css('border-width');
  1102 + // $("#imgOpacity").css("border-width", borderWidth);
1069 1103  
1070 1104 $("#borderWidthCanvasElement").css({ "pointer-events": "auto" });
1071 1105 $("#outlineColor").css({ "pointer-events": "auto" });
1072 1106 $(".setEnableDisableForEditShapeStyle").css({ "opacity": "1" })
1073 1107 }
1074 1108 else {
  1109 + $('.marginTopBtm10 div.outlinediv').css("border-color", "transparent");
1075 1110 $("#borderWidthCanvasElement").css({ "pointer-events": "none" });
1076 1111 $("#outlineColor").css({ "pointer-events": "none" });
1077 1112 $(".setEnableDisableForEditShapeStyle").css({ "opacity": ".5" })
1078 1113 }
1079 1114 }
1080 1115  
1081   - </script>
  1116 + </script>
1082 1117  
1083   - <script>
1084   - function mytoggle() {
1085   - var div = document.getElementById("divSection");
1086   - if (div.style.display == 'block') {
1087   - div.style.display = 'none';
1088   - return;
1089   - }
1090   - div.style.display = 'block';
  1118 + <script>
  1119 + function mytoggle() {
  1120 + var div = document.getElementById("divSection");
  1121 + if (div.style.display == 'block') {
  1122 + div.style.display = 'none';
  1123 + return;
1091 1124 }
  1125 + div.style.display = 'block';
  1126 + }
1092 1127 </script>
1093 1128  
1094   -
  1129 +
1095 1130 <script>
1096 1131 function mytoggle() {
1097 1132 var div = document.getElementById("divSection");
... ... @@ -1107,17 +1142,16 @@
1107 1142  
1108 1143 object.value = object.value.replace(/[^0-9]/g, '');
1109 1144 if (parseInt(object.value) <= 0) {
1110   - object.value =1;
  1145 + object.value = 1;
1111 1146 }
1112   - if (parseInt(object.value)>=1 && parseInt(object.value) <= 60) {
  1147 + if (parseInt(object.value) >= 1 && parseInt(object.value) <= 60) {
1113 1148 object.value = object.value;
1114 1149 }
1115   - if(parseInt(object.value) > 60)
1116   - {
  1150 + if (parseInt(object.value) > 60) {
1117 1151 object.value = object.value.slice(0, 1);
1118   -
  1152 +
1119 1153 }
1120   -
  1154 +
1121 1155 }
1122 1156 </script>
1123 1157  
... ... @@ -1170,11 +1204,15 @@
1170 1204  
1171 1205 <script src="app/services/ModuleService.js"></script>
1172 1206  
1173   - <script src="libs/jquery/jquery_plugin/color-picker/jquery.minicolors.min.js"></script>
  1207 + <script src="libs/jquery/jquery_plugin/color-picker/jquery.minicolors.min.js"></script>
1174 1208 <!--<script src="libs/colorpicker/jquery.minicolors.min.js"></script>-->
1175 1209 <!--<script src="libs/color-picker/jquery.minicolors.min.js"></script>-->
1176 1210  
1177 1211 <script src="libs/sketch.js"></script>
  1212 +
  1213 + <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>-->
  1214 + <script src="libs/html2canvas.js"></script>
  1215 + <script src="libs/FileSaver.js"></script>
1178 1216 <!--<script type="text/javascript">
1179 1217 $(function () {
1180 1218 $('#canvas').sketch();
... ... @@ -1225,9 +1263,14 @@
1225 1263 $("#slider-range-min-2").slider("value", parseInt(brushIncrementedValue));
1226 1264 }
1227 1265 });
1228   - $("#btnBrushSizeDecrease").click(function () {
  1266 + $("#btnBrushSizeDecrease").click(function () {
1229 1267 var brushDecreaseVar = $("#btnBrushSize").val();
1230   - if (brushDecreaseVar <= 1) {
  1268 + if (brushDecreaseVar == "") {
  1269 + var brushDecrementedValue = 1;
  1270 + $("#btnBrushSize").val(brushDecrementedValue);
  1271 + $("#slider-range-min-2").slider("value", parseInt(brushDecrementedValue));
  1272 + }
  1273 + else if (brushDecreaseVar <= 1) {
1231 1274 $("#slider-range-min-2").slider("value", 1);
1232 1275 }
1233 1276 else {
... ... @@ -1398,7 +1441,7 @@
1398 1441 $("#text_area").css("text-decoration", "none");
1399 1442 }
1400 1443  
1401   -
  1444 +
1402 1445 });
1403 1446  
1404 1447  
... ... @@ -1428,22 +1471,24 @@
1428 1471 var borderWidth = 1;
1429 1472 var borderColor = "#000";
1430 1473 $("#borderWidthCanvasElement").change(function () {
1431   -
1432 1474 borderWidth = $(this).val();
1433   -
  1475 + borderColor = $('#outlineColor .minicolors >.minicolors-swatch > .minicolors-swatch-color').css("background-color");
  1476 +
1434 1477 if (borderColor != null) {
1435   -
1436   - $("#imgOpacity").parent().css("border", borderWidth + "px" + " " + "solid" + borderColor);
  1478 + document.getElementById("imgOpacity").parentNode.style.border = borderWidth + "px" + " " + "solid" + " " + borderColor;
  1479 + //$("#imgOpacity").parent().css("border", borderWidth + "px" + " " + "solid" + borderColor);
1437 1480 } else {
1438 1481  
1439   - $("#imgOpacity").parent().css("border", borderWidth + "px" + " " + "solid");
  1482 + // $("#imgOpacity").parent().css("border", borderWidth + "px" + " " + "solid");
  1483 + document.getElementById("imgOpacity").parentNode.style.border = borderWidth + "px" + " " + "solid" + " " + borderColor;
  1484 +
1440 1485 }
1441 1486 });
1442 1487  
1443   -
  1488 +
1444 1489  
1445 1490 $('.borderColorCanvasPreview').each(function () {
1446   - // $("#font-color .minicolors .minicolors-swatch .minicolors-swatch-color").addClass("ActiveDefaultColorAnnotation");
  1491 + // $("#font-color .minicolors .minicolors-swatch .minicolors-swatch-color").addClass("ActiveDefaultColorAnnotation");
1447 1492 $(this).minicolors({
1448 1493 control: $(this).attr('data-control') || 'hue',
1449 1494 defaultValue: $(this).attr('data-defaultValue') || '',
... ... @@ -1459,9 +1504,10 @@
1459 1504 if (opacity) value += ', ' + opacity;
1460 1505 if (typeof console === 'object') {
1461 1506 console.log(value);
1462   -
1463   - borderColor = value;
1464   - $("#imgOpacity").parent().css("border", borderWidth + "px" + " " + "solid" + borderColor);
  1507 +
  1508 + borderColor = value;
  1509 + //$("#imgOpacity").parent().css("border", borderWidth + "px" + " " + "solid" + borderColor);
  1510 + document.getElementById("imgOpacity").parentNode.style.border = borderWidth + "px" + " " + "solid" + " " + borderColor;
1465 1511  
1466 1512  
1467 1513 }
... ... @@ -1469,12 +1515,12 @@
1469 1515 theme: 'bootstrap'
1470 1516 });
1471 1517  
1472   -
  1518 +
1473 1519 });
1474 1520  
1475 1521  
1476 1522 $('.outerBackgroundColor').each(function () {
1477   -
  1523 +
1478 1524 $(this).minicolors({
1479 1525 control: $(this).attr('data-control') || 'hue',
1480 1526 defaultValue: $(this).attr('data-defaultValue') || '',
... ... @@ -1502,7 +1548,7 @@
1502 1548  
1503 1549 });
1504 1550 </script>
1505   -
  1551 +
1506 1552 <script>
1507 1553 $(function () {
1508 1554 $("#slider-range-min-3").slider({
... ... @@ -1534,10 +1580,9 @@
1534 1580 max: 1,
1535 1581 step: .1,
1536 1582 slide: function (event, ui) {
1537   -
1538   - $(".marginTopBtm10 .imgopacity").css("opacity", ui.value);
1539   - // $("#slider-value").html(ui.value);
1540 1583  
  1584 + $(".marginTopBtm10 .imgopacity").css("opacity", ui.value);
  1585 + $(".marginTopBtm10 div.outlinediv").css("opacity", ui.value);
1541 1586 }
1542 1587  
1543 1588 }
... ... @@ -1554,24 +1599,24 @@
1554 1599  
1555 1600 <script>
1556 1601 $(function () {
1557   -
  1602 +
1558 1603  
1559 1604 $("#OnIdentify").on('mouseover', function () {
1560 1605 $("#identify-block").addClass("custom-tooltip-annotation");
1561 1606 $(".custom-tooltip-annotation").css('display', 'block');
1562 1607 }).on('mouseout', function () {
1563   - // $("#identify-block").removeClass("custom-tooltip-annotation");
  1608 + // $("#identify-block").removeClass("custom-tooltip-annotation");
1564 1609 $(".custom-tooltip-annotation").css('display', 'none');
1565 1610 $("#identify-block").removeClass("custom-tooltip-annotation");
1566 1611 });
1567 1612  
1568   -
  1613 +
1569 1614 $("#DrawMode").on('mouseover', function () {
1570 1615 $("#draw-block").addClass("custom-tooltip-annotation");
1571 1616 $(".custom-tooltip-annotation").css('display', 'block');
1572   -
  1617 +
1573 1618 }).on('mouseout', function () {
1574   -
  1619 +
1575 1620 $(".custom-tooltip-annotation").css('display', 'none');
1576 1621 $("#draw-block").removeClass("custom-tooltip-annotation");
1577 1622 });
... ... @@ -1589,9 +1634,34 @@
1589 1634  
1590 1635 });
1591 1636 </script>
1592   -
1593   -
1594   -
1595   -
  1637 + <!-- Export Image Save Click-->
  1638 + <script>
  1639 + $(function () {
  1640 + $("#btnSaveEI").click(function () {
  1641 + html2canvas($("#canvasDiv"), {
  1642 + onrendered: function (canvas) {
  1643 + theCanvas = canvas;
  1644 + var fileName = document.getElementById("filename").value + '.jpg';
  1645 + if (typeof (fileName) == "undefined" || fileName == ".jpg")
  1646 + fileName = "Untitled.jpg"
  1647 + var dataURL = canvas.toDataURL("image/jpeg");
  1648 + var blob = dataURItoBlob(dataURL);
  1649 + saveAs(blob, fileName);
  1650 + $("#filename").val("");
  1651 + }
  1652 + });
  1653 + $(".export-image").css("display", "none");
  1654 + });
  1655 + });
  1656 + function dataURItoBlob(dataURI) {
  1657 + var byteString = atob(dataURI.split(',')[1]);
  1658 + var ab = new ArrayBuffer(byteString.length);
  1659 + var ia = new Uint8Array(ab);
  1660 + for (var i = 0; i < byteString.length; i++) {
  1661 + ia[i] = byteString.charCodeAt(i);
  1662 + }
  1663 + return new Blob([ab], { type: 'image/jpeg' });
  1664 + }
  1665 + </script>
1596 1666 </body>
1597 1667 </html>
1598 1668 \ No newline at end of file
... ...
400-SOURCECODE/AIAHTML5.Web/libs/FileSaver.js 0 โ†’ 100644
  View file @122a725
  1 +/* FileSaver.js
  2 + * A saveAs() & saveTextAs() FileSaver implementation.
  3 + * 2014-06-24
  4 + *
  5 + * Modify by Brian Chen
  6 + * Author: Eli Grey, http://eligrey.com
  7 + * License: X11/MIT
  8 + * See https://github.com/eligrey/FileSaver.js/blob/master/LICENSE.md
  9 + */
  10 +
  11 +/*global self */
  12 +/*jslint bitwise: true, indent: 4, laxbreak: true, laxcomma: true, smarttabs: true, plusplus: true */
  13 +
  14 +/*! @source http://purl.eligrey.com/github/FileSaver.js/blob/master/FileSaver.js */
  15 +
  16 +var saveAs = saveAs
  17 + // IE 10+ (native saveAs)
  18 + || (typeof navigator !== "undefined" &&
  19 + navigator.msSaveOrOpenBlob && navigator.msSaveOrOpenBlob.bind(navigator))
  20 + // Everyone else
  21 + || (function (view) {
  22 + "use strict";
  23 + // IE <10 is explicitly unsupported
  24 + if (typeof navigator !== "undefined" &&
  25 + /MSIE [1-9]\./.test(navigator.userAgent)) {
  26 + return;
  27 + }
  28 + var
  29 + doc = view.document
  30 + // only get URL when necessary in case Blob.js hasn't overridden it yet
  31 + , get_URL = function () {
  32 + return view.URL || view.webkitURL || view;
  33 + }
  34 + , save_link = doc.createElementNS("http://www.w3.org/1999/xhtml", "a")
  35 + , can_use_save_link = !view.externalHost && "download" in save_link
  36 + , click = function (node) {
  37 + var event = doc.createEvent("MouseEvents");
  38 + event.initMouseEvent(
  39 + "click", true, false, view, 0, 0, 0, 0, 0
  40 + , false, false, false, false, 0, null
  41 + );
  42 + node.dispatchEvent(event);
  43 + }
  44 + , webkit_req_fs = view.webkitRequestFileSystem
  45 + , req_fs = view.requestFileSystem || webkit_req_fs || view.mozRequestFileSystem
  46 + , throw_outside = function (ex) {
  47 + (view.setImmediate || view.setTimeout)(function () {
  48 + throw ex;
  49 + }, 0);
  50 + }
  51 + , force_saveable_type = "application/octet-stream"
  52 + , fs_min_size = 0
  53 + , deletion_queue = []
  54 + , process_deletion_queue = function () {
  55 + var i = deletion_queue.length;
  56 + while (i--) {
  57 + var file = deletion_queue[i];
  58 + if (typeof file === "string") { // file is an object URL
  59 + get_URL().revokeObjectURL(file);
  60 + } else { // file is a File
  61 + file.remove();
  62 + }
  63 + }
  64 + deletion_queue.length = 0; // clear queue
  65 + }
  66 + , dispatch = function (filesaver, event_types, event) {
  67 + event_types = [].concat(event_types);
  68 + var i = event_types.length;
  69 + while (i--) {
  70 + var listener = filesaver["on" + event_types[i]];
  71 + if (typeof listener === "function") {
  72 + try {
  73 + listener.call(filesaver, event || filesaver);
  74 + } catch (ex) {
  75 + throw_outside(ex);
  76 + }
  77 + }
  78 + }
  79 + }
  80 + , FileSaver = function (blob, name) {
  81 + // First try a.download, then web filesystem, then object URLs
  82 + var
  83 + filesaver = this
  84 + , type = blob.type
  85 + , blob_changed = false
  86 + , object_url
  87 + , target_view
  88 + , get_object_url = function () {
  89 + var object_url = get_URL().createObjectURL(blob);
  90 + deletion_queue.push(object_url);
  91 + return object_url;
  92 + }
  93 + , dispatch_all = function () {
  94 + dispatch(filesaver, "writestart progress write writeend".split(" "));
  95 + }
  96 + // on any filesys errors revert to saving with object URLs
  97 + , fs_error = function () {
  98 + // don't create more object URLs than needed
  99 + if (blob_changed || !object_url) {
  100 + object_url = get_object_url(blob);
  101 + }
  102 + if (target_view) {
  103 + target_view.location.href = object_url;
  104 + } else {
  105 + window.open(object_url, "_blank");
  106 + }
  107 + filesaver.readyState = filesaver.DONE;
  108 + dispatch_all();
  109 + }
  110 + , abortable = function (func) {
  111 + return function () {
  112 + if (filesaver.readyState !== filesaver.DONE) {
  113 + return func.apply(this, arguments);
  114 + }
  115 + };
  116 + }
  117 + , create_if_not_found = { create: true, exclusive: false }
  118 + , slice
  119 + ;
  120 + filesaver.readyState = filesaver.INIT;
  121 + if (!name) {
  122 + name = "download";
  123 + }
  124 + if (can_use_save_link) {
  125 + object_url = get_object_url(blob);
  126 + save_link.href = object_url;
  127 + save_link.download = name;
  128 + click(save_link);
  129 + filesaver.readyState = filesaver.DONE;
  130 + dispatch_all();
  131 + return;
  132 + }
  133 + // Object and web filesystem URLs have a problem saving in Google Chrome when
  134 + // viewed in a tab, so I force save with application/octet-stream
  135 + // http://code.google.com/p/chromium/issues/detail?id=91158
  136 + if (view.chrome && type && type !== force_saveable_type) {
  137 + slice = blob.slice || blob.webkitSlice;
  138 + blob = slice.call(blob, 0, blob.size, force_saveable_type);
  139 + blob_changed = true;
  140 + }
  141 + // Since I can't be sure that the guessed media type will trigger a download
  142 + // in WebKit, I append .download to the filename.
  143 + // https://bugs.webkit.org/show_bug.cgi?id=65440
  144 + if (webkit_req_fs && name !== "download") {
  145 + name += ".download";
  146 + }
  147 + if (type === force_saveable_type || webkit_req_fs) {
  148 + target_view = view;
  149 + }
  150 + if (!req_fs) {
  151 + fs_error();
  152 + return;
  153 + }
  154 + fs_min_size += blob.size;
  155 + req_fs(view.TEMPORARY, fs_min_size, abortable(function (fs) {
  156 + fs.root.getDirectory("saved", create_if_not_found, abortable(function (dir) {
  157 + var save = function () {
  158 + dir.getFile(name, create_if_not_found, abortable(function (file) {
  159 + file.createWriter(abortable(function (writer) {
  160 + writer.onwriteend = function (event) {
  161 + target_view.location.href = file.toURL();
  162 + deletion_queue.push(file);
  163 + filesaver.readyState = filesaver.DONE;
  164 + dispatch(filesaver, "writeend", event);
  165 + };
  166 + writer.onerror = function () {
  167 + var error = writer.error;
  168 + if (error.code !== error.ABORT_ERR) {
  169 + fs_error();
  170 + }
  171 + };
  172 + "writestart progress write abort".split(" ").forEach(function (event) {
  173 + writer["on" + event] = filesaver["on" + event];
  174 + });
  175 + writer.write(blob);
  176 + filesaver.abort = function () {
  177 + writer.abort();
  178 + filesaver.readyState = filesaver.DONE;
  179 + };
  180 + filesaver.readyState = filesaver.WRITING;
  181 + }), fs_error);
  182 + }), fs_error);
  183 + };
  184 + dir.getFile(name, { create: false }, abortable(function (file) {
  185 + // delete file if it already exists
  186 + file.remove();
  187 + save();
  188 + }), abortable(function (ex) {
  189 + if (ex.code === ex.NOT_FOUND_ERR) {
  190 + save();
  191 + } else {
  192 + fs_error();
  193 + }
  194 + }));
  195 + }), fs_error);
  196 + }), fs_error);
  197 + }
  198 + , FS_proto = FileSaver.prototype
  199 + , saveAs = function (blob, name) {
  200 + return new FileSaver(blob, name);
  201 + }
  202 + ;
  203 + FS_proto.abort = function () {
  204 + var filesaver = this;
  205 + filesaver.readyState = filesaver.DONE;
  206 + dispatch(filesaver, "abort");
  207 + };
  208 + FS_proto.readyState = FS_proto.INIT = 0;
  209 + FS_proto.WRITING = 1;
  210 + FS_proto.DONE = 2;
  211 +
  212 + FS_proto.error =
  213 + FS_proto.onwritestart =
  214 + FS_proto.onprogress =
  215 + FS_proto.onwrite =
  216 + FS_proto.onabort =
  217 + FS_proto.onerror =
  218 + FS_proto.onwriteend =
  219 + null;
  220 +
  221 + view.addEventListener("unload", process_deletion_queue, false);
  222 + saveAs.unload = function () {
  223 + process_deletion_queue();
  224 + view.removeEventListener("unload", process_deletion_queue, false);
  225 + };
  226 + return saveAs;
  227 + }(
  228 + typeof self !== "undefined" && self
  229 + || typeof window !== "undefined" && window
  230 + || this.content
  231 +));
  232 +// `self` is undefined in Firefox for Android content script context
  233 +// while `this` is nsIContentFrameMessageManager
  234 +// with an attribute `content` that corresponds to the window
  235 +
  236 +if (typeof module !== "undefined" && module !== null) {
  237 + module.exports = saveAs;
  238 +} else if ((typeof define !== "undefined" && define !== null) && (define.amd != null)) {
  239 + define([], function () {
  240 + return saveAs;
  241 + });
  242 +}
  243 +
  244 +String.prototype.endsWithAny = function () {
  245 + var strArray = Array.prototype.slice.call(arguments),
  246 + $this = this.toLowerCase().toString();
  247 + for (var i = 0; i < strArray.length; i++) {
  248 + if ($this.indexOf(strArray[i], $this.length - strArray[i].length) !== -1) return true;
  249 + }
  250 + return false;
  251 +};
  252 +
  253 +var saveTextAs = saveTextAs
  254 +|| (function (textContent, fileName, charset) {
  255 + fileName = fileName || 'Untitled.jpg';
  256 + //charset = charset || 'utf-8';
  257 + textContent = (textContent || '').replace(/\r?\n/g, "\r\n");
  258 + if (saveAs && Blob) {
  259 + var blob = new Blob([textContent], { type: "image/jpg;"});
  260 + saveAs(blob, fileName);
  261 + return true;
  262 + } else {//IE9-
  263 + var saveTxtWindow = window.frames.saveTxtWindow;
  264 + if (!saveTxtWindow) {
  265 + saveTxtWindow = document.createElement('iframe');
  266 + saveTxtWindow.id = 'saveTxtWindow';
  267 + saveTxtWindow.style.display = 'none';
  268 + document.body.insertBefore(saveTxtWindow, null);
  269 + saveTxtWindow = window.frames.saveTxtWindow;
  270 + if (!saveTxtWindow) {
  271 + saveTxtWindow = window.open('', '_temp', 'width=100,height=100');
  272 + if (!saveTxtWindow) {
  273 + window.alert('Sorry, download file could not be created.');
  274 + return false;
  275 + }
  276 + }
  277 + }
  278 +
  279 + var doc = saveTxtWindow.document;
  280 + doc.open('text/html', 'replace');
  281 + doc.charset = charset;
  282 + if (fileName.endsWithAny('.htm', '.html')) {
  283 + doc.close();
  284 + doc.body.innerHTML = '\r\n' + textContent + '\r\n';
  285 + } else {
  286 + if (!fileName.endsWithAny('.jpg')) fileName += '.jpg';
  287 + doc.write(textContent);
  288 + doc.close();
  289 + }
  290 +
  291 + var retValue = doc.execCommand('SaveAs', null, fileName);
  292 + saveTxtWindow.close();
  293 + return retValue;
  294 + }
  295 +})
0 296 \ No newline at end of file
... ...
400-SOURCECODE/AIAHTML5.Web/libs/html2canvas.js 0 โ†’ 100644
  View file @122a725
  1 +/*
  2 + html2canvas 0.4.1 <http://html2canvas.hertzen.com>
  3 + Copyright (c) 2013 Niklas von Hertzen
  4 +
  5 + Released under MIT License
  6 +*/
  7 +
  8 +(function(window, document, undefined){
  9 +
  10 +"use strict";
  11 +
  12 +var _html2canvas = {},
  13 +previousElement,
  14 +computedCSS,
  15 +html2canvas;
  16 +
  17 +_html2canvas.Util = {};
  18 +
  19 +_html2canvas.Util.log = function(a) {
  20 + if (_html2canvas.logging && window.console && window.console.log) {
  21 + window.console.log(a);
  22 + }
  23 +};
  24 +
  25 +_html2canvas.Util.trimText = (function(isNative){
  26 + return function(input) {
  27 + return isNative ? isNative.apply(input) : ((input || '') + '').replace( /^\s+|\s+$/g , '' );
  28 + };
  29 +})(String.prototype.trim);
  30 +
  31 +_html2canvas.Util.asFloat = function(v) {
  32 + return parseFloat(v);
  33 +};
  34 +
  35 +(function() {
  36 + // TODO: support all possible length values
  37 + var TEXT_SHADOW_PROPERTY = /((rgba|rgb)\([^\)]+\)(\s-?\d+px){0,})/g;
  38 + var TEXT_SHADOW_VALUES = /(-?\d+px)|(#.+)|(rgb\(.+\))|(rgba\(.+\))/g;
  39 + _html2canvas.Util.parseTextShadows = function (value) {
  40 + if (!value || value === 'none') {
  41 + return [];
  42 + }
  43 +
  44 + // find multiple shadow declarations
  45 + var shadows = value.match(TEXT_SHADOW_PROPERTY),
  46 + results = [];
  47 + for (var i = 0; shadows && (i < shadows.length); i++) {
  48 + var s = shadows[i].match(TEXT_SHADOW_VALUES);
  49 + results.push({
  50 + color: s[0],
  51 + offsetX: s[1] ? s[1].replace('px', '') : 0,
  52 + offsetY: s[2] ? s[2].replace('px', '') : 0,
  53 + blur: s[3] ? s[3].replace('px', '') : 0
  54 + });
  55 + }
  56 + return results;
  57 + };
  58 +})();
  59 +
  60 +
  61 +_html2canvas.Util.parseBackgroundImage = function (value) {
  62 + var whitespace = ' \r\n\t',
  63 + method, definition, prefix, prefix_i, block, results = [],
  64 + c, mode = 0, numParen = 0, quote, args;
  65 +
  66 + var appendResult = function(){
  67 + if(method) {
  68 + if(definition.substr( 0, 1 ) === '"') {
  69 + definition = definition.substr( 1, definition.length - 2 );
  70 + }
  71 + if(definition) {
  72 + args.push(definition);
  73 + }
  74 + if(method.substr( 0, 1 ) === '-' &&
  75 + (prefix_i = method.indexOf( '-', 1 ) + 1) > 0) {
  76 + prefix = method.substr( 0, prefix_i);
  77 + method = method.substr( prefix_i );
  78 + }
  79 + results.push({
  80 + prefix: prefix,
  81 + method: method.toLowerCase(),
  82 + value: block,
  83 + args: args
  84 + });
  85 + }
  86 + args = []; //for some odd reason, setting .length = 0 didn't work in safari
  87 + method =
  88 + prefix =
  89 + definition =
  90 + block = '';
  91 + };
  92 +
  93 + appendResult();
  94 + for(var i = 0, ii = value.length; i<ii; i++) {
  95 + c = value[i];
  96 + if(mode === 0 && whitespace.indexOf( c ) > -1){
  97 + continue;
  98 + }
  99 + switch(c) {
  100 + case '"':
  101 + if(!quote) {
  102 + quote = c;
  103 + }
  104 + else if(quote === c) {
  105 + quote = null;
  106 + }
  107 + break;
  108 +
  109 + case '(':
  110 + if(quote) { break; }
  111 + else if(mode === 0) {
  112 + mode = 1;
  113 + block += c;
  114 + continue;
  115 + } else {
  116 + numParen++;
  117 + }
  118 + break;
  119 +
  120 + case ')':
  121 + if(quote) { break; }
  122 + else if(mode === 1) {
  123 + if(numParen === 0) {
  124 + mode = 0;
  125 + block += c;
  126 + appendResult();
  127 + continue;
  128 + } else {
  129 + numParen--;
  130 + }
  131 + }
  132 + break;
  133 +
  134 + case ',':
  135 + if(quote) { break; }
  136 + else if(mode === 0) {
  137 + appendResult();
  138 + continue;
  139 + }
  140 + else if (mode === 1) {
  141 + if(numParen === 0 && !method.match(/^url$/i)) {
  142 + args.push(definition);
  143 + definition = '';
  144 + block += c;
  145 + continue;
  146 + }
  147 + }
  148 + break;
  149 + }
  150 +
  151 + block += c;
  152 + if(mode === 0) { method += c; }
  153 + else { definition += c; }
  154 + }
  155 + appendResult();
  156 +
  157 + return results;
  158 +};
  159 +
  160 +_html2canvas.Util.Bounds = function (element) {
  161 + var clientRect, bounds = {};
  162 +
  163 + if (element.getBoundingClientRect){
  164 + clientRect = element.getBoundingClientRect();
  165 +
  166 + // TODO add scroll position to bounds, so no scrolling of window necessary
  167 + bounds.top = clientRect.top;
  168 + bounds.bottom = clientRect.bottom || (clientRect.top + clientRect.height);
  169 + bounds.left = clientRect.left;
  170 +
  171 + bounds.width = element.offsetWidth;
  172 + bounds.height = element.offsetHeight;
  173 + }
  174 +
  175 + return bounds;
  176 +};
  177 +
  178 +// TODO ideally, we'd want everything to go through this function instead of Util.Bounds,
  179 +// but would require further work to calculate the correct positions for elements with offsetParents
  180 +_html2canvas.Util.OffsetBounds = function (element) {
  181 + var parent = element.offsetParent ? _html2canvas.Util.OffsetBounds(element.offsetParent) : {top: 0, left: 0};
  182 +
  183 + return {
  184 + top: element.offsetTop + parent.top,
  185 + bottom: element.offsetTop + element.offsetHeight + parent.top,
  186 + left: element.offsetLeft + parent.left,
  187 + width: element.offsetWidth,
  188 + height: element.offsetHeight
  189 + };
  190 +};
  191 +
  192 +function toPX(element, attribute, value ) {
  193 + var rsLeft = element.runtimeStyle && element.runtimeStyle[attribute],
  194 + left,
  195 + style = element.style;
  196 +
  197 + // Check if we are not dealing with pixels, (Opera has issues with this)
  198 + // Ported from jQuery css.js
  199 + // From the awesome hack by Dean Edwards
  200 + // http://erik.eae.net/archives/2007/07/27/18.54.15/#comment-102291
  201 +
  202 + // If we're not dealing with a regular pixel number
  203 + // but a number that has a weird ending, we need to convert it to pixels
  204 +
  205 + if ( !/^-?[0-9]+\.?[0-9]*(?:px)?$/i.test( value ) && /^-?\d/.test(value) ) {
  206 + // Remember the original values
  207 + left = style.left;
  208 +
  209 + // Put in the new values to get a computed value out
  210 + if (rsLeft) {
  211 + element.runtimeStyle.left = element.currentStyle.left;
  212 + }
  213 + style.left = attribute === "fontSize" ? "1em" : (value || 0);
  214 + value = style.pixelLeft + "px";
  215 +
  216 + // Revert the changed values
  217 + style.left = left;
  218 + if (rsLeft) {
  219 + element.runtimeStyle.left = rsLeft;
  220 + }
  221 + }
  222 +
  223 + if (!/^(thin|medium|thick)$/i.test(value)) {
  224 + return Math.round(parseFloat(value)) + "px";
  225 + }
  226 +
  227 + return value;
  228 +}
  229 +
  230 +function asInt(val) {
  231 + return parseInt(val, 10);
  232 +}
  233 +
  234 +function parseBackgroundSizePosition(value, element, attribute, index) {
  235 + value = (value || '').split(',');
  236 + value = value[index || 0] || value[0] || 'auto';
  237 + value = _html2canvas.Util.trimText(value).split(' ');
  238 +
  239 + if(attribute === 'backgroundSize' && (!value[0] || value[0].match(/cover|contain|auto/))) {
  240 + //these values will be handled in the parent function
  241 + } else {
  242 + value[0] = (value[0].indexOf( "%" ) === -1) ? toPX(element, attribute + "X", value[0]) : value[0];
  243 + if(value[1] === undefined) {
  244 + if(attribute === 'backgroundSize') {
  245 + value[1] = 'auto';
  246 + return value;
  247 + } else {
  248 + // IE 9 doesn't return double digit always
  249 + value[1] = value[0];
  250 + }
  251 + }
  252 + value[1] = (value[1].indexOf("%") === -1) ? toPX(element, attribute + "Y", value[1]) : value[1];
  253 + }
  254 + return value;
  255 +}
  256 +
  257 +_html2canvas.Util.getCSS = function (element, attribute, index) {
  258 + if (previousElement !== element) {
  259 + computedCSS = document.defaultView.getComputedStyle(element, null);
  260 + }
  261 +
  262 + var value = computedCSS[attribute];
  263 +
  264 + if (/^background(Size|Position)$/.test(attribute)) {
  265 + return parseBackgroundSizePosition(value, element, attribute, index);
  266 + } else if (/border(Top|Bottom)(Left|Right)Radius/.test(attribute)) {
  267 + var arr = value.split(" ");
  268 + if (arr.length <= 1) {
  269 + arr[1] = arr[0];
  270 + }
  271 + return arr.map(asInt);
  272 + }
  273 +
  274 + return value;
  275 +};
  276 +
  277 +_html2canvas.Util.resizeBounds = function( current_width, current_height, target_width, target_height, stretch_mode ){
  278 + var target_ratio = target_width / target_height,
  279 + current_ratio = current_width / current_height,
  280 + output_width, output_height;
  281 +
  282 + if(!stretch_mode || stretch_mode === 'auto') {
  283 + output_width = target_width;
  284 + output_height = target_height;
  285 + } else if(target_ratio < current_ratio ^ stretch_mode === 'contain') {
  286 + output_height = target_height;
  287 + output_width = target_height * current_ratio;
  288 + } else {
  289 + output_width = target_width;
  290 + output_height = target_width / current_ratio;
  291 + }
  292 +
  293 + return {
  294 + width: output_width,
  295 + height: output_height
  296 + };
  297 +};
  298 +
  299 +function backgroundBoundsFactory( prop, el, bounds, image, imageIndex, backgroundSize ) {
  300 + var bgposition = _html2canvas.Util.getCSS( el, prop, imageIndex ) ,
  301 + topPos,
  302 + left,
  303 + percentage,
  304 + val;
  305 +
  306 + if (bgposition.length === 1){
  307 + val = bgposition[0];
  308 +
  309 + bgposition = [];
  310 +
  311 + bgposition[0] = val;
  312 + bgposition[1] = val;
  313 + }
  314 +
  315 + if (bgposition[0].toString().indexOf("%") !== -1){
  316 + percentage = (parseFloat(bgposition[0])/100);
  317 + left = bounds.width * percentage;
  318 + if(prop !== 'backgroundSize') {
  319 + left -= (backgroundSize || image).width*percentage;
  320 + }
  321 + } else {
  322 + if(prop === 'backgroundSize') {
  323 + if(bgposition[0] === 'auto') {
  324 + left = image.width;
  325 + } else {
  326 + if (/contain|cover/.test(bgposition[0])) {
  327 + var resized = _html2canvas.Util.resizeBounds(image.width, image.height, bounds.width, bounds.height, bgposition[0]);
  328 + left = resized.width;
  329 + topPos = resized.height;
  330 + } else {
  331 + left = parseInt(bgposition[0], 10);
  332 + }
  333 + }
  334 + } else {
  335 + left = parseInt( bgposition[0], 10);
  336 + }
  337 + }
  338 +
  339 +
  340 + if(bgposition[1] === 'auto') {
  341 + topPos = left / image.width * image.height;
  342 + } else if (bgposition[1].toString().indexOf("%") !== -1){
  343 + percentage = (parseFloat(bgposition[1])/100);
  344 + topPos = bounds.height * percentage;
  345 + if(prop !== 'backgroundSize') {
  346 + topPos -= (backgroundSize || image).height * percentage;
  347 + }
  348 +
  349 + } else {
  350 + topPos = parseInt(bgposition[1],10);
  351 + }
  352 +
  353 + return [left, topPos];
  354 +}
  355 +
  356 +_html2canvas.Util.BackgroundPosition = function( el, bounds, image, imageIndex, backgroundSize ) {
  357 + var result = backgroundBoundsFactory( 'backgroundPosition', el, bounds, image, imageIndex, backgroundSize );
  358 + return { left: result[0], top: result[1] };
  359 +};
  360 +
  361 +_html2canvas.Util.BackgroundSize = function( el, bounds, image, imageIndex ) {
  362 + var result = backgroundBoundsFactory( 'backgroundSize', el, bounds, image, imageIndex );
  363 + return { width: result[0], height: result[1] };
  364 +};
  365 +
  366 +_html2canvas.Util.Extend = function (options, defaults) {
  367 + for (var key in options) {
  368 + if (options.hasOwnProperty(key)) {
  369 + defaults[key] = options[key];
  370 + }
  371 + }
  372 + return defaults;
  373 +};
  374 +
  375 +
  376 +/*
  377 + * Derived from jQuery.contents()
  378 + * Copyright 2010, John Resig
  379 + * Dual licensed under the MIT or GPL Version 2 licenses.
  380 + * http://jquery.org/license
  381 + */
  382 +_html2canvas.Util.Children = function( elem ) {
  383 + var children;
  384 + try {
  385 + children = (elem.nodeName && elem.nodeName.toUpperCase() === "IFRAME") ? elem.contentDocument || elem.contentWindow.document : (function(array) {
  386 + var ret = [];
  387 + if (array !== null) {
  388 + (function(first, second ) {
  389 + var i = first.length,
  390 + j = 0;
  391 +
  392 + if (typeof second.length === "number") {
  393 + for (var l = second.length; j < l; j++) {
  394 + first[i++] = second[j];
  395 + }
  396 + } else {
  397 + while (second[j] !== undefined) {
  398 + first[i++] = second[j++];
  399 + }
  400 + }
  401 +
  402 + first.length = i;
  403 +
  404 + return first;
  405 + })(ret, array);
  406 + }
  407 + return ret;
  408 + })(elem.childNodes);
  409 +
  410 + } catch (ex) {
  411 + _html2canvas.Util.log("html2canvas.Util.Children failed with exception: " + ex.message);
  412 + children = [];
  413 + }
  414 + return children;
  415 +};
  416 +
  417 +_html2canvas.Util.isTransparent = function(backgroundColor) {
  418 + return (backgroundColor === "transparent" || backgroundColor === "rgba(0, 0, 0, 0)");
  419 +};
  420 +_html2canvas.Util.Font = (function () {
  421 +
  422 + var fontData = {};
  423 +
  424 + return function(font, fontSize, doc) {
  425 + if (fontData[font + "-" + fontSize] !== undefined) {
  426 + return fontData[font + "-" + fontSize];
  427 + }
  428 +
  429 + var container = doc.createElement('div'),
  430 + img = doc.createElement('img'),
  431 + span = doc.createElement('span'),
  432 + sampleText = 'Hidden Text',
  433 + baseline,
  434 + middle,
  435 + metricsObj;
  436 +
  437 + container.style.visibility = "hidden";
  438 + container.style.fontFamily = font;
  439 + container.style.fontSize = fontSize;
  440 + container.style.margin = 0;
  441 + container.style.padding = 0;
  442 +
  443 + doc.body.appendChild(container);
  444 +
  445 + // http://probablyprogramming.com/2009/03/15/the-tiniest-gif-ever (handtinywhite.gif)
  446 + img.src = "data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACwAAAAAAQABAAACAkQBADs=";
  447 + img.width = 1;
  448 + img.height = 1;
  449 +
  450 + img.style.margin = 0;
  451 + img.style.padding = 0;
  452 + img.style.verticalAlign = "baseline";
  453 +
  454 + span.style.fontFamily = font;
  455 + span.style.fontSize = fontSize;
  456 + span.style.margin = 0;
  457 + span.style.padding = 0;
  458 +
  459 + span.appendChild(doc.createTextNode(sampleText));
  460 + container.appendChild(span);
  461 + container.appendChild(img);
  462 + baseline = (img.offsetTop - span.offsetTop) + 1;
  463 +
  464 + container.removeChild(span);
  465 + container.appendChild(doc.createTextNode(sampleText));
  466 +
  467 + container.style.lineHeight = "normal";
  468 + img.style.verticalAlign = "super";
  469 +
  470 + middle = (img.offsetTop-container.offsetTop) + 1;
  471 + metricsObj = {
  472 + baseline: baseline,
  473 + lineWidth: 1,
  474 + middle: middle
  475 + };
  476 +
  477 + fontData[font + "-" + fontSize] = metricsObj;
  478 +
  479 + doc.body.removeChild(container);
  480 +
  481 + return metricsObj;
  482 + };
  483 +})();
  484 +
  485 +(function(){
  486 + var Util = _html2canvas.Util,
  487 + Generate = {};
  488 +
  489 + _html2canvas.Generate = Generate;
  490 +
  491 + var reGradients = [
  492 + /^(-webkit-linear-gradient)\(([a-z\s]+)([\w\d\.\s,%\(\)]+)\)$/,
  493 + /^(-o-linear-gradient)\(([a-z\s]+)([\w\d\.\s,%\(\)]+)\)$/,
  494 + /^(-webkit-gradient)\((linear|radial),\s((?:\d{1,3}%?)\s(?:\d{1,3}%?),\s(?:\d{1,3}%?)\s(?:\d{1,3}%?))([\w\d\.\s,%\(\)\-]+)\)$/,
  495 + /^(-moz-linear-gradient)\(((?:\d{1,3}%?)\s(?:\d{1,3}%?))([\w\d\.\s,%\(\)]+)\)$/,
  496 + /^(-webkit-radial-gradient)\(((?:\d{1,3}%?)\s(?:\d{1,3}%?)),\s(\w+)\s([a-z\-]+)([\w\d\.\s,%\(\)]+)\)$/,
  497 + /^(-moz-radial-gradient)\(((?:\d{1,3}%?)\s(?:\d{1,3}%?)),\s(\w+)\s?([a-z\-]*)([\w\d\.\s,%\(\)]+)\)$/,
  498 + /^(-o-radial-gradient)\(((?:\d{1,3}%?)\s(?:\d{1,3}%?)),\s(\w+)\s([a-z\-]+)([\w\d\.\s,%\(\)]+)\)$/
  499 + ];
  500 +
  501 + /*
  502 + * TODO: Add IE10 vendor prefix (-ms) support
  503 + * TODO: Add W3C gradient (linear-gradient) support
  504 + * TODO: Add old Webkit -webkit-gradient(radial, ...) support
  505 + * TODO: Maybe some RegExp optimizations are possible ;o)
  506 + */
  507 + Generate.parseGradient = function(css, bounds) {
  508 + var gradient, i, len = reGradients.length, m1, stop, m2, m2Len, step, m3, tl,tr,br,bl;
  509 +
  510 + for(i = 0; i < len; i+=1){
  511 + m1 = css.match(reGradients[i]);
  512 + if(m1) {
  513 + break;
  514 + }
  515 + }
  516 +
  517 + if(m1) {
  518 + switch(m1[1]) {
  519 + case '-webkit-linear-gradient':
  520 + case '-o-linear-gradient':
  521 +
  522 + gradient = {
  523 + type: 'linear',
  524 + x0: null,
  525 + y0: null,
  526 + x1: null,
  527 + y1: null,
  528 + colorStops: []
  529 + };
  530 +
  531 + // get coordinates
  532 + m2 = m1[2].match(/\w+/g);
  533 + if(m2){
  534 + m2Len = m2.length;
  535 + for(i = 0; i < m2Len; i+=1){
  536 + switch(m2[i]) {
  537 + case 'top':
  538 + gradient.y0 = 0;
  539 + gradient.y1 = bounds.height;
  540 + break;
  541 +
  542 + case 'right':
  543 + gradient.x0 = bounds.width;
  544 + gradient.x1 = 0;
  545 + break;
  546 +
  547 + case 'bottom':
  548 + gradient.y0 = bounds.height;
  549 + gradient.y1 = 0;
  550 + break;
  551 +
  552 + case 'left':
  553 + gradient.x0 = 0;
  554 + gradient.x1 = bounds.width;
  555 + break;
  556 + }
  557 + }
  558 + }
  559 + if(gradient.x0 === null && gradient.x1 === null){ // center
  560 + gradient.x0 = gradient.x1 = bounds.width / 2;
  561 + }
  562 + if(gradient.y0 === null && gradient.y1 === null){ // center
  563 + gradient.y0 = gradient.y1 = bounds.height / 2;
  564 + }
  565 +
  566 + // get colors and stops
  567 + m2 = m1[3].match(/((?:rgb|rgba)\(\d{1,3},\s\d{1,3},\s\d{1,3}(?:,\s[0-9\.]+)?\)(?:\s\d{1,3}(?:%|px))?)+/g);
  568 + if(m2){
  569 + m2Len = m2.length;
  570 + step = 1 / Math.max(m2Len - 1, 1);
  571 + for(i = 0; i < m2Len; i+=1){
  572 + m3 = m2[i].match(/((?:rgb|rgba)\(\d{1,3},\s\d{1,3},\s\d{1,3}(?:,\s[0-9\.]+)?\))\s*(\d{1,3})?(%|px)?/);
  573 + if(m3[2]){
  574 + stop = parseFloat(m3[2]);
  575 + if(m3[3] === '%'){
  576 + stop /= 100;
  577 + } else { // px - stupid opera
  578 + stop /= bounds.width;
  579 + }
  580 + } else {
  581 + stop = i * step;
  582 + }
  583 + gradient.colorStops.push({
  584 + color: m3[1],
  585 + stop: stop
  586 + });
  587 + }
  588 + }
  589 + break;
  590 +
  591 + case '-webkit-gradient':
  592 +
  593 + gradient = {
  594 + type: m1[2] === 'radial' ? 'circle' : m1[2], // TODO: Add radial gradient support for older mozilla definitions
  595 + x0: 0,
  596 + y0: 0,
  597 + x1: 0,
  598 + y1: 0,
  599 + colorStops: []
  600 + };
  601 +
  602 + // get coordinates
  603 + m2 = m1[3].match(/(\d{1,3})%?\s(\d{1,3})%?,\s(\d{1,3})%?\s(\d{1,3})%?/);
  604 + if(m2){
  605 + gradient.x0 = (m2[1] * bounds.width) / 100;
  606 + gradient.y0 = (m2[2] * bounds.height) / 100;
  607 + gradient.x1 = (m2[3] * bounds.width) / 100;
  608 + gradient.y1 = (m2[4] * bounds.height) / 100;
  609 + }
  610 +
  611 + // get colors and stops
  612 + m2 = m1[4].match(/((?:from|to|color-stop)\((?:[0-9\.]+,\s)?(?:rgb|rgba)\(\d{1,3},\s\d{1,3},\s\d{1,3}(?:,\s[0-9\.]+)?\)\))+/g);
  613 + if(m2){
  614 + m2Len = m2.length;
  615 + for(i = 0; i < m2Len; i+=1){
  616 + m3 = m2[i].match(/(from|to|color-stop)\(([0-9\.]+)?(?:,\s)?((?:rgb|rgba)\(\d{1,3},\s\d{1,3},\s\d{1,3}(?:,\s[0-9\.]+)?\))\)/);
  617 + stop = parseFloat(m3[2]);
  618 + if(m3[1] === 'from') {
  619 + stop = 0.0;
  620 + }
  621 + if(m3[1] === 'to') {
  622 + stop = 1.0;
  623 + }
  624 + gradient.colorStops.push({
  625 + color: m3[3],
  626 + stop: stop
  627 + });
  628 + }
  629 + }
  630 + break;
  631 +
  632 + case '-moz-linear-gradient':
  633 +
  634 + gradient = {
  635 + type: 'linear',
  636 + x0: 0,
  637 + y0: 0,
  638 + x1: 0,
  639 + y1: 0,
  640 + colorStops: []
  641 + };
  642 +
  643 + // get coordinates
  644 + m2 = m1[2].match(/(\d{1,3})%?\s(\d{1,3})%?/);
  645 +
  646 + // m2[1] == 0% -> left
  647 + // m2[1] == 50% -> center
  648 + // m2[1] == 100% -> right
  649 +
  650 + // m2[2] == 0% -> top
  651 + // m2[2] == 50% -> center
  652 + // m2[2] == 100% -> bottom
  653 +
  654 + if(m2){
  655 + gradient.x0 = (m2[1] * bounds.width) / 100;
  656 + gradient.y0 = (m2[2] * bounds.height) / 100;
  657 + gradient.x1 = bounds.width - gradient.x0;
  658 + gradient.y1 = bounds.height - gradient.y0;
  659 + }
  660 +
  661 + // get colors and stops
  662 + m2 = m1[3].match(/((?:rgb|rgba)\(\d{1,3},\s\d{1,3},\s\d{1,3}(?:,\s[0-9\.]+)?\)(?:\s\d{1,3}%)?)+/g);
  663 + if(m2){
  664 + m2Len = m2.length;
  665 + step = 1 / Math.max(m2Len - 1, 1);
  666 + for(i = 0; i < m2Len; i+=1){
  667 + m3 = m2[i].match(/((?:rgb|rgba)\(\d{1,3},\s\d{1,3},\s\d{1,3}(?:,\s[0-9\.]+)?\))\s*(\d{1,3})?(%)?/);
  668 + if(m3[2]){
  669 + stop = parseFloat(m3[2]);
  670 + if(m3[3]){ // percentage
  671 + stop /= 100;
  672 + }
  673 + } else {
  674 + stop = i * step;
  675 + }
  676 + gradient.colorStops.push({
  677 + color: m3[1],
  678 + stop: stop
  679 + });
  680 + }
  681 + }
  682 + break;
  683 +
  684 + case '-webkit-radial-gradient':
  685 + case '-moz-radial-gradient':
  686 + case '-o-radial-gradient':
  687 +
  688 + gradient = {
  689 + type: 'circle',
  690 + x0: 0,
  691 + y0: 0,
  692 + x1: bounds.width,
  693 + y1: bounds.height,
  694 + cx: 0,
  695 + cy: 0,
  696 + rx: 0,
  697 + ry: 0,
  698 + colorStops: []
  699 + };
  700 +
  701 + // center
  702 + m2 = m1[2].match(/(\d{1,3})%?\s(\d{1,3})%?/);
  703 + if(m2){
  704 + gradient.cx = (m2[1] * bounds.width) / 100;
  705 + gradient.cy = (m2[2] * bounds.height) / 100;
  706 + }
  707 +
  708 + // size
  709 + m2 = m1[3].match(/\w+/);
  710 + m3 = m1[4].match(/[a-z\-]*/);
  711 + if(m2 && m3){
  712 + switch(m3[0]){
  713 + case 'farthest-corner':
  714 + case 'cover': // is equivalent to farthest-corner
  715 + case '': // mozilla removes "cover" from definition :(
  716 + tl = Math.sqrt(Math.pow(gradient.cx, 2) + Math.pow(gradient.cy, 2));
  717 + tr = Math.sqrt(Math.pow(gradient.cx, 2) + Math.pow(gradient.y1 - gradient.cy, 2));
  718 + br = Math.sqrt(Math.pow(gradient.x1 - gradient.cx, 2) + Math.pow(gradient.y1 - gradient.cy, 2));
  719 + bl = Math.sqrt(Math.pow(gradient.x1 - gradient.cx, 2) + Math.pow(gradient.cy, 2));
  720 + gradient.rx = gradient.ry = Math.max(tl, tr, br, bl);
  721 + break;
  722 + case 'closest-corner':
  723 + tl = Math.sqrt(Math.pow(gradient.cx, 2) + Math.pow(gradient.cy, 2));
  724 + tr = Math.sqrt(Math.pow(gradient.cx, 2) + Math.pow(gradient.y1 - gradient.cy, 2));
  725 + br = Math.sqrt(Math.pow(gradient.x1 - gradient.cx, 2) + Math.pow(gradient.y1 - gradient.cy, 2));
  726 + bl = Math.sqrt(Math.pow(gradient.x1 - gradient.cx, 2) + Math.pow(gradient.cy, 2));
  727 + gradient.rx = gradient.ry = Math.min(tl, tr, br, bl);
  728 + break;
  729 + case 'farthest-side':
  730 + if(m2[0] === 'circle'){
  731 + gradient.rx = gradient.ry = Math.max(
  732 + gradient.cx,
  733 + gradient.cy,
  734 + gradient.x1 - gradient.cx,
  735 + gradient.y1 - gradient.cy
  736 + );
  737 + } else { // ellipse
  738 +
  739 + gradient.type = m2[0];
  740 +
  741 + gradient.rx = Math.max(
  742 + gradient.cx,
  743 + gradient.x1 - gradient.cx
  744 + );
  745 + gradient.ry = Math.max(
  746 + gradient.cy,
  747 + gradient.y1 - gradient.cy
  748 + );
  749 + }
  750 + break;
  751 + case 'closest-side':
  752 + case 'contain': // is equivalent to closest-side
  753 + if(m2[0] === 'circle'){
  754 + gradient.rx = gradient.ry = Math.min(
  755 + gradient.cx,
  756 + gradient.cy,
  757 + gradient.x1 - gradient.cx,
  758 + gradient.y1 - gradient.cy
  759 + );
  760 + } else { // ellipse
  761 +
  762 + gradient.type = m2[0];
  763 +
  764 + gradient.rx = Math.min(
  765 + gradient.cx,
  766 + gradient.x1 - gradient.cx
  767 + );
  768 + gradient.ry = Math.min(
  769 + gradient.cy,
  770 + gradient.y1 - gradient.cy
  771 + );
  772 + }
  773 + break;
  774 +
  775 + // TODO: add support for "30px 40px" sizes (webkit only)
  776 + }
  777 + }
  778 +
  779 + // color stops
  780 + m2 = m1[5].match(/((?:rgb|rgba)\(\d{1,3},\s\d{1,3},\s\d{1,3}(?:,\s[0-9\.]+)?\)(?:\s\d{1,3}(?:%|px))?)+/g);
  781 + if(m2){
  782 + m2Len = m2.length;
  783 + step = 1 / Math.max(m2Len - 1, 1);
  784 + for(i = 0; i < m2Len; i+=1){
  785 + m3 = m2[i].match(/((?:rgb|rgba)\(\d{1,3},\s\d{1,3},\s\d{1,3}(?:,\s[0-9\.]+)?\))\s*(\d{1,3})?(%|px)?/);
  786 + if(m3[2]){
  787 + stop = parseFloat(m3[2]);
  788 + if(m3[3] === '%'){
  789 + stop /= 100;
  790 + } else { // px - stupid opera
  791 + stop /= bounds.width;
  792 + }
  793 + } else {
  794 + stop = i * step;
  795 + }
  796 + gradient.colorStops.push({
  797 + color: m3[1],
  798 + stop: stop
  799 + });
  800 + }
  801 + }
  802 + break;
  803 + }
  804 + }
  805 +
  806 + return gradient;
  807 + };
  808 +
  809 + function addScrollStops(grad) {
  810 + return function(colorStop) {
  811 + try {
  812 + grad.addColorStop(colorStop.stop, colorStop.color);
  813 + }
  814 + catch(e) {
  815 + Util.log(['failed to add color stop: ', e, '; tried to add: ', colorStop]);
  816 + }
  817 + };
  818 + }
  819 +
  820 + Generate.Gradient = function(src, bounds) {
  821 + if(bounds.width === 0 || bounds.height === 0) {
  822 + return;
  823 + }
  824 +
  825 + var canvas = document.createElement('canvas'),
  826 + ctx = canvas.getContext('2d'),
  827 + gradient, grad;
  828 +
  829 + canvas.width = bounds.width;
  830 + canvas.height = bounds.height;
  831 +
  832 + // TODO: add support for multi defined background gradients
  833 + gradient = _html2canvas.Generate.parseGradient(src, bounds);
  834 +
  835 + if(gradient) {
  836 + switch(gradient.type) {
  837 + case 'linear':
  838 + grad = ctx.createLinearGradient(gradient.x0, gradient.y0, gradient.x1, gradient.y1);
  839 + gradient.colorStops.forEach(addScrollStops(grad));
  840 + ctx.fillStyle = grad;
  841 + ctx.fillRect(0, 0, bounds.width, bounds.height);
  842 + break;
  843 +
  844 + case 'circle':
  845 + grad = ctx.createRadialGradient(gradient.cx, gradient.cy, 0, gradient.cx, gradient.cy, gradient.rx);
  846 + gradient.colorStops.forEach(addScrollStops(grad));
  847 + ctx.fillStyle = grad;
  848 + ctx.fillRect(0, 0, bounds.width, bounds.height);
  849 + break;
  850 +
  851 + case 'ellipse':
  852 + var canvasRadial = document.createElement('canvas'),
  853 + ctxRadial = canvasRadial.getContext('2d'),
  854 + ri = Math.max(gradient.rx, gradient.ry),
  855 + di = ri * 2;
  856 +
  857 + canvasRadial.width = canvasRadial.height = di;
  858 +
  859 + grad = ctxRadial.createRadialGradient(gradient.rx, gradient.ry, 0, gradient.rx, gradient.ry, ri);
  860 + gradient.colorStops.forEach(addScrollStops(grad));
  861 +
  862 + ctxRadial.fillStyle = grad;
  863 + ctxRadial.fillRect(0, 0, di, di);
  864 +
  865 + ctx.fillStyle = gradient.colorStops[gradient.colorStops.length - 1].color;
  866 + ctx.fillRect(0, 0, canvas.width, canvas.height);
  867 + ctx.drawImage(canvasRadial, gradient.cx - gradient.rx, gradient.cy - gradient.ry, 2 * gradient.rx, 2 * gradient.ry);
  868 + break;
  869 + }
  870 + }
  871 +
  872 + return canvas;
  873 + };
  874 +
  875 + Generate.ListAlpha = function(number) {
  876 + var tmp = "",
  877 + modulus;
  878 +
  879 + do {
  880 + modulus = number % 26;
  881 + tmp = String.fromCharCode((modulus) + 64) + tmp;
  882 + number = number / 26;
  883 + }while((number*26) > 26);
  884 +
  885 + return tmp;
  886 + };
  887 +
  888 + Generate.ListRoman = function(number) {
  889 + var romanArray = ["M", "CM", "D", "CD", "C", "XC", "L", "XL", "X", "IX", "V", "IV", "I"],
  890 + decimal = [1000, 900, 500, 400, 100, 90, 50, 40, 10, 9, 5, 4, 1],
  891 + roman = "",
  892 + v,
  893 + len = romanArray.length;
  894 +
  895 + if (number <= 0 || number >= 4000) {
  896 + return number;
  897 + }
  898 +
  899 + for (v=0; v < len; v+=1) {
  900 + while (number >= decimal[v]) {
  901 + number -= decimal[v];
  902 + roman += romanArray[v];
  903 + }
  904 + }
  905 +
  906 + return roman;
  907 + };
  908 +})();
  909 +function h2cRenderContext(width, height) {
  910 + var storage = [];
  911 + return {
  912 + storage: storage,
  913 + width: width,
  914 + height: height,
  915 + clip: function() {
  916 + storage.push({
  917 + type: "function",
  918 + name: "clip",
  919 + 'arguments': arguments
  920 + });
  921 + },
  922 + translate: function() {
  923 + storage.push({
  924 + type: "function",
  925 + name: "translate",
  926 + 'arguments': arguments
  927 + });
  928 + },
  929 + fill: function() {
  930 + storage.push({
  931 + type: "function",
  932 + name: "fill",
  933 + 'arguments': arguments
  934 + });
  935 + },
  936 + save: function() {
  937 + storage.push({
  938 + type: "function",
  939 + name: "save",
  940 + 'arguments': arguments
  941 + });
  942 + },
  943 + restore: function() {
  944 + storage.push({
  945 + type: "function",
  946 + name: "restore",
  947 + 'arguments': arguments
  948 + });
  949 + },
  950 + fillRect: function () {
  951 + storage.push({
  952 + type: "function",
  953 + name: "fillRect",
  954 + 'arguments': arguments
  955 + });
  956 + },
  957 + createPattern: function() {
  958 + storage.push({
  959 + type: "function",
  960 + name: "createPattern",
  961 + 'arguments': arguments
  962 + });
  963 + },
  964 + drawShape: function() {
  965 +
  966 + var shape = [];
  967 +
  968 + storage.push({
  969 + type: "function",
  970 + name: "drawShape",
  971 + 'arguments': shape
  972 + });
  973 +
  974 + return {
  975 + moveTo: function() {
  976 + shape.push({
  977 + name: "moveTo",
  978 + 'arguments': arguments
  979 + });
  980 + },
  981 + lineTo: function() {
  982 + shape.push({
  983 + name: "lineTo",
  984 + 'arguments': arguments
  985 + });
  986 + },
  987 + arcTo: function() {
  988 + shape.push({
  989 + name: "arcTo",
  990 + 'arguments': arguments
  991 + });
  992 + },
  993 + bezierCurveTo: function() {
  994 + shape.push({
  995 + name: "bezierCurveTo",
  996 + 'arguments': arguments
  997 + });
  998 + },
  999 + quadraticCurveTo: function() {
  1000 + shape.push({
  1001 + name: "quadraticCurveTo",
  1002 + 'arguments': arguments
  1003 + });
  1004 + }
  1005 + };
  1006 +
  1007 + },
  1008 + drawImage: function () {
  1009 + storage.push({
  1010 + type: "function",
  1011 + name: "drawImage",
  1012 + 'arguments': arguments
  1013 + });
  1014 + },
  1015 + fillText: function () {
  1016 + storage.push({
  1017 + type: "function",
  1018 + name: "fillText",
  1019 + 'arguments': arguments
  1020 + });
  1021 + },
  1022 + setVariable: function (variable, value) {
  1023 + storage.push({
  1024 + type: "variable",
  1025 + name: variable,
  1026 + 'arguments': value
  1027 + });
  1028 + return value;
  1029 + }
  1030 + };
  1031 +}
  1032 +_html2canvas.Parse = function (images, options) {
  1033 + window.scroll(0,0);
  1034 +
  1035 + var element = (( options.elements === undefined ) ? document.body : options.elements[0]), // select body by default
  1036 + numDraws = 0,
  1037 + doc = element.ownerDocument,
  1038 + Util = _html2canvas.Util,
  1039 + support = Util.Support(options, doc),
  1040 + ignoreElementsRegExp = new RegExp("(" + options.ignoreElements + ")"),
  1041 + body = doc.body,
  1042 + getCSS = Util.getCSS,
  1043 + pseudoHide = "___html2canvas___pseudoelement",
  1044 + hidePseudoElements = doc.createElement('style');
  1045 +
  1046 + hidePseudoElements.innerHTML = '.' + pseudoHide + '-before:before { content: "" !important; display: none !important; }' +
  1047 + '.' + pseudoHide + '-after:after { content: "" !important; display: none !important; }';
  1048 +
  1049 + body.appendChild(hidePseudoElements);
  1050 +
  1051 + images = images || {};
  1052 +
  1053 + function documentWidth () {
  1054 + return Math.max(
  1055 + Math.max(doc.body.scrollWidth, doc.documentElement.scrollWidth),
  1056 + Math.max(doc.body.offsetWidth, doc.documentElement.offsetWidth),
  1057 + Math.max(doc.body.clientWidth, doc.documentElement.clientWidth)
  1058 + );
  1059 + }
  1060 +
  1061 + function documentHeight () {
  1062 + return Math.max(
  1063 + Math.max(doc.body.scrollHeight, doc.documentElement.scrollHeight),
  1064 + Math.max(doc.body.offsetHeight, doc.documentElement.offsetHeight),
  1065 + Math.max(doc.body.clientHeight, doc.documentElement.clientHeight)
  1066 + );
  1067 + }
  1068 +
  1069 + function getCSSInt(element, attribute) {
  1070 + var val = parseInt(getCSS(element, attribute), 10);
  1071 + return (isNaN(val)) ? 0 : val; // borders in old IE are throwing 'medium' for demo.html
  1072 + }
  1073 +
  1074 + function renderRect (ctx, x, y, w, h, bgcolor) {
  1075 + if (bgcolor !== "transparent"){
  1076 + ctx.setVariable("fillStyle", bgcolor);
  1077 + ctx.fillRect(x, y, w, h);
  1078 + numDraws+=1;
  1079 + }
  1080 + }
  1081 +
  1082 + function capitalize(m, p1, p2) {
  1083 + if (m.length > 0) {
  1084 + return p1 + p2.toUpperCase();
  1085 + }
  1086 + }
  1087 +
  1088 + function textTransform (text, transform) {
  1089 + switch(transform){
  1090 + case "lowercase":
  1091 + return text.toLowerCase();
  1092 + case "capitalize":
  1093 + return text.replace( /(^|\s|:|-|\(|\))([a-z])/g, capitalize);
  1094 + case "uppercase":
  1095 + return text.toUpperCase();
  1096 + default:
  1097 + return text;
  1098 + }
  1099 + }
  1100 +
  1101 + function noLetterSpacing(letter_spacing) {
  1102 + return (/^(normal|none|0px)$/.test(letter_spacing));
  1103 + }
  1104 +
  1105 + function drawText(currentText, x, y, ctx){
  1106 + if (currentText !== null && Util.trimText(currentText).length > 0) {
  1107 + ctx.fillText(currentText, x, y);
  1108 + numDraws+=1;
  1109 + }
  1110 + }
  1111 +
  1112 + function setTextVariables(ctx, el, text_decoration, color) {
  1113 + var align = false,
  1114 + bold = getCSS(el, "fontWeight"),
  1115 + family = getCSS(el, "fontFamily"),
  1116 + size = getCSS(el, "fontSize"),
  1117 + shadows = Util.parseTextShadows(getCSS(el, "textShadow"));
  1118 +
  1119 + switch(parseInt(bold, 10)){
  1120 + case 401:
  1121 + bold = "bold";
  1122 + break;
  1123 + case 400:
  1124 + bold = "normal";
  1125 + break;
  1126 + }
  1127 +
  1128 + ctx.setVariable("fillStyle", color);
  1129 + ctx.setVariable("font", [getCSS(el, "fontStyle"), getCSS(el, "fontVariant"), bold, size, family].join(" "));
  1130 + ctx.setVariable("textAlign", (align) ? "right" : "left");
  1131 +
  1132 + if (shadows.length) {
  1133 + // TODO: support multiple text shadows
  1134 + // apply the first text shadow
  1135 + ctx.setVariable("shadowColor", shadows[0].color);
  1136 + ctx.setVariable("shadowOffsetX", shadows[0].offsetX);
  1137 + ctx.setVariable("shadowOffsetY", shadows[0].offsetY);
  1138 + ctx.setVariable("shadowBlur", shadows[0].blur);
  1139 + }
  1140 +
  1141 + if (text_decoration !== "none"){
  1142 + return Util.Font(family, size, doc);
  1143 + }
  1144 + }
  1145 +
  1146 + function renderTextDecoration(ctx, text_decoration, bounds, metrics, color) {
  1147 + switch(text_decoration) {
  1148 + case "underline":
  1149 + // Draws a line at the baseline of the font
  1150 + // TODO As some browsers display the line as more than 1px if the font-size is big, need to take that into account both in position and size
  1151 + renderRect(ctx, bounds.left, Math.round(bounds.top + metrics.baseline + metrics.lineWidth), bounds.width, 1, color);
  1152 + break;
  1153 + case "overline":
  1154 + renderRect(ctx, bounds.left, Math.round(bounds.top), bounds.width, 1, color);
  1155 + break;
  1156 + case "line-through":
  1157 + // TODO try and find exact position for line-through
  1158 + renderRect(ctx, bounds.left, Math.ceil(bounds.top + metrics.middle + metrics.lineWidth), bounds.width, 1, color);
  1159 + break;
  1160 + }
  1161 + }
  1162 +
  1163 + function getTextBounds(state, text, textDecoration, isLast, transform) {
  1164 + var bounds;
  1165 + if (support.rangeBounds && !transform) {
  1166 + if (textDecoration !== "none" || Util.trimText(text).length !== 0) {
  1167 + bounds = textRangeBounds(text, state.node, state.textOffset);
  1168 + }
  1169 + state.textOffset += text.length;
  1170 + } else if (state.node && typeof state.node.nodeValue === "string" ){
  1171 + var newTextNode = (isLast) ? state.node.splitText(text.length) : null;
  1172 + bounds = textWrapperBounds(state.node, transform);
  1173 + state.node = newTextNode;
  1174 + }
  1175 + return bounds;
  1176 + }
  1177 +
  1178 + function textRangeBounds(text, textNode, textOffset) {
  1179 + var range = doc.createRange();
  1180 + range.setStart(textNode, textOffset);
  1181 + range.setEnd(textNode, textOffset + text.length);
  1182 + return range.getBoundingClientRect();
  1183 + }
  1184 +
  1185 + function textWrapperBounds(oldTextNode, transform) {
  1186 + var parent = oldTextNode.parentNode,
  1187 + wrapElement = doc.createElement('wrapper'),
  1188 + backupText = oldTextNode.cloneNode(true);
  1189 +
  1190 + wrapElement.appendChild(oldTextNode.cloneNode(true));
  1191 + parent.replaceChild(wrapElement, oldTextNode);
  1192 +
  1193 + var bounds = transform ? Util.OffsetBounds(wrapElement) : Util.Bounds(wrapElement);
  1194 + parent.replaceChild(backupText, wrapElement);
  1195 + return bounds;
  1196 + }
  1197 +
  1198 + function renderText(el, textNode, stack) {
  1199 + var ctx = stack.ctx,
  1200 + color = getCSS(el, "color"),
  1201 + textDecoration = getCSS(el, "textDecoration"),
  1202 + textAlign = getCSS(el, "textAlign"),
  1203 + metrics,
  1204 + textList,
  1205 + state = {
  1206 + node: textNode,
  1207 + textOffset: 0
  1208 + };
  1209 +
  1210 + if (Util.trimText(textNode.nodeValue).length > 0) {
  1211 + textNode.nodeValue = textTransform(textNode.nodeValue, getCSS(el, "textTransform"));
  1212 + textAlign = textAlign.replace(["-webkit-auto"],["auto"]);
  1213 +
  1214 + textList = (!options.letterRendering && /^(left|right|justify|auto)$/.test(textAlign) && noLetterSpacing(getCSS(el, "letterSpacing"))) ?
  1215 + textNode.nodeValue.split(/(\b| )/)
  1216 + : textNode.nodeValue.split("");
  1217 +
  1218 + metrics = setTextVariables(ctx, el, textDecoration, color);
  1219 +
  1220 + if (options.chinese) {
  1221 + textList.forEach(function(word, index) {
  1222 + if (/.*[\u4E00-\u9FA5].*$/.test(word)) {
  1223 + word = word.split("");
  1224 + word.unshift(index, 1);
  1225 + textList.splice.apply(textList, word);
  1226 + }
  1227 + });
  1228 + }
  1229 +
  1230 + textList.forEach(function(text, index) {
  1231 + var bounds = getTextBounds(state, text, textDecoration, (index < textList.length - 1), stack.transform.matrix);
  1232 + if (bounds) {
  1233 + drawText(text, bounds.left, bounds.bottom, ctx);
  1234 + renderTextDecoration(ctx, textDecoration, bounds, metrics, color);
  1235 + }
  1236 + });
  1237 + }
  1238 + }
  1239 +
  1240 + function listPosition (element, val) {
  1241 + var boundElement = doc.createElement( "boundelement" ),
  1242 + originalType,
  1243 + bounds;
  1244 +
  1245 + boundElement.style.display = "inline";
  1246 +
  1247 + originalType = element.style.listStyleType;
  1248 + element.style.listStyleType = "none";
  1249 +
  1250 + boundElement.appendChild(doc.createTextNode(val));
  1251 +
  1252 + element.insertBefore(boundElement, element.firstChild);
  1253 +
  1254 + bounds = Util.Bounds(boundElement);
  1255 + element.removeChild(boundElement);
  1256 + element.style.listStyleType = originalType;
  1257 + return bounds;
  1258 + }
  1259 +
  1260 + function elementIndex(el) {
  1261 + var i = -1,
  1262 + count = 1,
  1263 + childs = el.parentNode.childNodes;
  1264 +
  1265 + if (el.parentNode) {
  1266 + while(childs[++i] !== el) {
  1267 + if (childs[i].nodeType === 1) {
  1268 + count++;
  1269 + }
  1270 + }
  1271 + return count;
  1272 + } else {
  1273 + return -1;
  1274 + }
  1275 + }
  1276 +
  1277 + function listItemText(element, type) {
  1278 + var currentIndex = elementIndex(element), text;
  1279 + switch(type){
  1280 + case "decimal":
  1281 + text = currentIndex;
  1282 + break;
  1283 + case "decimal-leading-zero":
  1284 + text = (currentIndex.toString().length === 1) ? currentIndex = "0" + currentIndex.toString() : currentIndex.toString();
  1285 + break;
  1286 + case "upper-roman":
  1287 + text = _html2canvas.Generate.ListRoman( currentIndex );
  1288 + break;
  1289 + case "lower-roman":
  1290 + text = _html2canvas.Generate.ListRoman( currentIndex ).toLowerCase();
  1291 + break;
  1292 + case "lower-alpha":
  1293 + text = _html2canvas.Generate.ListAlpha( currentIndex ).toLowerCase();
  1294 + break;
  1295 + case "upper-alpha":
  1296 + text = _html2canvas.Generate.ListAlpha( currentIndex );
  1297 + break;
  1298 + }
  1299 +
  1300 + return text + ". ";
  1301 + }
  1302 +
  1303 + function renderListItem(element, stack, elBounds) {
  1304 + var x,
  1305 + text,
  1306 + ctx = stack.ctx,
  1307 + type = getCSS(element, "listStyleType"),
  1308 + listBounds;
  1309 +
  1310 + if (/^(decimal|decimal-leading-zero|upper-alpha|upper-latin|upper-roman|lower-alpha|lower-greek|lower-latin|lower-roman)$/i.test(type)) {
  1311 + text = listItemText(element, type);
  1312 + listBounds = listPosition(element, text);
  1313 + setTextVariables(ctx, element, "none", getCSS(element, "color"));
  1314 +
  1315 + if (getCSS(element, "listStylePosition") === "inside") {
  1316 + ctx.setVariable("textAlign", "left");
  1317 + x = elBounds.left;
  1318 + } else {
  1319 + return;
  1320 + }
  1321 +
  1322 + drawText(text, x, listBounds.bottom, ctx);
  1323 + }
  1324 + }
  1325 +
  1326 + function loadImage (src){
  1327 + var img = images[src];
  1328 + return (img && img.succeeded === true) ? img.img : false;
  1329 + }
  1330 +
  1331 + function clipBounds(src, dst){
  1332 + var x = Math.max(src.left, dst.left),
  1333 + y = Math.max(src.top, dst.top),
  1334 + x2 = Math.min((src.left + src.width), (dst.left + dst.width)),
  1335 + y2 = Math.min((src.top + src.height), (dst.top + dst.height));
  1336 +
  1337 + return {
  1338 + left:x,
  1339 + top:y,
  1340 + width:x2-x,
  1341 + height:y2-y
  1342 + };
  1343 + }
  1344 +
  1345 + function setZ(element, stack, parentStack){
  1346 + var newContext,
  1347 + isPositioned = stack.cssPosition !== 'static',
  1348 + zIndex = isPositioned ? getCSS(element, 'zIndex') : 'auto',
  1349 + opacity = getCSS(element, 'opacity'),
  1350 + isFloated = getCSS(element, 'cssFloat') !== 'none';
  1351 +
  1352 + // https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context
  1353 + // When a new stacking context should be created:
  1354 + // the root element (HTML),
  1355 + // positioned (absolutely or relatively) with a z-index value other than "auto",
  1356 + // elements with an opacity value less than 1. (See the specification for opacity),
  1357 + // on mobile WebKit and Chrome 22+, position: fixed always creates a new stacking context, even when z-index is "auto" (See this post)
  1358 +
  1359 + stack.zIndex = newContext = h2czContext(zIndex);
  1360 + newContext.isPositioned = isPositioned;
  1361 + newContext.isFloated = isFloated;
  1362 + newContext.opacity = opacity;
  1363 + newContext.ownStacking = (zIndex !== 'auto' || opacity < 1);
  1364 +
  1365 + if (parentStack) {
  1366 + parentStack.zIndex.children.push(stack);
  1367 + }
  1368 + }
  1369 +
  1370 + function renderImage(ctx, element, image, bounds, borders) {
  1371 +
  1372 + var paddingLeft = getCSSInt(element, 'paddingLeft'),
  1373 + paddingTop = getCSSInt(element, 'paddingTop'),
  1374 + paddingRight = getCSSInt(element, 'paddingRight'),
  1375 + paddingBottom = getCSSInt(element, 'paddingBottom');
  1376 +
  1377 + drawImage(
  1378 + ctx,
  1379 + image,
  1380 + 0, //sx
  1381 + 0, //sy
  1382 + image.width, //sw
  1383 + image.height, //sh
  1384 + bounds.left + paddingLeft + borders[3].width, //dx
  1385 + bounds.top + paddingTop + borders[0].width, // dy
  1386 + bounds.width - (borders[1].width + borders[3].width + paddingLeft + paddingRight), //dw
  1387 + bounds.height - (borders[0].width + borders[2].width + paddingTop + paddingBottom) //dh
  1388 + );
  1389 + }
  1390 +
  1391 + function getBorderData(element) {
  1392 + return ["Top", "Right", "Bottom", "Left"].map(function(side) {
  1393 + return {
  1394 + width: getCSSInt(element, 'border' + side + 'Width'),
  1395 + color: getCSS(element, 'border' + side + 'Color')
  1396 + };
  1397 + });
  1398 + }
  1399 +
  1400 + function getBorderRadiusData(element) {
  1401 + return ["TopLeft", "TopRight", "BottomRight", "BottomLeft"].map(function(side) {
  1402 + return getCSS(element, 'border' + side + 'Radius');
  1403 + });
  1404 + }
  1405 +
  1406 + var getCurvePoints = (function(kappa) {
  1407 +
  1408 + return function(x, y, r1, r2) {
  1409 + var ox = (r1) * kappa, // control point offset horizontal
  1410 + oy = (r2) * kappa, // control point offset vertical
  1411 + xm = x + r1, // x-middle
  1412 + ym = y + r2; // y-middle
  1413 + return {
  1414 + topLeft: bezierCurve({
  1415 + x:x,
  1416 + y:ym
  1417 + }, {
  1418 + x:x,
  1419 + y:ym - oy
  1420 + }, {
  1421 + x:xm - ox,
  1422 + y:y
  1423 + }, {
  1424 + x:xm,
  1425 + y:y
  1426 + }),
  1427 + topRight: bezierCurve({
  1428 + x:x,
  1429 + y:y
  1430 + }, {
  1431 + x:x + ox,
  1432 + y:y
  1433 + }, {
  1434 + x:xm,
  1435 + y:ym - oy
  1436 + }, {
  1437 + x:xm,
  1438 + y:ym
  1439 + }),
  1440 + bottomRight: bezierCurve({
  1441 + x:xm,
  1442 + y:y
  1443 + }, {
  1444 + x:xm,
  1445 + y:y + oy
  1446 + }, {
  1447 + x:x + ox,
  1448 + y:ym
  1449 + }, {
  1450 + x:x,
  1451 + y:ym
  1452 + }),
  1453 + bottomLeft: bezierCurve({
  1454 + x:xm,
  1455 + y:ym
  1456 + }, {
  1457 + x:xm - ox,
  1458 + y:ym
  1459 + }, {
  1460 + x:x,
  1461 + y:y + oy
  1462 + }, {
  1463 + x:x,
  1464 + y:y
  1465 + })
  1466 + };
  1467 + };
  1468 + })(4 * ((Math.sqrt(2) - 1) / 3));
  1469 +
  1470 + function bezierCurve(start, startControl, endControl, end) {
  1471 +
  1472 + var lerp = function (a, b, t) {
  1473 + return {
  1474 + x:a.x + (b.x - a.x) * t,
  1475 + y:a.y + (b.y - a.y) * t
  1476 + };
  1477 + };
  1478 +
  1479 + return {
  1480 + start: start,
  1481 + startControl: startControl,
  1482 + endControl: endControl,
  1483 + end: end,
  1484 + subdivide: function(t) {
  1485 + var ab = lerp(start, startControl, t),
  1486 + bc = lerp(startControl, endControl, t),
  1487 + cd = lerp(endControl, end, t),
  1488 + abbc = lerp(ab, bc, t),
  1489 + bccd = lerp(bc, cd, t),
  1490 + dest = lerp(abbc, bccd, t);
  1491 + return [bezierCurve(start, ab, abbc, dest), bezierCurve(dest, bccd, cd, end)];
  1492 + },
  1493 + curveTo: function(borderArgs) {
  1494 + borderArgs.push(["bezierCurve", startControl.x, startControl.y, endControl.x, endControl.y, end.x, end.y]);
  1495 + },
  1496 + curveToReversed: function(borderArgs) {
  1497 + borderArgs.push(["bezierCurve", endControl.x, endControl.y, startControl.x, startControl.y, start.x, start.y]);
  1498 + }
  1499 + };
  1500 + }
  1501 +
  1502 + function parseCorner(borderArgs, radius1, radius2, corner1, corner2, x, y) {
  1503 + if (radius1[0] > 0 || radius1[1] > 0) {
  1504 + borderArgs.push(["line", corner1[0].start.x, corner1[0].start.y]);
  1505 + corner1[0].curveTo(borderArgs);
  1506 + corner1[1].curveTo(borderArgs);
  1507 + } else {
  1508 + borderArgs.push(["line", x, y]);
  1509 + }
  1510 +
  1511 + if (radius2[0] > 0 || radius2[1] > 0) {
  1512 + borderArgs.push(["line", corner2[0].start.x, corner2[0].start.y]);
  1513 + }
  1514 + }
  1515 +
  1516 + function drawSide(borderData, radius1, radius2, outer1, inner1, outer2, inner2) {
  1517 + var borderArgs = [];
  1518 +
  1519 + if (radius1[0] > 0 || radius1[1] > 0) {
  1520 + borderArgs.push(["line", outer1[1].start.x, outer1[1].start.y]);
  1521 + outer1[1].curveTo(borderArgs);
  1522 + } else {
  1523 + borderArgs.push([ "line", borderData.c1[0], borderData.c1[1]]);
  1524 + }
  1525 +
  1526 + if (radius2[0] > 0 || radius2[1] > 0) {
  1527 + borderArgs.push(["line", outer2[0].start.x, outer2[0].start.y]);
  1528 + outer2[0].curveTo(borderArgs);
  1529 + borderArgs.push(["line", inner2[0].end.x, inner2[0].end.y]);
  1530 + inner2[0].curveToReversed(borderArgs);
  1531 + } else {
  1532 + borderArgs.push([ "line", borderData.c2[0], borderData.c2[1]]);
  1533 + borderArgs.push([ "line", borderData.c3[0], borderData.c3[1]]);
  1534 + }
  1535 +
  1536 + if (radius1[0] > 0 || radius1[1] > 0) {
  1537 + borderArgs.push(["line", inner1[1].end.x, inner1[1].end.y]);
  1538 + inner1[1].curveToReversed(borderArgs);
  1539 + } else {
  1540 + borderArgs.push([ "line", borderData.c4[0], borderData.c4[1]]);
  1541 + }
  1542 +
  1543 + return borderArgs;
  1544 + }
  1545 +
  1546 + function calculateCurvePoints(bounds, borderRadius, borders) {
  1547 +
  1548 + var x = bounds.left,
  1549 + y = bounds.top,
  1550 + width = bounds.width,
  1551 + height = bounds.height,
  1552 +
  1553 + tlh = borderRadius[0][0],
  1554 + tlv = borderRadius[0][1],
  1555 + trh = borderRadius[1][0],
  1556 + trv = borderRadius[1][1],
  1557 + brh = borderRadius[2][0],
  1558 + brv = borderRadius[2][1],
  1559 + blh = borderRadius[3][0],
  1560 + blv = borderRadius[3][1],
  1561 +
  1562 + topWidth = width - trh,
  1563 + rightHeight = height - brv,
  1564 + bottomWidth = width - brh,
  1565 + leftHeight = height - blv;
  1566 +
  1567 + return {
  1568 + topLeftOuter: getCurvePoints(
  1569 + x,
  1570 + y,
  1571 + tlh,
  1572 + tlv
  1573 + ).topLeft.subdivide(0.5),
  1574 +
  1575 + topLeftInner: getCurvePoints(
  1576 + x + borders[3].width,
  1577 + y + borders[0].width,
  1578 + Math.max(0, tlh - borders[3].width),
  1579 + Math.max(0, tlv - borders[0].width)
  1580 + ).topLeft.subdivide(0.5),
  1581 +
  1582 + topRightOuter: getCurvePoints(
  1583 + x + topWidth,
  1584 + y,
  1585 + trh,
  1586 + trv
  1587 + ).topRight.subdivide(0.5),
  1588 +
  1589 + topRightInner: getCurvePoints(
  1590 + x + Math.min(topWidth, width + borders[3].width),
  1591 + y + borders[0].width,
  1592 + (topWidth > width + borders[3].width) ? 0 :trh - borders[3].width,
  1593 + trv - borders[0].width
  1594 + ).topRight.subdivide(0.5),
  1595 +
  1596 + bottomRightOuter: getCurvePoints(
  1597 + x + bottomWidth,
  1598 + y + rightHeight,
  1599 + brh,
  1600 + brv
  1601 + ).bottomRight.subdivide(0.5),
  1602 +
  1603 + bottomRightInner: getCurvePoints(
  1604 + x + Math.min(bottomWidth, width + borders[3].width),
  1605 + y + Math.min(rightHeight, height + borders[0].width),
  1606 + Math.max(0, brh - borders[1].width),
  1607 + Math.max(0, brv - borders[2].width)
  1608 + ).bottomRight.subdivide(0.5),
  1609 +
  1610 + bottomLeftOuter: getCurvePoints(
  1611 + x,
  1612 + y + leftHeight,
  1613 + blh,
  1614 + blv
  1615 + ).bottomLeft.subdivide(0.5),
  1616 +
  1617 + bottomLeftInner: getCurvePoints(
  1618 + x + borders[3].width,
  1619 + y + leftHeight,
  1620 + Math.max(0, blh - borders[3].width),
  1621 + Math.max(0, blv - borders[2].width)
  1622 + ).bottomLeft.subdivide(0.5)
  1623 + };
  1624 + }
  1625 +
  1626 + function getBorderClip(element, borderPoints, borders, radius, bounds) {
  1627 + var backgroundClip = getCSS(element, 'backgroundClip'),
  1628 + borderArgs = [];
  1629 +
  1630 + switch(backgroundClip) {
  1631 + case "content-box":
  1632 + case "padding-box":
  1633 + parseCorner(borderArgs, radius[0], radius[1], borderPoints.topLeftInner, borderPoints.topRightInner, bounds.left + borders[3].width, bounds.top + borders[0].width);
  1634 + parseCorner(borderArgs, radius[1], radius[2], borderPoints.topRightInner, borderPoints.bottomRightInner, bounds.left + bounds.width - borders[1].width, bounds.top + borders[0].width);
  1635 + parseCorner(borderArgs, radius[2], radius[3], borderPoints.bottomRightInner, borderPoints.bottomLeftInner, bounds.left + bounds.width - borders[1].width, bounds.top + bounds.height - borders[2].width);
  1636 + parseCorner(borderArgs, radius[3], radius[0], borderPoints.bottomLeftInner, borderPoints.topLeftInner, bounds.left + borders[3].width, bounds.top + bounds.height - borders[2].width);
  1637 + break;
  1638 +
  1639 + default:
  1640 + parseCorner(borderArgs, radius[0], radius[1], borderPoints.topLeftOuter, borderPoints.topRightOuter, bounds.left, bounds.top);
  1641 + parseCorner(borderArgs, radius[1], radius[2], borderPoints.topRightOuter, borderPoints.bottomRightOuter, bounds.left + bounds.width, bounds.top);
  1642 + parseCorner(borderArgs, radius[2], radius[3], borderPoints.bottomRightOuter, borderPoints.bottomLeftOuter, bounds.left + bounds.width, bounds.top + bounds.height);
  1643 + parseCorner(borderArgs, radius[3], radius[0], borderPoints.bottomLeftOuter, borderPoints.topLeftOuter, bounds.left, bounds.top + bounds.height);
  1644 + break;
  1645 + }
  1646 +
  1647 + return borderArgs;
  1648 + }
  1649 +
  1650 + function parseBorders(element, bounds, borders){
  1651 + var x = bounds.left,
  1652 + y = bounds.top,
  1653 + width = bounds.width,
  1654 + height = bounds.height,
  1655 + borderSide,
  1656 + bx,
  1657 + by,
  1658 + bw,
  1659 + bh,
  1660 + borderArgs,
  1661 + // http://www.w3.org/TR/css3-background/#the-border-radius
  1662 + borderRadius = getBorderRadiusData(element),
  1663 + borderPoints = calculateCurvePoints(bounds, borderRadius, borders),
  1664 + borderData = {
  1665 + clip: getBorderClip(element, borderPoints, borders, borderRadius, bounds),
  1666 + borders: []
  1667 + };
  1668 +
  1669 + for (borderSide = 0; borderSide < 4; borderSide++) {
  1670 +
  1671 + if (borders[borderSide].width > 0) {
  1672 + bx = x;
  1673 + by = y;
  1674 + bw = width;
  1675 + bh = height - (borders[2].width);
  1676 +
  1677 + switch(borderSide) {
  1678 + case 0:
  1679 + // top border
  1680 + bh = borders[0].width;
  1681 +
  1682 + borderArgs = drawSide({
  1683 + c1: [bx, by],
  1684 + c2: [bx + bw, by],
  1685 + c3: [bx + bw - borders[1].width, by + bh],
  1686 + c4: [bx + borders[3].width, by + bh]
  1687 + }, borderRadius[0], borderRadius[1],
  1688 + borderPoints.topLeftOuter, borderPoints.topLeftInner, borderPoints.topRightOuter, borderPoints.topRightInner);
  1689 + break;
  1690 + case 1:
  1691 + // right border
  1692 + bx = x + width - (borders[1].width);
  1693 + bw = borders[1].width;
  1694 +
  1695 + borderArgs = drawSide({
  1696 + c1: [bx + bw, by],
  1697 + c2: [bx + bw, by + bh + borders[2].width],
  1698 + c3: [bx, by + bh],
  1699 + c4: [bx, by + borders[0].width]
  1700 + }, borderRadius[1], borderRadius[2],
  1701 + borderPoints.topRightOuter, borderPoints.topRightInner, borderPoints.bottomRightOuter, borderPoints.bottomRightInner);
  1702 + break;
  1703 + case 2:
  1704 + // bottom border
  1705 + by = (by + height) - (borders[2].width);
  1706 + bh = borders[2].width;
  1707 +
  1708 + borderArgs = drawSide({
  1709 + c1: [bx + bw, by + bh],
  1710 + c2: [bx, by + bh],
  1711 + c3: [bx + borders[3].width, by],
  1712 + c4: [bx + bw - borders[3].width, by]
  1713 + }, borderRadius[2], borderRadius[3],
  1714 + borderPoints.bottomRightOuter, borderPoints.bottomRightInner, borderPoints.bottomLeftOuter, borderPoints.bottomLeftInner);
  1715 + break;
  1716 + case 3:
  1717 + // left border
  1718 + bw = borders[3].width;
  1719 +
  1720 + borderArgs = drawSide({
  1721 + c1: [bx, by + bh + borders[2].width],
  1722 + c2: [bx, by],
  1723 + c3: [bx + bw, by + borders[0].width],
  1724 + c4: [bx + bw, by + bh]
  1725 + }, borderRadius[3], borderRadius[0],
  1726 + borderPoints.bottomLeftOuter, borderPoints.bottomLeftInner, borderPoints.topLeftOuter, borderPoints.topLeftInner);
  1727 + break;
  1728 + }
  1729 +
  1730 + borderData.borders.push({
  1731 + args: borderArgs,
  1732 + color: borders[borderSide].color
  1733 + });
  1734 +
  1735 + }
  1736 + }
  1737 +
  1738 + return borderData;
  1739 + }
  1740 +
  1741 + function createShape(ctx, args) {
  1742 + var shape = ctx.drawShape();
  1743 + args.forEach(function(border, index) {
  1744 + shape[(index === 0) ? "moveTo" : border[0] + "To" ].apply(null, border.slice(1));
  1745 + });
  1746 + return shape;
  1747 + }
  1748 +
  1749 + function renderBorders(ctx, borderArgs, color) {
  1750 + if (color !== "transparent") {
  1751 + ctx.setVariable( "fillStyle", color);
  1752 + createShape(ctx, borderArgs);
  1753 + ctx.fill();
  1754 + numDraws+=1;
  1755 + }
  1756 + }
  1757 +
  1758 + function renderFormValue (el, bounds, stack){
  1759 +
  1760 + var valueWrap = doc.createElement('valuewrap'),
  1761 + cssPropertyArray = ['lineHeight','textAlign','fontFamily','color','fontSize','paddingLeft','paddingTop','width','height','border','borderLeftWidth','borderTopWidth'],
  1762 + textValue,
  1763 + textNode;
  1764 +
  1765 + cssPropertyArray.forEach(function(property) {
  1766 + try {
  1767 + valueWrap.style[property] = getCSS(el, property);
  1768 + } catch(e) {
  1769 + // Older IE has issues with "border"
  1770 + Util.log("html2canvas: Parse: Exception caught in renderFormValue: " + e.message);
  1771 + }
  1772 + });
  1773 +
  1774 + valueWrap.style.borderColor = "black";
  1775 + valueWrap.style.borderStyle = "solid";
  1776 + valueWrap.style.display = "block";
  1777 + valueWrap.style.position = "absolute";
  1778 +
  1779 + if (/^(submit|reset|button|text|password)$/.test(el.type) || el.nodeName === "SELECT"){
  1780 + valueWrap.style.lineHeight = getCSS(el, "height");
  1781 + }
  1782 +
  1783 + valueWrap.style.top = bounds.top + "px";
  1784 + valueWrap.style.left = bounds.left + "px";
  1785 +
  1786 + textValue = (el.nodeName === "SELECT") ? (el.options[el.selectedIndex] || 0).text : el.value;
  1787 + if(!textValue) {
  1788 + textValue = el.placeholder;
  1789 + }
  1790 +
  1791 + textNode = doc.createTextNode(textValue);
  1792 +
  1793 + valueWrap.appendChild(textNode);
  1794 + body.appendChild(valueWrap);
  1795 +
  1796 + renderText(el, textNode, stack);
  1797 + body.removeChild(valueWrap);
  1798 + }
  1799 +
  1800 + function drawImage (ctx) {
  1801 + ctx.drawImage.apply(ctx, Array.prototype.slice.call(arguments, 1));
  1802 + numDraws+=1;
  1803 + }
  1804 +
  1805 + function getPseudoElement(el, which) {
  1806 + var elStyle = window.getComputedStyle(el, which);
  1807 + if(!elStyle || !elStyle.content || elStyle.content === "none" || elStyle.content === "-moz-alt-content" || elStyle.display === "none") {
  1808 + return;
  1809 + }
  1810 + var content = elStyle.content + '',
  1811 + first = content.substr( 0, 1 );
  1812 + //strips quotes
  1813 + if(first === content.substr( content.length - 1 ) && first.match(/'|"/)) {
  1814 + content = content.substr( 1, content.length - 2 );
  1815 + }
  1816 +
  1817 + var isImage = content.substr( 0, 3 ) === 'url',
  1818 + elps = document.createElement( isImage ? 'img' : 'span' );
  1819 +
  1820 + elps.className = pseudoHide + "-before " + pseudoHide + "-after";
  1821 +
  1822 + Object.keys(elStyle).filter(indexedProperty).forEach(function(prop) {
  1823 + // Prevent assigning of read only CSS Rules, ex. length, parentRule
  1824 + try {
  1825 + elps.style[prop] = elStyle[prop];
  1826 + } catch (e) {
  1827 + Util.log(['Tried to assign readonly property ', prop, 'Error:', e]);
  1828 + }
  1829 + });
  1830 +
  1831 + if(isImage) {
  1832 + elps.src = Util.parseBackgroundImage(content)[0].args[0];
  1833 + } else {
  1834 + elps.innerHTML = content;
  1835 + }
  1836 + return elps;
  1837 + }
  1838 +
  1839 + function indexedProperty(property) {
  1840 + return (isNaN(window.parseInt(property, 10)));
  1841 + }
  1842 +
  1843 + function injectPseudoElements(el, stack) {
  1844 + var before = getPseudoElement(el, ':before'),
  1845 + after = getPseudoElement(el, ':after');
  1846 + if(!before && !after) {
  1847 + return;
  1848 + }
  1849 +
  1850 + if(before) {
  1851 + el.className += " " + pseudoHide + "-before";
  1852 + el.parentNode.insertBefore(before, el);
  1853 + parseElement(before, stack, true);
  1854 + el.parentNode.removeChild(before);
  1855 + el.className = el.className.replace(pseudoHide + "-before", "").trim();
  1856 + }
  1857 +
  1858 + if (after) {
  1859 + el.className += " " + pseudoHide + "-after";
  1860 + el.appendChild(after);
  1861 + parseElement(after, stack, true);
  1862 + el.removeChild(after);
  1863 + el.className = el.className.replace(pseudoHide + "-after", "").trim();
  1864 + }
  1865 +
  1866 + }
  1867 +
  1868 + function renderBackgroundRepeat(ctx, image, backgroundPosition, bounds) {
  1869 + var offsetX = Math.round(bounds.left + backgroundPosition.left),
  1870 + offsetY = Math.round(bounds.top + backgroundPosition.top);
  1871 +
  1872 + ctx.createPattern(image);
  1873 + ctx.translate(offsetX, offsetY);
  1874 + ctx.fill();
  1875 + ctx.translate(-offsetX, -offsetY);
  1876 + }
  1877 +
  1878 + function backgroundRepeatShape(ctx, image, backgroundPosition, bounds, left, top, width, height) {
  1879 + var args = [];
  1880 + args.push(["line", Math.round(left), Math.round(top)]);
  1881 + args.push(["line", Math.round(left + width), Math.round(top)]);
  1882 + args.push(["line", Math.round(left + width), Math.round(height + top)]);
  1883 + args.push(["line", Math.round(left), Math.round(height + top)]);
  1884 + createShape(ctx, args);
  1885 + ctx.save();
  1886 + ctx.clip();
  1887 + renderBackgroundRepeat(ctx, image, backgroundPosition, bounds);
  1888 + ctx.restore();
  1889 + }
  1890 +
  1891 + function renderBackgroundColor(ctx, backgroundBounds, bgcolor) {
  1892 + renderRect(
  1893 + ctx,
  1894 + backgroundBounds.left,
  1895 + backgroundBounds.top,
  1896 + backgroundBounds.width,
  1897 + backgroundBounds.height,
  1898 + bgcolor
  1899 + );
  1900 + }
  1901 +
  1902 + function renderBackgroundRepeating(el, bounds, ctx, image, imageIndex) {
  1903 + var backgroundSize = Util.BackgroundSize(el, bounds, image, imageIndex),
  1904 + backgroundPosition = Util.BackgroundPosition(el, bounds, image, imageIndex, backgroundSize),
  1905 + backgroundRepeat = getCSS(el, "backgroundRepeat").split(",").map(Util.trimText);
  1906 +
  1907 + image = resizeImage(image, backgroundSize);
  1908 +
  1909 + backgroundRepeat = backgroundRepeat[imageIndex] || backgroundRepeat[0];
  1910 +
  1911 + switch (backgroundRepeat) {
  1912 + case "repeat-x":
  1913 + backgroundRepeatShape(ctx, image, backgroundPosition, bounds,
  1914 + bounds.left, bounds.top + backgroundPosition.top, 99999, image.height);
  1915 + break;
  1916 +
  1917 + case "repeat-y":
  1918 + backgroundRepeatShape(ctx, image, backgroundPosition, bounds,
  1919 + bounds.left + backgroundPosition.left, bounds.top, image.width, 99999);
  1920 + break;
  1921 +
  1922 + case "no-repeat":
  1923 + backgroundRepeatShape(ctx, image, backgroundPosition, bounds,
  1924 + bounds.left + backgroundPosition.left, bounds.top + backgroundPosition.top, image.width, image.height);
  1925 + break;
  1926 +
  1927 + default:
  1928 + renderBackgroundRepeat(ctx, image, backgroundPosition, {
  1929 + top: bounds.top,
  1930 + left: bounds.left,
  1931 + width: image.width,
  1932 + height: image.height
  1933 + });
  1934 + break;
  1935 + }
  1936 + }
  1937 +
  1938 + function renderBackgroundImage(element, bounds, ctx) {
  1939 + var backgroundImage = getCSS(element, "backgroundImage"),
  1940 + backgroundImages = Util.parseBackgroundImage(backgroundImage),
  1941 + image,
  1942 + imageIndex = backgroundImages.length;
  1943 +
  1944 + while(imageIndex--) {
  1945 + backgroundImage = backgroundImages[imageIndex];
  1946 +
  1947 + if (!backgroundImage.args || backgroundImage.args.length === 0) {
  1948 + continue;
  1949 + }
  1950 +
  1951 + var key = backgroundImage.method === 'url' ?
  1952 + backgroundImage.args[0] :
  1953 + backgroundImage.value;
  1954 +
  1955 + image = loadImage(key);
  1956 +
  1957 + // TODO add support for background-origin
  1958 + if (image) {
  1959 + renderBackgroundRepeating(element, bounds, ctx, image, imageIndex);
  1960 + } else {
  1961 + Util.log("html2canvas: Error loading background:", backgroundImage);
  1962 + }
  1963 + }
  1964 + }
  1965 +
  1966 + function resizeImage(image, bounds) {
  1967 + if(image.width === bounds.width && image.height === bounds.height) {
  1968 + return image;
  1969 + }
  1970 +
  1971 + var ctx, canvas = doc.createElement('canvas');
  1972 + canvas.width = bounds.width;
  1973 + canvas.height = bounds.height;
  1974 + ctx = canvas.getContext("2d");
  1975 + drawImage(ctx, image, 0, 0, image.width, image.height, 0, 0, bounds.width, bounds.height );
  1976 + return canvas;
  1977 + }
  1978 +
  1979 + function setOpacity(ctx, element, parentStack) {
  1980 + return ctx.setVariable("globalAlpha", getCSS(element, "opacity") * ((parentStack) ? parentStack.opacity : 1));
  1981 + }
  1982 +
  1983 + function removePx(str) {
  1984 + return str.replace("px", "");
  1985 + }
  1986 +
  1987 + var transformRegExp = /(matrix)\((.+)\)/;
  1988 +
  1989 + function getTransform(element, parentStack) {
  1990 + var transform = getCSS(element, "transform") || getCSS(element, "-webkit-transform") || getCSS(element, "-moz-transform") || getCSS(element, "-ms-transform") || getCSS(element, "-o-transform");
  1991 + var transformOrigin = getCSS(element, "transform-origin") || getCSS(element, "-webkit-transform-origin") || getCSS(element, "-moz-transform-origin") || getCSS(element, "-ms-transform-origin") || getCSS(element, "-o-transform-origin") || "0px 0px";
  1992 +
  1993 + transformOrigin = transformOrigin.split(" ").map(removePx).map(Util.asFloat);
  1994 +
  1995 + var matrix;
  1996 + if (transform && transform !== "none") {
  1997 + var match = transform.match(transformRegExp);
  1998 + if (match) {
  1999 + switch(match[1]) {
  2000 + case "matrix":
  2001 + matrix = match[2].split(",").map(Util.trimText).map(Util.asFloat);
  2002 + break;
  2003 + }
  2004 + }
  2005 + }
  2006 +
  2007 + return {
  2008 + origin: transformOrigin,
  2009 + matrix: matrix
  2010 + };
  2011 + }
  2012 +
  2013 + function createStack(element, parentStack, bounds, transform) {
  2014 + var ctx = h2cRenderContext((!parentStack) ? documentWidth() : bounds.width , (!parentStack) ? documentHeight() : bounds.height),
  2015 + stack = {
  2016 + ctx: ctx,
  2017 + opacity: setOpacity(ctx, element, parentStack),
  2018 + cssPosition: getCSS(element, "position"),
  2019 + borders: getBorderData(element),
  2020 + transform: transform,
  2021 + clip: (parentStack && parentStack.clip) ? Util.Extend( {}, parentStack.clip ) : null
  2022 + };
  2023 +
  2024 + setZ(element, stack, parentStack);
  2025 +
  2026 + // TODO correct overflow for absolute content residing under a static position
  2027 + if (options.useOverflow === true && /(hidden|scroll|auto)/.test(getCSS(element, "overflow")) === true && /(BODY)/i.test(element.nodeName) === false){
  2028 + stack.clip = (stack.clip) ? clipBounds(stack.clip, bounds) : bounds;
  2029 + }
  2030 +
  2031 + return stack;
  2032 + }
  2033 +
  2034 + function getBackgroundBounds(borders, bounds, clip) {
  2035 + var backgroundBounds = {
  2036 + left: bounds.left + borders[3].width,
  2037 + top: bounds.top + borders[0].width,
  2038 + width: bounds.width - (borders[1].width + borders[3].width),
  2039 + height: bounds.height - (borders[0].width + borders[2].width)
  2040 + };
  2041 +
  2042 + if (clip) {
  2043 + backgroundBounds = clipBounds(backgroundBounds, clip);
  2044 + }
  2045 +
  2046 + return backgroundBounds;
  2047 + }
  2048 +
  2049 + function getBounds(element, transform) {
  2050 + var bounds = (transform.matrix) ? Util.OffsetBounds(element) : Util.Bounds(element);
  2051 + transform.origin[0] += bounds.left;
  2052 + transform.origin[1] += bounds.top;
  2053 + return bounds;
  2054 + }
  2055 +
  2056 + function renderElement(element, parentStack, pseudoElement, ignoreBackground) {
  2057 + var transform = getTransform(element, parentStack),
  2058 + bounds = getBounds(element, transform),
  2059 + image,
  2060 + stack = createStack(element, parentStack, bounds, transform),
  2061 + borders = stack.borders,
  2062 + ctx = stack.ctx,
  2063 + backgroundBounds = getBackgroundBounds(borders, bounds, stack.clip),
  2064 + borderData = parseBorders(element, bounds, borders),
  2065 + backgroundColor = (ignoreElementsRegExp.test(element.nodeName)) ? "#efefef" : getCSS(element, "backgroundColor");
  2066 +
  2067 +
  2068 + createShape(ctx, borderData.clip);
  2069 +
  2070 + ctx.save();
  2071 + ctx.clip();
  2072 +
  2073 + if (backgroundBounds.height > 0 && backgroundBounds.width > 0 && !ignoreBackground) {
  2074 + renderBackgroundColor(ctx, bounds, backgroundColor);
  2075 + renderBackgroundImage(element, backgroundBounds, ctx);
  2076 + } else if (ignoreBackground) {
  2077 + stack.backgroundColor = backgroundColor;
  2078 + }
  2079 +
  2080 + ctx.restore();
  2081 +
  2082 + borderData.borders.forEach(function(border) {
  2083 + renderBorders(ctx, border.args, border.color);
  2084 + });
  2085 +
  2086 + if (!pseudoElement) {
  2087 + injectPseudoElements(element, stack);
  2088 + }
  2089 +
  2090 + switch(element.nodeName){
  2091 + case "IMG":
  2092 + if ((image = loadImage(element.getAttribute('src')))) {
  2093 + renderImage(ctx, element, image, bounds, borders);
  2094 + } else {
  2095 + Util.log("html2canvas: Error loading <img>:" + element.getAttribute('src'));
  2096 + }
  2097 + break;
  2098 + case "INPUT":
  2099 + // TODO add all relevant type's, i.e. HTML5 new stuff
  2100 + // todo add support for placeholder attribute for browsers which support it
  2101 + if (/^(text|url|email|submit|button|reset)$/.test(element.type) && (element.value || element.placeholder || "").length > 0){
  2102 + renderFormValue(element, bounds, stack);
  2103 + }
  2104 + break;
  2105 + case "TEXTAREA":
  2106 + if ((element.value || element.placeholder || "").length > 0){
  2107 + renderFormValue(element, bounds, stack);
  2108 + }
  2109 + break;
  2110 + case "SELECT":
  2111 + if ((element.options||element.placeholder || "").length > 0){
  2112 + renderFormValue(element, bounds, stack);
  2113 + }
  2114 + break;
  2115 + case "LI":
  2116 + renderListItem(element, stack, backgroundBounds);
  2117 + break;
  2118 + case "CANVAS":
  2119 + renderImage(ctx, element, element, bounds, borders);
  2120 + break;
  2121 + }
  2122 +
  2123 + return stack;
  2124 + }
  2125 +
  2126 + function isElementVisible(element) {
  2127 + return (getCSS(element, 'display') !== "none" && getCSS(element, 'visibility') !== "hidden" && !element.hasAttribute("data-html2canvas-ignore"));
  2128 + }
  2129 +
  2130 + function parseElement (element, stack, pseudoElement) {
  2131 + if (isElementVisible(element)) {
  2132 + stack = renderElement(element, stack, pseudoElement, false) || stack;
  2133 + if (!ignoreElementsRegExp.test(element.nodeName)) {
  2134 + parseChildren(element, stack, pseudoElement);
  2135 + }
  2136 + }
  2137 + }
  2138 +
  2139 + function parseChildren(element, stack, pseudoElement) {
  2140 + Util.Children(element).forEach(function(node) {
  2141 + if (node.nodeType === node.ELEMENT_NODE) {
  2142 + parseElement(node, stack, pseudoElement);
  2143 + } else if (node.nodeType === node.TEXT_NODE) {
  2144 + renderText(element, node, stack);
  2145 + }
  2146 + });
  2147 + }
  2148 +
  2149 + function init() {
  2150 + var background = getCSS(document.documentElement, "backgroundColor"),
  2151 + transparentBackground = (Util.isTransparent(background) && element === document.body),
  2152 + stack = renderElement(element, null, false, transparentBackground);
  2153 + parseChildren(element, stack);
  2154 +
  2155 + if (transparentBackground) {
  2156 + background = stack.backgroundColor;
  2157 + }
  2158 +
  2159 + body.removeChild(hidePseudoElements);
  2160 + return {
  2161 + backgroundColor: background,
  2162 + stack: stack
  2163 + };
  2164 + }
  2165 +
  2166 + return init();
  2167 +};
  2168 +
  2169 +function h2czContext(zindex) {
  2170 + return {
  2171 + zindex: zindex,
  2172 + children: []
  2173 + };
  2174 +}
  2175 +
  2176 +_html2canvas.Preload = function( options ) {
  2177 +
  2178 + var images = {
  2179 + numLoaded: 0, // also failed are counted here
  2180 + numFailed: 0,
  2181 + numTotal: 0,
  2182 + cleanupDone: false
  2183 + },
  2184 + pageOrigin,
  2185 + Util = _html2canvas.Util,
  2186 + methods,
  2187 + i,
  2188 + count = 0,
  2189 + element = options.elements[0] || document.body,
  2190 + doc = element.ownerDocument,
  2191 + domImages = element.getElementsByTagName('img'), // Fetch images of the present element only
  2192 + imgLen = domImages.length,
  2193 + link = doc.createElement("a"),
  2194 + supportCORS = (function( img ){
  2195 + return (img.crossOrigin !== undefined);
  2196 + })(new Image()),
  2197 + timeoutTimer;
  2198 +
  2199 + link.href = window.location.href;
  2200 + pageOrigin = link.protocol + link.host;
  2201 +
  2202 + function isSameOrigin(url){
  2203 + link.href = url;
  2204 + link.href = link.href; // YES, BELIEVE IT OR NOT, that is required for IE9 - http://jsfiddle.net/niklasvh/2e48b/
  2205 + var origin = link.protocol + link.host;
  2206 + return (origin === pageOrigin);
  2207 + }
  2208 +
  2209 + function start(){
  2210 + Util.log("html2canvas: start: images: " + images.numLoaded + " / " + images.numTotal + " (failed: " + images.numFailed + ")");
  2211 + if (!images.firstRun && images.numLoaded >= images.numTotal){
  2212 + Util.log("Finished loading images: # " + images.numTotal + " (failed: " + images.numFailed + ")");
  2213 +
  2214 + if (typeof options.complete === "function"){
  2215 + options.complete(images);
  2216 + }
  2217 +
  2218 + }
  2219 + }
  2220 +
  2221 + // TODO modify proxy to serve images with CORS enabled, where available
  2222 + function proxyGetImage(url, img, imageObj){
  2223 + var callback_name,
  2224 + scriptUrl = options.proxy,
  2225 + script;
  2226 +
  2227 + link.href = url;
  2228 + url = link.href; // work around for pages with base href="" set - WARNING: this may change the url
  2229 +
  2230 + callback_name = 'html2canvas_' + (count++);
  2231 + imageObj.callbackname = callback_name;
  2232 +
  2233 + if (scriptUrl.indexOf("?") > -1) {
  2234 + scriptUrl += "&";
  2235 + } else {
  2236 + scriptUrl += "?";
  2237 + }
  2238 + scriptUrl += 'url=' + encodeURIComponent(url) + '&callback=' + callback_name;
  2239 + script = doc.createElement("script");
  2240 +
  2241 + window[callback_name] = function(a){
  2242 + if (a.substring(0,6) === "error:"){
  2243 + imageObj.succeeded = false;
  2244 + images.numLoaded++;
  2245 + images.numFailed++;
  2246 + start();
  2247 + } else {
  2248 + setImageLoadHandlers(img, imageObj);
  2249 + img.src = a;
  2250 + }
  2251 + window[callback_name] = undefined; // to work with IE<9 // NOTE: that the undefined callback property-name still exists on the window object (for IE<9)
  2252 + try {
  2253 + delete window[callback_name]; // for all browser that support this
  2254 + } catch(ex) {}
  2255 + script.parentNode.removeChild(script);
  2256 + script = null;
  2257 + delete imageObj.script;
  2258 + delete imageObj.callbackname;
  2259 + };
  2260 +
  2261 + script.setAttribute("type", "text/javascript");
  2262 + script.setAttribute("src", scriptUrl);
  2263 + imageObj.script = script;
  2264 + window.document.body.appendChild(script);
  2265 +
  2266 + }
  2267 +
  2268 + function loadPseudoElement(element, type) {
  2269 + var style = window.getComputedStyle(element, type),
  2270 + content = style.content;
  2271 + if (content.substr(0, 3) === 'url') {
  2272 + methods.loadImage(_html2canvas.Util.parseBackgroundImage(content)[0].args[0]);
  2273 + }
  2274 + loadBackgroundImages(style.backgroundImage, element);
  2275 + }
  2276 +
  2277 + function loadPseudoElementImages(element) {
  2278 + loadPseudoElement(element, ":before");
  2279 + loadPseudoElement(element, ":after");
  2280 + }
  2281 +
  2282 + function loadGradientImage(backgroundImage, bounds) {
  2283 + var img = _html2canvas.Generate.Gradient(backgroundImage, bounds);
  2284 +
  2285 + if (img !== undefined){
  2286 + images[backgroundImage] = {
  2287 + img: img,
  2288 + succeeded: true
  2289 + };
  2290 + images.numTotal++;
  2291 + images.numLoaded++;
  2292 + start();
  2293 + }
  2294 + }
  2295 +
  2296 + function invalidBackgrounds(background_image) {
  2297 + return (background_image && background_image.method && background_image.args && background_image.args.length > 0 );
  2298 + }
  2299 +
  2300 + function loadBackgroundImages(background_image, el) {
  2301 + var bounds;
  2302 +
  2303 + _html2canvas.Util.parseBackgroundImage(background_image).filter(invalidBackgrounds).forEach(function(background_image) {
  2304 + if (background_image.method === 'url') {
  2305 + methods.loadImage(background_image.args[0]);
  2306 + } else if(background_image.method.match(/\-?gradient$/)) {
  2307 + if(bounds === undefined) {
  2308 + bounds = _html2canvas.Util.Bounds(el);
  2309 + }
  2310 + loadGradientImage(background_image.value, bounds);
  2311 + }
  2312 + });
  2313 + }
  2314 +
  2315 + function getImages (el) {
  2316 + var elNodeType = false;
  2317 +
  2318 + // Firefox fails with permission denied on pages with iframes
  2319 + try {
  2320 + Util.Children(el).forEach(getImages);
  2321 + }
  2322 + catch( e ) {}
  2323 +
  2324 + try {
  2325 + elNodeType = el.nodeType;
  2326 + } catch (ex) {
  2327 + elNodeType = false;
  2328 + Util.log("html2canvas: failed to access some element's nodeType - Exception: " + ex.message);
  2329 + }
  2330 +
  2331 + if (elNodeType === 1 || elNodeType === undefined) {
  2332 + loadPseudoElementImages(el);
  2333 + try {
  2334 + loadBackgroundImages(Util.getCSS(el, 'backgroundImage'), el);
  2335 + } catch(e) {
  2336 + Util.log("html2canvas: failed to get background-image - Exception: " + e.message);
  2337 + }
  2338 + loadBackgroundImages(el);
  2339 + }
  2340 + }
  2341 +
  2342 + function setImageLoadHandlers(img, imageObj) {
  2343 + img.onload = function() {
  2344 + if ( imageObj.timer !== undefined ) {
  2345 + // CORS succeeded
  2346 + window.clearTimeout( imageObj.timer );
  2347 + }
  2348 +
  2349 + images.numLoaded++;
  2350 + imageObj.succeeded = true;
  2351 + img.onerror = img.onload = null;
  2352 + start();
  2353 + };
  2354 + img.onerror = function() {
  2355 + if (img.crossOrigin === "anonymous") {
  2356 + // CORS failed
  2357 + window.clearTimeout( imageObj.timer );
  2358 +
  2359 + // let's try with proxy instead
  2360 + if ( options.proxy ) {
  2361 + var src = img.src;
  2362 + img = new Image();
  2363 + imageObj.img = img;
  2364 + img.src = src;
  2365 +
  2366 + proxyGetImage( img.src, img, imageObj );
  2367 + return;
  2368 + }
  2369 + }
  2370 +
  2371 + images.numLoaded++;
  2372 + images.numFailed++;
  2373 + imageObj.succeeded = false;
  2374 + img.onerror = img.onload = null;
  2375 + start();
  2376 + };
  2377 + }
  2378 +
  2379 + methods = {
  2380 + loadImage: function( src ) {
  2381 + var img, imageObj;
  2382 + if ( src && images[src] === undefined ) {
  2383 + img = new Image();
  2384 + if ( src.match(/data:image\/.*;base64,/i) ) {
  2385 + img.src = src.replace(/url\(['"]{0,}|['"]{0,}\)$/ig, '');
  2386 + imageObj = images[src] = {
  2387 + img: img
  2388 + };
  2389 + images.numTotal++;
  2390 + setImageLoadHandlers(img, imageObj);
  2391 + } else if ( isSameOrigin( src ) || options.allowTaint === true ) {
  2392 + imageObj = images[src] = {
  2393 + img: img
  2394 + };
  2395 + images.numTotal++;
  2396 + setImageLoadHandlers(img, imageObj);
  2397 + img.src = src;
  2398 + } else if ( supportCORS && !options.allowTaint && options.useCORS ) {
  2399 + // attempt to load with CORS
  2400 +
  2401 + img.crossOrigin = "anonymous";
  2402 + imageObj = images[src] = {
  2403 + img: img
  2404 + };
  2405 + images.numTotal++;
  2406 + setImageLoadHandlers(img, imageObj);
  2407 + img.src = src;
  2408 + } else if ( options.proxy ) {
  2409 + imageObj = images[src] = {
  2410 + img: img
  2411 + };
  2412 + images.numTotal++;
  2413 + proxyGetImage( src, img, imageObj );
  2414 + }
  2415 + }
  2416 +
  2417 + },
  2418 + cleanupDOM: function(cause) {
  2419 + var img, src;
  2420 + if (!images.cleanupDone) {
  2421 + if (cause && typeof cause === "string") {
  2422 + Util.log("html2canvas: Cleanup because: " + cause);
  2423 + } else {
  2424 + Util.log("html2canvas: Cleanup after timeout: " + options.timeout + " ms.");
  2425 + }
  2426 +
  2427 + for (src in images) {
  2428 + if (images.hasOwnProperty(src)) {
  2429 + img = images[src];
  2430 + if (typeof img === "object" && img.callbackname && img.succeeded === undefined) {
  2431 + // cancel proxy image request
  2432 + window[img.callbackname] = undefined; // to work with IE<9 // NOTE: that the undefined callback property-name still exists on the window object (for IE<9)
  2433 + try {
  2434 + delete window[img.callbackname]; // for all browser that support this
  2435 + } catch(ex) {}
  2436 + if (img.script && img.script.parentNode) {
  2437 + img.script.setAttribute("src", "about:blank"); // try to cancel running request
  2438 + img.script.parentNode.removeChild(img.script);
  2439 + }
  2440 + images.numLoaded++;
  2441 + images.numFailed++;
  2442 + Util.log("html2canvas: Cleaned up failed img: '" + src + "' Steps: " + images.numLoaded + " / " + images.numTotal);
  2443 + }
  2444 + }
  2445 + }
  2446 +
  2447 + // cancel any pending requests
  2448 + if(window.stop !== undefined) {
  2449 + window.stop();
  2450 + } else if(document.execCommand !== undefined) {
  2451 + document.execCommand("Stop", false);
  2452 + }
  2453 + if (document.close !== undefined) {
  2454 + document.close();
  2455 + }
  2456 + images.cleanupDone = true;
  2457 + if (!(cause && typeof cause === "string")) {
  2458 + start();
  2459 + }
  2460 + }
  2461 + },
  2462 +
  2463 + renderingDone: function() {
  2464 + if (timeoutTimer) {
  2465 + window.clearTimeout(timeoutTimer);
  2466 + }
  2467 + }
  2468 + };
  2469 +
  2470 + if (options.timeout > 0) {
  2471 + timeoutTimer = window.setTimeout(methods.cleanupDOM, options.timeout);
  2472 + }
  2473 +
  2474 + Util.log('html2canvas: Preload starts: finding background-images');
  2475 + images.firstRun = true;
  2476 +
  2477 + getImages(element);
  2478 +
  2479 + Util.log('html2canvas: Preload: Finding images');
  2480 + // load <img> images
  2481 + for (i = 0; i < imgLen; i+=1){
  2482 + methods.loadImage( domImages[i].getAttribute( "src" ) );
  2483 + }
  2484 +
  2485 + images.firstRun = false;
  2486 + Util.log('html2canvas: Preload: Done.');
  2487 + if (images.numTotal === images.numLoaded) {
  2488 + start();
  2489 + }
  2490 +
  2491 + return methods;
  2492 +};
  2493 +
  2494 +_html2canvas.Renderer = function(parseQueue, options){
  2495 +
  2496 + // http://www.w3.org/TR/CSS21/zindex.html
  2497 + function createRenderQueue(parseQueue) {
  2498 + var queue = [],
  2499 + rootContext;
  2500 +
  2501 + rootContext = (function buildStackingContext(rootNode) {
  2502 + var rootContext = {};
  2503 + function insert(context, node, specialParent) {
  2504 + var zi = (node.zIndex.zindex === 'auto') ? 0 : Number(node.zIndex.zindex),
  2505 + contextForChildren = context, // the stacking context for children
  2506 + isPositioned = node.zIndex.isPositioned,
  2507 + isFloated = node.zIndex.isFloated,
  2508 + stub = {node: node},
  2509 + childrenDest = specialParent; // where children without z-index should be pushed into
  2510 +
  2511 + if (node.zIndex.ownStacking) {
  2512 + // '!' comes before numbers in sorted array
  2513 + contextForChildren = stub.context = { '!': [{node:node, children: []}]};
  2514 + childrenDest = undefined;
  2515 + } else if (isPositioned || isFloated) {
  2516 + childrenDest = stub.children = [];
  2517 + }
  2518 +
  2519 + if (zi === 0 && specialParent) {
  2520 + specialParent.push(stub);
  2521 + } else {
  2522 + if (!context[zi]) { context[zi] = []; }
  2523 + context[zi].push(stub);
  2524 + }
  2525 +
  2526 + node.zIndex.children.forEach(function(childNode) {
  2527 + insert(contextForChildren, childNode, childrenDest);
  2528 + });
  2529 + }
  2530 + insert(rootContext, rootNode);
  2531 + return rootContext;
  2532 + })(parseQueue);
  2533 +
  2534 + function sortZ(context) {
  2535 + Object.keys(context).sort().forEach(function(zi) {
  2536 + var nonPositioned = [],
  2537 + floated = [],
  2538 + positioned = [],
  2539 + list = [];
  2540 +
  2541 + // positioned after static
  2542 + context[zi].forEach(function(v) {
  2543 + if (v.node.zIndex.isPositioned || v.node.zIndex.opacity < 1) {
  2544 + // http://www.w3.org/TR/css3-color/#transparency
  2545 + // non-positioned element with opactiy < 1 should be stacked as if it were a positioned element with โ€˜z-index: 0โ€™ and โ€˜opacity: 1โ€™.
  2546 + positioned.push(v);
  2547 + } else if (v.node.zIndex.isFloated) {
  2548 + floated.push(v);
  2549 + } else {
  2550 + nonPositioned.push(v);
  2551 + }
  2552 + });
  2553 +
  2554 + (function walk(arr) {
  2555 + arr.forEach(function(v) {
  2556 + list.push(v);
  2557 + if (v.children) { walk(v.children); }
  2558 + });
  2559 + })(nonPositioned.concat(floated, positioned));
  2560 +
  2561 + list.forEach(function(v) {
  2562 + if (v.context) {
  2563 + sortZ(v.context);
  2564 + } else {
  2565 + queue.push(v.node);
  2566 + }
  2567 + });
  2568 + });
  2569 + }
  2570 +
  2571 + sortZ(rootContext);
  2572 +
  2573 + return queue;
  2574 + }
  2575 +
  2576 + function getRenderer(rendererName) {
  2577 + var renderer;
  2578 +
  2579 + if (typeof options.renderer === "string" && _html2canvas.Renderer[rendererName] !== undefined) {
  2580 + renderer = _html2canvas.Renderer[rendererName](options);
  2581 + } else if (typeof rendererName === "function") {
  2582 + renderer = rendererName(options);
  2583 + } else {
  2584 + throw new Error("Unknown renderer");
  2585 + }
  2586 +
  2587 + if ( typeof renderer !== "function" ) {
  2588 + throw new Error("Invalid renderer defined");
  2589 + }
  2590 + return renderer;
  2591 + }
  2592 +
  2593 + return getRenderer(options.renderer)(parseQueue, options, document, createRenderQueue(parseQueue.stack), _html2canvas);
  2594 +};
  2595 +
  2596 +_html2canvas.Util.Support = function (options, doc) {
  2597 +
  2598 + function supportSVGRendering() {
  2599 + var img = new Image(),
  2600 + canvas = doc.createElement("canvas"),
  2601 + ctx = (canvas.getContext === undefined) ? false : canvas.getContext("2d");
  2602 + if (ctx === false) {
  2603 + return false;
  2604 + }
  2605 + canvas.width = canvas.height = 10;
  2606 + img.src = [
  2607 + "data:image/svg+xml,",
  2608 + "<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'>",
  2609 + "<foreignObject width='10' height='10'>",
  2610 + "<div xmlns='http://www.w3.org/1999/xhtml' style='width:10;height:10;'>",
  2611 + "sup",
  2612 + "</div>",
  2613 + "</foreignObject>",
  2614 + "</svg>"
  2615 + ].join("");
  2616 + try {
  2617 + ctx.drawImage(img, 0, 0);
  2618 + canvas.toDataURL();
  2619 + } catch(e) {
  2620 + return false;
  2621 + }
  2622 + _html2canvas.Util.log('html2canvas: Parse: SVG powered rendering available');
  2623 + return true;
  2624 + }
  2625 +
  2626 + // Test whether we can use ranges to measure bounding boxes
  2627 + // Opera doesn't provide valid bounds.height/bottom even though it supports the method.
  2628 +
  2629 + function supportRangeBounds() {
  2630 + var r, testElement, rangeBounds, rangeHeight, support = false;
  2631 +
  2632 + if (doc.createRange) {
  2633 + r = doc.createRange();
  2634 + if (r.getBoundingClientRect) {
  2635 + testElement = doc.createElement('boundtest');
  2636 + testElement.style.height = "123px";
  2637 + testElement.style.display = "block";
  2638 + doc.body.appendChild(testElement);
  2639 +
  2640 + r.selectNode(testElement);
  2641 + rangeBounds = r.getBoundingClientRect();
  2642 + rangeHeight = rangeBounds.height;
  2643 +
  2644 + if (rangeHeight === 123) {
  2645 + support = true;
  2646 + }
  2647 + doc.body.removeChild(testElement);
  2648 + }
  2649 + }
  2650 +
  2651 + return support;
  2652 + }
  2653 +
  2654 + return {
  2655 + rangeBounds: supportRangeBounds(),
  2656 + svgRendering: options.svgRendering && supportSVGRendering()
  2657 + };
  2658 +};
  2659 +window.html2canvas = function(elements, opts) {
  2660 + elements = (elements.length) ? elements : [elements];
  2661 + var queue,
  2662 + canvas,
  2663 + options = {
  2664 + // general
  2665 + logging: false,
  2666 + elements: elements,
  2667 + background: "#fff",
  2668 +
  2669 + // preload options
  2670 + proxy: null,
  2671 + timeout: 0, // no timeout
  2672 + useCORS: false, // try to load images as CORS (where available), before falling back to proxy
  2673 + allowTaint: false, // whether to allow images to taint the canvas, won't need proxy if set to true
  2674 +
  2675 + // parse options
  2676 + svgRendering: false, // use svg powered rendering where available (FF11+)
  2677 + ignoreElements: "IFRAME|OBJECT|PARAM",
  2678 + useOverflow: true,
  2679 + letterRendering: false,
  2680 + chinese: false,
  2681 +
  2682 + // render options
  2683 +
  2684 + width: null,
  2685 + height: null,
  2686 + taintTest: true, // do a taint test with all images before applying to canvas
  2687 + renderer: "Canvas"
  2688 + };
  2689 +
  2690 + options = _html2canvas.Util.Extend(opts, options);
  2691 +
  2692 + _html2canvas.logging = options.logging;
  2693 + options.complete = function( images ) {
  2694 +
  2695 + if (typeof options.onpreloaded === "function") {
  2696 + if ( options.onpreloaded( images ) === false ) {
  2697 + return;
  2698 + }
  2699 + }
  2700 + queue = _html2canvas.Parse( images, options );
  2701 +
  2702 + if (typeof options.onparsed === "function") {
  2703 + if ( options.onparsed( queue ) === false ) {
  2704 + return;
  2705 + }
  2706 + }
  2707 +
  2708 + canvas = _html2canvas.Renderer( queue, options );
  2709 +
  2710 + if (typeof options.onrendered === "function") {
  2711 + options.onrendered( canvas );
  2712 + }
  2713 +
  2714 +
  2715 + };
  2716 +
  2717 + // for pages without images, we still want this to be async, i.e. return methods before executing
  2718 + window.setTimeout( function(){
  2719 + _html2canvas.Preload( options );
  2720 + }, 0 );
  2721 +
  2722 + return {
  2723 + render: function( queue, opts ) {
  2724 + return _html2canvas.Renderer( queue, _html2canvas.Util.Extend(opts, options) );
  2725 + },
  2726 + parse: function( images, opts ) {
  2727 + return _html2canvas.Parse( images, _html2canvas.Util.Extend(opts, options) );
  2728 + },
  2729 + preload: function( opts ) {
  2730 + return _html2canvas.Preload( _html2canvas.Util.Extend(opts, options) );
  2731 + },
  2732 + log: _html2canvas.Util.log
  2733 + };
  2734 +};
  2735 +
  2736 +window.html2canvas.log = _html2canvas.Util.log; // for renderers
  2737 +window.html2canvas.Renderer = {
  2738 + Canvas: undefined // We are assuming this will be used
  2739 +};
  2740 +_html2canvas.Renderer.Canvas = function(options) {
  2741 + options = options || {};
  2742 +
  2743 + var doc = document,
  2744 + safeImages = [],
  2745 + testCanvas = document.createElement("canvas"),
  2746 + testctx = testCanvas.getContext("2d"),
  2747 + Util = _html2canvas.Util,
  2748 + canvas = options.canvas || doc.createElement('canvas');
  2749 +
  2750 + function createShape(ctx, args) {
  2751 + ctx.beginPath();
  2752 + args.forEach(function(arg) {
  2753 + ctx[arg.name].apply(ctx, arg['arguments']);
  2754 + });
  2755 + ctx.closePath();
  2756 + }
  2757 +
  2758 + function safeImage(item) {
  2759 + if (safeImages.indexOf(item['arguments'][0].src ) === -1) {
  2760 + testctx.drawImage(item['arguments'][0], 0, 0);
  2761 + try {
  2762 + testctx.getImageData(0, 0, 1, 1);
  2763 + } catch(e) {
  2764 + testCanvas = doc.createElement("canvas");
  2765 + testctx = testCanvas.getContext("2d");
  2766 + return false;
  2767 + }
  2768 + safeImages.push(item['arguments'][0].src);
  2769 + }
  2770 + return true;
  2771 + }
  2772 +
  2773 + function renderItem(ctx, item) {
  2774 + switch(item.type){
  2775 + case "variable":
  2776 + ctx[item.name] = item['arguments'];
  2777 + break;
  2778 + case "function":
  2779 + switch(item.name) {
  2780 + case "createPattern":
  2781 + if (item['arguments'][0].width > 0 && item['arguments'][0].height > 0) {
  2782 + try {
  2783 + ctx.fillStyle = ctx.createPattern(item['arguments'][0], "repeat");
  2784 + }
  2785 + catch(e) {
  2786 + Util.log("html2canvas: Renderer: Error creating pattern", e.message);
  2787 + }
  2788 + }
  2789 + break;
  2790 + case "drawShape":
  2791 + createShape(ctx, item['arguments']);
  2792 + break;
  2793 + case "drawImage":
  2794 + if (item['arguments'][8] > 0 && item['arguments'][7] > 0) {
  2795 + if (!options.taintTest || (options.taintTest && safeImage(item))) {
  2796 + ctx.drawImage.apply( ctx, item['arguments'] );
  2797 + }
  2798 + }
  2799 + break;
  2800 + default:
  2801 + ctx[item.name].apply(ctx, item['arguments']);
  2802 + }
  2803 + break;
  2804 + }
  2805 + }
  2806 +
  2807 + return function(parsedData, options, document, queue, _html2canvas) {
  2808 + var ctx = canvas.getContext("2d"),
  2809 + newCanvas,
  2810 + bounds,
  2811 + fstyle,
  2812 + zStack = parsedData.stack;
  2813 +
  2814 + canvas.width = canvas.style.width = options.width || zStack.ctx.width;
  2815 + canvas.height = canvas.style.height = options.height || zStack.ctx.height;
  2816 +
  2817 + fstyle = ctx.fillStyle;
  2818 + ctx.fillStyle = (Util.isTransparent(zStack.backgroundColor) && options.background !== undefined) ? options.background : parsedData.backgroundColor;
  2819 + ctx.fillRect(0, 0, canvas.width, canvas.height);
  2820 + ctx.fillStyle = fstyle;
  2821 +
  2822 + queue.forEach(function(storageContext) {
  2823 + // set common settings for canvas
  2824 + ctx.textBaseline = "bottom";
  2825 + ctx.save();
  2826 +
  2827 + if (storageContext.transform.matrix) {
  2828 + ctx.translate(storageContext.transform.origin[0], storageContext.transform.origin[1]);
  2829 + ctx.transform.apply(ctx, storageContext.transform.matrix);
  2830 + ctx.translate(-storageContext.transform.origin[0], -storageContext.transform.origin[1]);
  2831 + }
  2832 +
  2833 + if (storageContext.clip){
  2834 + ctx.beginPath();
  2835 + ctx.rect(storageContext.clip.left, storageContext.clip.top, storageContext.clip.width, storageContext.clip.height);
  2836 + ctx.clip();
  2837 + }
  2838 +
  2839 + if (storageContext.ctx.storage) {
  2840 + storageContext.ctx.storage.forEach(function(item) {
  2841 + renderItem(ctx, item);
  2842 + });
  2843 + }
  2844 +
  2845 + ctx.restore();
  2846 + });
  2847 +
  2848 + Util.log("html2canvas: Renderer: Canvas renderer done - returning canvas obj");
  2849 +
  2850 + if (options.elements.length === 1) {
  2851 + if (typeof options.elements[0] === "object" && options.elements[0].nodeName !== "BODY") {
  2852 + // crop image to the bounds of selected (single) element
  2853 + bounds = _html2canvas.Util.Bounds(options.elements[0]);
  2854 + newCanvas = document.createElement('canvas');
  2855 + newCanvas.width = Math.ceil(bounds.width);
  2856 + newCanvas.height = Math.ceil(bounds.height);
  2857 + ctx = newCanvas.getContext("2d");
  2858 +
  2859 + ctx.drawImage(canvas, bounds.left, bounds.top, bounds.width, bounds.height, 0, 0, bounds.width, bounds.height);
  2860 + canvas = null;
  2861 + return newCanvas;
  2862 + }
  2863 + }
  2864 +
  2865 + return canvas;
  2866 + };
  2867 +};
  2868 +})(window,document);
0 2869 \ No newline at end of file
... ...
400-SOURCECODE/AIAHTML5.Web/themes/default/css/bootstrap/3.3.6/main.css
  View file @122a725
... ... @@ -862,12 +862,36 @@ padding-left:5px; padding-right:5px;
862 862 }
863 863  
864 864 .clstbodyca tr td {
  865 + min-width: 275px;
865 866 /*max-width: 260px;*/
866 867 text-align: left;
867 868 word-wrap:break-word;
868 869  
869 870 }
870 871  
  872 +
  873 +
  874 +
  875 +.tablecaview .clstbody tr td {
  876 + min-width: 275px;
  877 + text-align: left;
  878 +}
  879 +
  880 +.tablecaview .clstheadca tr th {
  881 + min-width: 275px;
  882 + text-align: left;
  883 +}
  884 +
  885 +
  886 +.tablecaview .clstbody,.tablecaview .clstbodyca {
  887 + display: block;
  888 + height: 200px;
  889 + width: 100%;
  890 + overflow:scroll;
  891 +}
  892 +
  893 +
  894 +
871 895 .cur-pot {
872 896 cursor:pointer;
873 897 }
... ... @@ -941,10 +965,15 @@ cursor:pointer;
941 965 opacity:0.6;
942 966  
943 967 }
  968 +.disableSubMenu {
  969 + pointer-events: none;
  970 + opacity: 0.6;
  971 +}
944 972  
945 973 .blankshapediv
946 974 {
947 975 background-image: url("../../../../../content/images/blank-shapes.png");
  976 +background-size:cover;
948 977 }
949 978 .outlinediv
950 979 {
... ... @@ -966,4 +995,23 @@ background-image: url(&quot;../../../../../content/images/blank-shapes.png&quot;);
966 995 /*Bug #8679*/
967 996 .selected {
968 997 background-color: lightgrey;
969   - }
970 998 \ No newline at end of file
  999 + }
  1000 +
  1001 + .disableHideShowStructure
  1002 + {
  1003 + background:#4b4b4b !important;
  1004 + border-color:#3f3f3f !important;
  1005 + }
  1006 +.btn-annotation-erase:hover
  1007 + {
  1008 + color: #fff;
  1009 + }
  1010 + .btn-annotation-brush:hover
  1011 + {
  1012 + color: #fff;
  1013 + }
  1014 + .fa-eraser,.fa-paint-brush
  1015 + {
  1016 + color: #fff;
  1017 + }
  1018 +
... ...