ADAM / AIAHTML5

Commit 6f506a63fd71c219a7e95dd28a9be2f5ff574a0c

Authored by Nikita Kulshreshtha
2 parents 38211d73 6b9edcfe

Merge branch 'AnnotationDawingDetectMode_Merge' into Develop

Inline Side-by-side
Showing 2 changed files with 475 additions and 420 deletions
400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js
  View file @6f506a6
@@ -7314,6 +7314,8 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo @@ -7314,6 +7314,8 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
7314 $('#termList option[value="' + $rootScope.searchSelectedText + '"]').prop("selected", true); 7314 $('#termList option[value="' + $rootScope.searchSelectedText + '"]').prop("selected", true);
7315 $("#termList").find("option").css({ "background-color": "#ffffff", "color": "#000000" }); 7315 $("#termList").find("option").css({ "background-color": "#ffffff", "color": "#000000" });
7316 $('#termList option[value="' + $rootScope.searchSelectedText + '"]').css({ "background-color": "#3399FF", "color": "#ffffff" }); 7316 $('#termList option[value="' + $rootScope.searchSelectedText + '"]').css({ "background-color": "#3399FF", "color": "#ffffff" });
  7317 +
  7318 +
7317 $rootScope.isLoading = true; 7319 $rootScope.isLoading = true;
7318 7320
7319 $('#spinner').css('visibility', 'visible'); 7321 $('#spinner').css('visibility', 'visible');
400-SOURCECODE/AIAHTML5.Web/app/controllers/HomeController.js
  View file @6f506a6
@@ -64,7 +64,6 @@ AIA.controller("HomeController", ["$rootScope", "Modules", "$log", "$location", @@ -64,7 +64,6 @@ AIA.controller("HomeController", ["$rootScope", "Modules", "$log", "$location",
64 64
65 $rootScope.isEraseToolSelected = false; 65 $rootScope.isEraseToolSelected = false;
66 $rootScope.isMousedownOnPaintCanvas = false; 66 $rootScope.isMousedownOnPaintCanvas = false;
67 -  
68 //opacity code 67 //opacity code
69 $rootScope.shapestyleOpacity = 1; 68 $rootScope.shapestyleOpacity = 1;
70 $rootScope.shapestyleFillColor = "#fff"; 69 $rootScope.shapestyleFillColor = "#fff";
@@ -538,62 +537,67 @@ AIA.controller("HomeController", ["$rootScope", "Modules", "$log", "$location", @@ -538,62 +537,67 @@ AIA.controller("HomeController", ["$rootScope", "Modules", "$log", "$location",
538 537
539 //--Common code of Annotation Toolbar for CI and DA------- 538 //--Common code of Annotation Toolbar for CI and DA-------
540 $rootScope.DrawLineOnModuleItem = function (canvasId, LineNumber, shapestyleborderColor, shapestyleborderWidth, offsetX1, offsetY1, x, y) { 539 $rootScope.DrawLineOnModuleItem = function (canvasId, LineNumber, shapestyleborderColor, shapestyleborderWidth, offsetX1, offsetY1, x, y) {
541 - $(canvasId).addLayer({  
542 - name: 'Line_' + LineNumber,  
543 - layer: true,  
544 - type: 'line',  
545 - draggable: true,  
546 - strokeStyle: shapestyleborderColor,  
547 - strokeWidth: shapestyleborderWidth,  
548 - rounded: true,  
549 - x1: offsetX1, y1: offsetY1,  
550 - x2: x, y2: y,  
551 -  
552 - click: function (layer) {  
553 - $rootScope.canvasLayerNameCollection = [];  
554 - $rootScope.canvasLayerNameCollection.push(layer.name);  
555 - $(canvasId).setLayer(layer.name, {  
556 - handle: {  
557 - type: 'arc',  
558 - fillStyle: '#fff',  
559 - strokeStyle: '#c33',  
560 - strokeWidth: 2,  
561 - radius: 3  
562 - }  
563 - }).drawLayers();  
564 -  
565 -  
566 - },  
567 - mouseout: function (layer) {  
568 - $rootScope.canvasLayerNameCollection = [];  
569 - $(canvasId).setLayer(layer.name, {  
570 - handle: {  
571 - type: 'arc',  
572 - fillStyle: '#fff',  
573 - strokeStyle: '#c33',  
574 - strokeWidth: 0,  
575 - radius: 0  
576 - }  
577 -  
578 - }).drawLayers();  
579 -  
580 - },  
581 - mouseover: function (layer) {  
582 -  
583 -  
584 - $(canvasId).setLayer(layer.name, {  
585 - handle: {  
586 - type: 'arc',  
587 - fillStyle: '#fff',  
588 - strokeStyle: '#c33',  
589 - strokeWidth: 2,  
590 - radius: 3  
591 - }  
592 - }).drawLayers(); 540 + if ($rootScope.isLinePreviewCompleted == true) {
  541 + $rootScope.isLinePreviewCompleted = false;
  542 + $(canvasId).addLayer({
  543 + name: 'Line_' + LineNumber,
  544 + layer: true,
  545 + type: 'line',
  546 + draggable: true,
  547 + strokeStyle: shapestyleborderColor,
  548 + strokeWidth: shapestyleborderWidth,
  549 + rounded: true,
  550 + x1: offsetX1, y1: offsetY1,
  551 + x2: x, y2: y,
593 552
594 - } 553 + click: function (layer) {
  554 + $rootScope.canvasLayerNameCollection = [];
  555 + $rootScope.canvasLayerNameCollection.push(layer.name);
  556 + $(canvasId).setLayer(layer.name, {
  557 + handle: {
  558 + type: 'arc',
  559 + fillStyle: '#fff',
  560 + strokeStyle: '#c33',
  561 + strokeWidth: 2,
  562 + radius: 3
  563 + }
  564 + }).drawLayers();
595 565
596 - }).drawLayers(); 566 +
  567 + },
  568 + mouseout: function (layer) {
  569 + $rootScope.canvasLayerNameCollection = [];
  570 + $(canvasId).setLayer(layer.name, {
  571 + handle: {
  572 + type: 'arc',
  573 + fillStyle: '#fff',
  574 + strokeStyle: '#c33',
  575 + strokeWidth: 0,
  576 + radius: 0
  577 + }
  578 +
  579 + }).drawLayers();
  580 +
  581 + },
  582 + mouseover: function (layer) {
  583 +
  584 +
  585 + $(canvasId).setLayer(layer.name, {
  586 + handle: {
  587 + type: 'arc',
  588 + fillStyle: '#fff',
  589 + strokeStyle: '#c33',
  590 + strokeWidth: 2,
  591 + radius: 3
  592 + }
  593 + }).drawLayers();
  594 +
  595 + }
  596 +
  597 + }).drawLayers();
  598 +
  599 + }
  600 +
597 601
598 $('.btnCursor').trigger('click'); 602 $('.btnCursor').trigger('click');
599 $(".btn-annotation").removeClass("activebtncolor"); 603 $(".btn-annotation").removeClass("activebtncolor");
@@ -601,72 +605,75 @@ AIA.controller("HomeController", ["$rootScope", "Modules", "$log", "$location", @@ -601,72 +605,75 @@ AIA.controller("HomeController", ["$rootScope", "Modules", "$log", "$location",
601 } 605 }
602 606
603 $rootScope.DrawRectangleOnModuleItem = function (canvasId, RectNumber, shapestyleFillColor, shapestyleborderColor, shapestyleOpacity, shapestyleborderWidth, offsetX1, offsetY1, x, y) { 607 $rootScope.DrawRectangleOnModuleItem = function (canvasId, RectNumber, shapestyleFillColor, shapestyleborderColor, shapestyleOpacity, shapestyleborderWidth, offsetX1, offsetY1, x, y) {
604 -  
605 - $(canvasId).addLayer({  
606 - layer: true,  
607 - name: 'Rect_' + RectNumber,  
608 - fillStyle: shapestyleFillColor,  
609 - type: 'rectangle',  
610 - draggable: true,  
611 - strokeStyle: shapestyleborderColor,  
612 - opacity: shapestyleOpacity,  
613 - strokeWidth: shapestyleborderWidth,  
614 - x: offsetX1, y: offsetY1,  
615 - width: x - offsetX1,  
616 - height: y - offsetY1, 608 + if ($rootScope.isRectanglePreviewCompleted == true) {
  609 + $rootScope.isRectanglePreviewCompleted = false;
  610 + $(canvasId).addLayer({
  611 + layer: true,
  612 + name: 'Rect_' + RectNumber,
  613 + fillStyle: shapestyleFillColor,
  614 + type: 'rectangle',
  615 + draggable: true,
  616 + strokeStyle: shapestyleborderColor,
  617 + opacity: shapestyleOpacity,
  618 + strokeWidth: shapestyleborderWidth,
  619 + fromCenter: false,
  620 + x: offsetX1, y: offsetY1,
  621 + width: (x - offsetX1),
  622 + height: (y - offsetY1),
617 623
618 resizeFromCenter: true, 624 resizeFromCenter: true,
619 625
620 dblclick: function () { 626 dblclick: function () {
621 627
622 - },  
623 -  
624 - click: function (layer) {  
625 - $rootScope.canvasLayerNameCollection = [];  
626 - $rootScope.canvasLayerNameCollection.push(layer.name);  
627 - $(canvasId).setLayer(layer.name, {  
628 - handle: {  
629 - type: 'rectangle',  
630 - fillStyle: '#fff',  
631 - strokeStyle: '#c33',  
632 - strokeWidth: 2,  
633 - width: 5, height: 5,  
634 - cornerRadius: 3  
635 - }  
636 - }).drawLayers();  
637 -  
638 - },  
639 - mouseout: function (layer) {  
640 - $rootScope.canvasLayerNameCollection = [];  
641 - $(canvasId).setLayer(layer.name, {  
642 - handle: {  
643 - type: 'rectangle',  
644 - fillStyle: 'pink',  
645 - strokeStyle: 'yellow',  
646 - strokeWidth: 0,  
647 - width: 0, height: 0,  
648 - cornerRadius: 0  
649 - }  
650 -  
651 - }).drawLayers();  
652 -  
653 - },  
654 - mouseover: function (layer) {  
655 -  
656 -  
657 - $(canvasId).setLayer(layer.name, {  
658 - handle: {  
659 - type: 'rectangle',  
660 - fillStyle: '#fff',  
661 - strokeStyle: '#c33',  
662 - strokeWidth: 2,  
663 - width: 5, height: 5,  
664 - cornerRadius: 3  
665 - }  
666 - }).drawLayers(); 628 + },
  629 +
  630 + click: function (layer) {
  631 + $rootScope.canvasLayerNameCollection = [];
  632 + $rootScope.canvasLayerNameCollection.push(layer.name);
  633 + $(canvasId).setLayer(layer.name, {
  634 + handle: {
  635 + type: 'rectangle',
  636 + fillStyle: '#fff',
  637 + strokeStyle: '#c33',
  638 + strokeWidth: 2,
  639 + width: 5, height: 5,
  640 + cornerRadius: 3
  641 + }
  642 + }).drawLayers();
  643 +
  644 + },
  645 + mouseout: function (layer) {
  646 + $rootScope.canvasLayerNameCollection = [];
  647 + $(canvasId).setLayer(layer.name, {
  648 + handle: {
  649 + type: 'rectangle',
  650 + fillStyle: 'pink',
  651 + strokeStyle: 'yellow',
  652 + strokeWidth: 0,
  653 + width: 0, height: 0,
  654 + cornerRadius: 0
  655 + }
667 656
668 - }  
669 - }).drawLayers(); 657 + }).drawLayers();
  658 +
  659 + },
  660 + mouseover: function (layer) {
  661 +
  662 +
  663 + $(canvasId).setLayer(layer.name, {
  664 + handle: {
  665 + type: 'rectangle',
  666 + fillStyle: '#fff',
  667 + strokeStyle: '#c33',
  668 + strokeWidth: 2,
  669 + width: 5, height: 5,
  670 + cornerRadius: 3
  671 + }
  672 + }).drawLayers();
  673 +
  674 + }
  675 + }).drawLayers();
  676 + }
670 $('.btnCursor').trigger('click'); 677 $('.btnCursor').trigger('click');
671 $(".btn-annotation").removeClass("activebtncolor"); 678 $(".btn-annotation").removeClass("activebtncolor");
672 $('.btnCursor').addClass('activebtncolor'); 679 $('.btnCursor').addClass('activebtncolor');
@@ -674,146 +681,150 @@ AIA.controller("HomeController", ["$rootScope", "Modules", "$log", "$location", @@ -674,146 +681,150 @@ AIA.controller("HomeController", ["$rootScope", "Modules", "$log", "$location",
674 } 681 }
675 682
676 $rootScope.DrawCircleOnModuleItem = function (canvasId, CircleNumber, shapestyleOpacity, shapestyleborderColor, shapestyleborderWidth, shapestyleFillColor, offsetX1, offsetY1, x, y) { 683 $rootScope.DrawCircleOnModuleItem = function (canvasId, CircleNumber, shapestyleOpacity, shapestyleborderColor, shapestyleborderWidth, shapestyleFillColor, offsetX1, offsetY1, x, y) {
  684 + // console.log("up"+ offsetX1 + " " + offsetY1 + " " + (x - offsetX1) + " " + (y - offsetY1));
  685 + if ($rootScope.isCirclePreviewCompleted == true) {
  686 + $rootScope.isCirclePreviewCompleted = false;
  687 + $(canvasId).addLayer({
  688 + layer: true,
  689 + name: 'Circle_' + CircleNumber,
  690 + type: 'ellipse',
  691 + opacity: shapestyleOpacity,
  692 + draggable: true,
  693 + strokeStyle: shapestyleborderColor,
  694 + strokeWidth: shapestyleborderWidth,
  695 + fillStyle: shapestyleFillColor,
  696 + fromCenter: false,
  697 + x: (offsetX1), y: (offsetY1),
  698 + width: (x - offsetX1), height: (y - offsetY1),
  699 + // Place a handle at each side and each corner
  700 + handlePlacement: 'both',
  701 + click: function (layer) {
  702 + $rootScope.canvasLayerNameCollection = [];
  703 + $rootScope.canvasLayerNameCollection.push(layer.name);
  704 + $(canvasId).setLayer(layer.name, {
  705 + handle: {
  706 + type: 'arc',
  707 + fillStyle: '#fff',
  708 + strokeStyle: '#c33',
  709 + strokeWidth: 2,
  710 + radius: 3
  711 + }
  712 + }).drawLayers();
677 713
678 - $(canvasId).addLayer({  
679 - layer: true,  
680 - name: 'Circle_' + CircleNumber,  
681 - type: 'ellipse',  
682 - opacity: shapestyleOpacity,  
683 - draggable: true,  
684 - strokeStyle: shapestyleborderColor,  
685 - strokeWidth: shapestyleborderWidth,  
686 - fillStyle: shapestyleFillColor,  
687 - x: offsetX1, y: offsetY1,  
688 - width: (x - offsetX1) * 2, height: (y - offsetY1) * 2,  
689 - // Place a handle at each side and each corner  
690 - handlePlacement: 'both',  
691 - click: function (layer) {  
692 -  
693 - $rootScope.canvasLayerNameCollection = [];  
694 - $rootScope.canvasLayerNameCollection.push(layer.name);  
695 - $(canvasId).setLayer(layer.name, {  
696 - handle: {  
697 - type: 'arc',  
698 - fillStyle: '#fff',  
699 - strokeStyle: '#c33',  
700 - strokeWidth: 2,  
701 - radius: 3  
702 - }  
703 - }).drawLayers();  
704 -  
705 - },  
706 - mouseout: function (layer) {  
707 - $rootScope.canvasLayerNameCollection = [];  
708 -  
709 - $(canvasId).setLayer(layer.name, {  
710 - handle: {  
711 - type: 'arc',  
712 - fillStyle: '#fff',  
713 - strokeStyle: '#c33',  
714 - strokeWidth: 0,  
715 - // width: 0, height: 0,  
716 - radius: 0  
717 - }  
718 -  
719 - }).drawLayers();  
720 -  
721 - },  
722 - mouseover: function (layer) {  
723 -  
724 -  
725 - $(canvasId).setLayer(layer.name, {  
726 - handle: {  
727 - type: 'arc',  
728 - fillStyle: '#fff',  
729 - strokeStyle: '#c33',  
730 - strokeWidth: 2,  
731 - // width: 5, height: 5,  
732 - radius: 3  
733 - }  
734 - }).drawLayers(); 714 + },
  715 + mouseout: function (layer) {
  716 + $rootScope.canvasLayerNameCollection = [];
735 717
736 - }  
737 - }).drawLayers(); 718 + $(canvasId).setLayer(layer.name, {
  719 + handle: {
  720 + type: 'arc',
  721 + fillStyle: '#fff',
  722 + strokeStyle: '#c33',
  723 + strokeWidth: 0,
  724 + // width: 0, height: 0,
  725 + radius: 0
  726 + }
  727 +
  728 + }).drawLayers();
  729 +
  730 + },
  731 + mouseover: function (layer) {
  732 +
  733 +
  734 + $(canvasId).setLayer(layer.name, {
  735 + handle: {
  736 + type: 'arc',
  737 + fillStyle: '#fff',
  738 + strokeStyle: '#c33',
  739 + strokeWidth: 2,
  740 + // width: 5, height: 5,
  741 + radius: 3
  742 + }
  743 + }).drawLayers();
  744 +
  745 + }
  746 + }).drawLayers();
  747 + }
738 $('.btnCursor').trigger('click'); 748 $('.btnCursor').trigger('click');
739 $(".btn-annotation").removeClass("activebtncolor"); 749 $(".btn-annotation").removeClass("activebtncolor");
740 $('.btnCursor').addClass('activebtncolor'); 750 $('.btnCursor').addClass('activebtncolor');
741 } 751 }
742 752
743 $rootScope.DrawArrowOnModuleItem = function (canvasId, ArrowNumber, shapestyleborderColor, shapestyleborderWidth, offsetX1, offsetY1, x, y) { 753 $rootScope.DrawArrowOnModuleItem = function (canvasId, ArrowNumber, shapestyleborderColor, shapestyleborderWidth, offsetX1, offsetY1, x, y) {
  754 + if ($rootScope.isArrowPreviewCompleted == true) {
  755 + $rootScope.isArrowPreviewCompleted = false;
  756 + $('#canvas').drawLine({
  757 + layer: true,
  758 + name: 'Arrow_' + ArrowNumber,
  759 + draggable: true,
  760 + strokeStyle: shapestyleborderColor,
  761 + strokeWidth: shapestyleborderWidth,
  762 + rounded: true,
  763 + startArrow: true,
  764 + arrowRadius: 7,
  765 + arrowAngle: 90,
  766 + x1: offsetX1, y1: offsetY1,
  767 + x2: x, y2: y,
744 768
745 - $('#canvas').drawLine({  
746 - layer: true,  
747 - name: 'Arrow_' + ArrowNumber,  
748 - draggable: true,  
749 - strokeStyle: shapestyleborderColor,  
750 - strokeWidth: shapestyleborderWidth,  
751 - rounded: true,  
752 - startArrow: true,  
753 - arrowRadius: 7,  
754 - arrowAngle: 90,  
755 - x1: offsetX1, y1: offsetY1,  
756 - x2: x, y2: y,  
757 -  
758 - click: function (layer) {  
759 - $rootScope.canvasLayerNameCollection = [];  
760 - $rootScope.canvasLayerNameCollection.push(layer.name);  
761 - $(canvasId).setLayer(layer.name, {  
762 - handle: {  
763 - type: 'arc',  
764 - fillStyle: '#fff',  
765 - strokeStyle: '#c33',  
766 - strokeWidth: 2,  
767 - // width: 5, height: 5,  
768 - radius: 3  
769 - }  
770 - }).drawLayers();  
771 - // $("#canvas").removeLayer(layer.name).drawLayers();  
772 -  
773 - },  
774 - mouseout: function (layer) {  
775 - $rootScope.canvasLayerNameCollection = [];  
776 - $(canvasId).setLayer(layer.name, {  
777 - handle: {  
778 - type: 'arc',  
779 - fillStyle: '#fff',  
780 - strokeStyle: '#c33',  
781 - strokeWidth: 0,  
782 - // width: 0, height: 0,  
783 - radius: 0  
784 - }  
785 -  
786 - }).drawLayers();  
787 -  
788 - },  
789 - mouseover: function (layer) {  
790 -  
791 -  
792 - $(canvasId).setLayer(layer.name, {  
793 - handle: {  
794 - type: 'arc',  
795 - fillStyle: '#fff',  
796 - strokeStyle: '#c33',  
797 - strokeWidth: 2,  
798 - // width: 5, height: 5,  
799 - radius: 3  
800 - }  
801 - }).drawLayers(); 769 + click: function (layer) {
  770 + $rootScope.canvasLayerNameCollection = [];
  771 + $rootScope.canvasLayerNameCollection.push(layer.name);
  772 + $(canvasId).setLayer(layer.name, {
  773 + handle: {
  774 + type: 'arc',
  775 + fillStyle: '#fff',
  776 + strokeStyle: '#c33',
  777 + strokeWidth: 2,
  778 + // width: 5, height: 5,
  779 + radius: 3
  780 + }
  781 + }).drawLayers();
  782 + // $("#canvas").removeLayer(layer.name).drawLayers();
802 783
803 - } 784 + },
  785 + mouseout: function (layer) {
  786 + $rootScope.canvasLayerNameCollection = [];
  787 + $(canvasId).setLayer(layer.name, {
  788 + handle: {
  789 + type: 'arc',
  790 + fillStyle: '#fff',
  791 + strokeStyle: '#c33',
  792 + strokeWidth: 0,
  793 + // width: 0, height: 0,
  794 + radius: 0
  795 + }
804 796
805 - }); 797 + }).drawLayers();
  798 +
  799 + },
  800 + mouseover: function (layer) {
  801 +
  802 +
  803 + $(canvasId).setLayer(layer.name, {
  804 + handle: {
  805 + type: 'arc',
  806 + fillStyle: '#fff',
  807 + strokeStyle: '#c33',
  808 + strokeWidth: 2,
  809 + // width: 5, height: 5,
  810 + radius: 3
  811 + }
  812 + }).drawLayers();
  813 +
  814 + }
  815 +
  816 + });
  817 + }
  818 +
806 $('.btnCursor').trigger('click'); 819 $('.btnCursor').trigger('click');
807 $(".btn-annotation").removeClass("activebtncolor"); 820 $(".btn-annotation").removeClass("activebtncolor");
808 $('.btnCursor').addClass('activebtncolor'); 821 $('.btnCursor').addClass('activebtncolor');
809 } 822 }
810 823
811 $rootScope.DrawPinOnModuleItem = function (canvasId, PinNumber, offsetX1, offsetY1, x, y, PinArcNumber) { 824 $rootScope.DrawPinOnModuleItem = function (canvasId, PinNumber, offsetX1, offsetY1, x, y, PinArcNumber) {
812 -  
813 - var xAxisPinDiff = offsetX1 - x;  
814 - var yAxisPinDiff = offsetY1 - y;  
815 - if (xAxisPinDiff != 0 && yAxisPinDiff != 0)  
816 - { 825 +
  826 + if ($rootScope.isPinPreviewCompleted == true) {
  827 + $rootScope.isPinPreviewCompleted = false;
817 var radial = $('#canvas').createGradient({ 828 var radial = $('#canvas').createGradient({
818 x1: 50, y1: 50, 829 x1: 50, y1: 50,
819 x2: 50, y2: 50, 830 x2: 50, y2: 50,
@@ -911,17 +922,16 @@ AIA.controller("HomeController", ["$rootScope", "Modules", "$log", "$location", @@ -911,17 +922,16 @@ AIA.controller("HomeController", ["$rootScope", "Modules", "$log", "$location",
911 922
912 }).drawLayers(); 923 }).drawLayers();
913 } 924 }
914 - 925 +
  926 +
915 $('.btnCursor').trigger('click'); 927 $('.btnCursor').trigger('click');
916 $(".btn-annotation").removeClass("activebtncolor"); 928 $(".btn-annotation").removeClass("activebtncolor");
917 $('.btnCursor').addClass('activebtncolor'); 929 $('.btnCursor').addClass('activebtncolor');
918 } 930 }
919 931
920 $rootScope.TextEditorFunctionality = function (canvasId, TextNumber, offsetX1, offsetY1, resetTextRect, shapestyleOpacity, shapestyleborderColor, shapestyleborderWidth, shapestyleFillColor, x, y) { 932 $rootScope.TextEditorFunctionality = function (canvasId, TextNumber, offsetX1, offsetY1, resetTextRect, shapestyleOpacity, shapestyleborderColor, shapestyleborderWidth, shapestyleFillColor, x, y) {
921 -  
922 -  
923 - debugger;  
924 - 933 + if ($rootScope.isTextAreaPreviewCompleted == true) {
  934 + $rootScope.isTextAreaPreviewCompleted = false;
925 $('#canvas').drawText({ 935 $('#canvas').drawText({
926 layer: true, 936 layer: true,
927 draggable: true, 937 draggable: true,
@@ -932,6 +942,7 @@ AIA.controller("HomeController", ["$rootScope", "Modules", "$log", "$location", @@ -932,6 +942,7 @@ AIA.controller("HomeController", ["$rootScope", "Modules", "$log", "$location",
932 fillStyle: '#36c', 942 fillStyle: '#36c',
933 strokeWidth: 0, 943 strokeWidth: 0,
934 x: $rootScope.offsetX1, y: $rootScope.offsetY1, 944 x: $rootScope.offsetX1, y: $rootScope.offsetY1,
  945 + fromCenter: false,
935 fontSize: '14pt', 946 fontSize: '14pt',
936 align: "left", 947 align: "left",
937 fontFamily: 'Verdana, sans-serif', 948 fontFamily: 'Verdana, sans-serif',
@@ -943,117 +954,119 @@ AIA.controller("HomeController", ["$rootScope", "Modules", "$log", "$location", @@ -943,117 +954,119 @@ AIA.controller("HomeController", ["$rootScope", "Modules", "$log", "$location",
943 954
944 955
945 }) 956 })
946 - // Draw rect as wide as the text  
947 - .drawRect({  
948 - layer: true,  
949 - name: "TextRect_" + $rootScope.TextNumber,  
950 - dragGroups: ['shapes'],  
951 - opacity: $rootScope.shapestyleOpacity,  
952 - strokeStyle: $rootScope.shapestyleborderColor,  
953 - strokeWidth: $rootScope.shapestyleborderWidth,  
954 - fillStyle: $rootScope.shapestyleFillColor,  
955 - x: $rootScope.offsetX1, y: $rootScope.offsetY1,  
956 - width: $rootScope.x - $rootScope.offsetX1,  
957 - height: $rootScope.y - $rootScope.offsetY1,  
958 - add: function (layer) {  
959 -  
960 - $rootScope.TextAreaRectID = layer.name;  
961 - $rootScope.rectDimension.push({ width: layer.width, height: layer.height, x: layer.x, y: layer.y });  
962 - $rootScope.CurrentWidth = layer.width;  
963 - $rootScope.CurrentHeight = layer.height;  
964 -  
965 - },  
966 - click: function (layer) {  
967 -  
968 - $rootScope.canvasLayerNameCollection = [];  
969 - $rootScope.canvasLayerNameCollection.push(layer.name);  
970 - $('#canvas').setLayer(layer.name, {  
971 - handle: {  
972 - type: 'rectangle',  
973 - fillStyle: '#fff',  
974 - strokeStyle: '#c33',  
975 - strokeWidth: 2,  
976 - width: 5, height: 5,  
977 - cornerRadius: 3  
978 - }  
979 - }).drawLayers();  
980 -  
981 - },  
982 - dblclick: function (layer) {  
983 -  
984 - $rootScope.IsTextAlreadySave = false;  
985 - var RectNameArray = (layer.name).split("_");  
986 -  
987 - var TextAreaRectangleName = "TextArea_";  
988 - var TextAreaRectNameConcat = TextAreaRectangleName.concat(RectNameArray[1]);  
989 - $rootScope.TextAreaRectID = layer.name;  
990 - $rootScope.TextID = TextAreaRectNameConcat;  
991 -  
992 - $rootScope.rectDimension.push({ width: layer.width, height: layer.height, x: layer.x, y: layer.y });  
993 - $("#annotationTextModal").css("padding-right", "0px");  
994 - document.getElementById('modelbackground').style.display = "block";  
995 - $("#annotationTextModal").modal("toggle");  
996 -  
997 - $("#text_area").val('');  
998 - $("#text_area").css({ "font-family": "Arial", "font-size": "14px", "font-weight": "normal", "font-style": "normal", "color": "#000", "text-align": "left", "text-decoration": "none" });  
999 - $("#font-color .minicolors .minicolors-swatch .minicolors-swatch-color").css({ "background-color": "#000000" });  
1000 - // $("#font-color .minicolors .minicolors-swatch .minicolors-swatch-color").addClass("ActiveDefaultColorAnnotation");  
1001 -  
1002 - $("#selected-font-family option:eq(0)").prop('selected', true);  
1003 - $("#selected-font-size option:eq(0)").prop('selected', true);  
1004 -  
1005 - $("#text-italic").removeClass("ActiveFormattingButtonClass");  
1006 -  
1007 - $("#text-bold").removeClass("ActiveFormattingButtonClass"); 957 + // Draw rect as wide as the text
  958 + .drawRect({
  959 + layer: true,
  960 + name: "TextRect_" + $rootScope.TextNumber,
  961 + dragGroups: ['shapes'],
  962 + opacity: $rootScope.shapestyleOpacity,
  963 + strokeStyle: $rootScope.shapestyleborderColor,
  964 + fromCenter: false,
  965 + strokeWidth: $rootScope.shapestyleborderWidth,
  966 + fillStyle: $rootScope.shapestyleFillColor,
  967 + x: $rootScope.offsetX1, y: $rootScope.offsetY1,
  968 + width: ($rootScope.x - $rootScope.offsetX1),
  969 + height: ($rootScope.y - $rootScope.offsetY1),
  970 + add: function (layer) {
  971 +
  972 + $rootScope.TextAreaRectID = layer.name;
  973 + $rootScope.rectDimension.push({ width: layer.width, height: layer.height, x: layer.x, y: layer.y });
  974 + // $rootScope.CurrentWidth = layer.width;
  975 + // $rootScope.CurrentHeight = layer.height;
  976 +
  977 + },
  978 + click: function (layer) {
  979 +
  980 + $rootScope.canvasLayerNameCollection = [];
  981 + $rootScope.canvasLayerNameCollection.push(layer.name);
  982 + $('#canvas').setLayer(layer.name, {
  983 + handle: {
  984 + type: 'rectangle',
  985 + fillStyle: '#fff',
  986 + strokeStyle: '#c33',
  987 + strokeWidth: 2,
  988 + width: 5, height: 5,
  989 + cornerRadius: 3
  990 + }
  991 + }).drawLayers();
  992 +
  993 + },
  994 + dblclick: function (layer) {
  995 +
  996 + $rootScope.IsTextAlreadySave = false;
  997 + var RectNameArray = (layer.name).split("_");
  998 +
  999 + var TextAreaRectangleName = "TextArea_";
  1000 + var TextAreaRectNameConcat = TextAreaRectangleName.concat(RectNameArray[1]);
  1001 + $rootScope.TextAreaRectID = layer.name;
  1002 + $rootScope.TextID = TextAreaRectNameConcat;
  1003 +
  1004 + $rootScope.rectDimension.push({ width: layer.width, height: layer.height, x: layer.x, y: layer.y });
  1005 + $("#annotationTextModal").css("padding-right", "0px");
  1006 + document.getElementById('modelbackground').style.display = "block";
  1007 + $("#annotationTextModal").modal("toggle");
  1008 +
  1009 + $("#text_area").val('');
  1010 + $("#text_area").css({ "font-family": "Arial", "font-size": "14px", "font-weight": "normal", "font-style": "normal", "color": "#000", "text-align": "left", "text-decoration": "none" });
  1011 + $("#font-color .minicolors .minicolors-swatch .minicolors-swatch-color").css({ "background-color": "#000000" });
  1012 + // $("#font-color .minicolors .minicolors-swatch .minicolors-swatch-color").addClass("ActiveDefaultColorAnnotation");
  1013 +
  1014 + $("#selected-font-family option:eq(0)").prop('selected', true);
  1015 + $("#selected-font-size option:eq(0)").prop('selected', true);
  1016 +
  1017 + $("#text-italic").removeClass("ActiveFormattingButtonClass");
  1018 +
  1019 + $("#text-bold").removeClass("ActiveFormattingButtonClass");
  1020 +
  1021 + $("#text-underline").removeClass("ActiveFormattingButtonClass");
  1022 +
  1023 + $("#text-left").removeClass("ActiveFormattingButtonClass");
  1024 +
  1025 + $("#text-right").removeClass("ActiveFormattingButtonClass");
  1026 +
  1027 + $("#text-center").removeClass("ActiveFormattingButtonClass");
  1028 +
  1029 + },
  1030 + mouseout: function (layer) {
  1031 + $rootScope.canvasLayerNameCollection = [];
  1032 + $('#canvas').setLayer(layer.name, {
  1033 + handle: {
  1034 + type: 'rectangle',
  1035 + fillStyle: 'pink',
  1036 + strokeStyle: 'yellow',
  1037 + strokeWidth: 0,
  1038 + width: 0, height: 0,
  1039 + cornerRadius: 0
  1040 + }
  1041 +
  1042 + }).drawLayers();
  1043 +
  1044 + },
  1045 + mouseover: function (layer) {
  1046 +
  1047 + $('#canvas').setLayer(layer.name, {
  1048 + handle: {
  1049 + type: 'rectangle',
  1050 + fillStyle: '#fff',
  1051 + strokeStyle: '#c33',
  1052 + strokeWidth: 2,
  1053 + width: 5, height: 5,
  1054 + cornerRadius: 3
  1055 + }
  1056 + }).drawLayers();
1008 1057
1009 - $("#text-underline").removeClass("ActiveFormattingButtonClass");  
1010 -  
1011 - $("#text-left").removeClass("ActiveFormattingButtonClass");  
1012 -  
1013 - $("#text-right").removeClass("ActiveFormattingButtonClass");  
1014 -  
1015 - $("#text-center").removeClass("ActiveFormattingButtonClass");  
1016 -  
1017 - },  
1018 - mouseout: function (layer) {  
1019 - $rootScope.canvasLayerNameCollection = [];  
1020 - $('#canvas').setLayer(layer.name, {  
1021 - handle: {  
1022 - type: 'rectangle',  
1023 - fillStyle: 'pink',  
1024 - strokeStyle: 'yellow',  
1025 - strokeWidth: 0,  
1026 - width: 0, height: 0,  
1027 - cornerRadius: 0  
1028 - }  
1029 -  
1030 - }).drawLayers();  
1031 -  
1032 - },  
1033 - mouseover: function (layer) { 1058 + }
  1059 + });
1034 1060
1035 - $('#canvas').setLayer(layer.name, {  
1036 - handle: {  
1037 - type: 'rectangle',  
1038 - fillStyle: '#fff',  
1039 - strokeStyle: '#c33',  
1040 - strokeWidth: 2,  
1041 - width: 5, height: 5,  
1042 - cornerRadius: 3  
1043 - }  
1044 - }).drawLayers();  
1045 1061
1046 - }  
1047 - }); 1062 +
1048 // Annotation: Edit Text option is missing. 1063 // Annotation: Edit Text option is missing.
1049 - // alert($rootScope.CurrentWidth);  
1050 - // alert($rootScope.CurrentHeight);  
1051 $("#annotationTextModal").css("padding-right", "0px"); 1064 $("#annotationTextModal").css("padding-right", "0px");
1052 - if (($rootScope.CurrentWidth > 0 && $rootScope.CurrentHeight > 0) || ($rootScope.CurrentWidth > 0 && $rootScope.CurrentHeight <= 0) || ($rootScope.CurrentWidth <= 0 && $rootScope.CurrentHeight > 0)) {  
1053 - $("#annotationTextModal").modal("toggle");  
1054 - document.getElementById('modelbackground').style.display = "block";  
1055 - }  
1056 - $('.btnCursor').trigger('click'); 1065 + $("#annotationTextModal").modal("toggle");
  1066 + document.getElementById('modelbackground').style.display = "block";
  1067 +
  1068 + }
  1069 + $('.btnCursor').trigger('click');
1057 $("#font-color .minicolors .minicolors-swatch .minicolors-swatch-color").css({ "background-color": "#000000" }); 1070 $("#font-color .minicolors .minicolors-swatch .minicolors-swatch-color").css({ "background-color": "#000000" });
1058 1071
1059 $("#text_area").val(''); 1072 $("#text_area").val('');
@@ -1081,8 +1094,6 @@ AIA.controller(&quot;HomeController&quot;, [&quot;$rootScope&quot;, &quot;Modules&quot;, &quot;$log&quot;, &quot;$location&quot;, @@ -1081,8 +1094,6 @@ AIA.controller(&quot;HomeController&quot;, [&quot;$rootScope&quot;, &quot;Modules&quot;, &quot;$log&quot;, &quot;$location&quot;,
1081 1094
1082 $('.btnCursor').addClass('activebtncolor'); 1095 $('.btnCursor').addClass('activebtncolor');
1083 1096
1084 -  
1085 -  
1086 } 1097 }
1087 1098
1088 1099
@@ -1104,15 +1115,16 @@ AIA.controller(&quot;HomeController&quot;, [&quot;$rootScope&quot;, &quot;Modules&quot;, &quot;$log&quot;, &quot;$location&quot;, @@ -1104,15 +1115,16 @@ AIA.controller(&quot;HomeController&quot;, [&quot;$rootScope&quot;, &quot;Modules&quot;, &quot;$log&quot;, &quot;$location&quot;,
1104 // var y = event.clientY; 1115 // var y = event.clientY;
1105 $rootScope.offsetX1 = 0; 1116 $rootScope.offsetX1 = 0;
1106 $rootScope.offsetY1 = 0; 1117 $rootScope.offsetY1 = 0;
  1118 + var canvasDiv = document.getElementById('canvasDiv');
  1119 + var verticalScrollPosition = canvasDiv.scrollTop;
  1120 + var horizontlScrollPosition = canvasDiv.scrollLeft;
1107 $rootScope.offsetX1 = event.offsetX; 1121 $rootScope.offsetX1 = event.offsetX;
1108 $rootScope.offsetY1 = event.offsetY; 1122 $rootScope.offsetY1 = event.offsetY;
1109 -  
1110 ctx.clearRect(0, 0, 2277, 3248); 1123 ctx.clearRect(0, 0, 2277, 3248);
1111 $rootScope.clicked = true; 1124 $rootScope.clicked = true;
1112 -  
1113 // alert("x:"+$rootScope.offsetX1 + " y:" + $rootScope.offsetY1); 1125 // alert("x:"+$rootScope.offsetX1 + " y:" + $rootScope.offsetY1);
  1126 + canvasElement.addEventListener('mousemove', $rootScope.OnPaintCanvasMouseMove, false);
1114 } 1127 }
1115 -  
1116 $rootScope.rectNumber = 0; 1128 $rootScope.rectNumber = 0;
1117 $rootScope.LineNumber = 0; 1129 $rootScope.LineNumber = 0;
1118 $rootScope.CircleNumber = 0; 1130 $rootScope.CircleNumber = 0;
@@ -1129,92 +1141,157 @@ AIA.controller(&quot;HomeController&quot;, [&quot;$rootScope&quot;, &quot;Modules&quot;, &quot;$log&quot;, &quot;$location&quot;, @@ -1129,92 +1141,157 @@ AIA.controller(&quot;HomeController&quot;, [&quot;$rootScope&quot;, &quot;Modules&quot;, &quot;$log&quot;, &quot;$location&quot;,
1129 var arrayRect = {}; 1141 var arrayRect = {};
1130 1142
1131 var storeLine = ''; 1143 var storeLine = '';
1132 - //$rootScope.canvasLayerNameCollection1 = []; 1144 +
1133 $rootScope.OnPaintCanvasMouseUp = function (event) { 1145 $rootScope.OnPaintCanvasMouseUp = function (event) {
1134 1146
1135 if (!$rootScope.clicked) { 1147 if (!$rootScope.clicked) {
1136 return; 1148 return;
1137 } 1149 }
  1150 + var AnnotationCanvas = document.getElementById('canvas');
  1151 + AnnotationCanvas.removeEventListener('mousemove', $rootScope.OnPaintCanvasMouseMove, false);
  1152 +
  1153 + $(".line").remove();
  1154 + $(".arrow").remove();
  1155 + $(".pin").remove();
  1156 + $(".circle").remove();
  1157 + $(".rectangle").remove();
  1158 + $(".textarea").remove();
1138 $rootScope.clicked = false; 1159 $rootScope.clicked = false;
1139 $rootScope.x = 0; 1160 $rootScope.x = 0;
1140 $rootScope.y = 0; 1161 $rootScope.y = 0;
1141 -  
1142 - $rootScope.x = parseInt(event.clientX - ($("#canvas").offset().left));  
1143 - $rootScope.y = parseInt(event.clientY - ($("#canvas").offset().top));  
1144 -  
1145 - 1162 + var canvasDiv = document.getElementById('canvasDiv');
  1163 + var verticalScrollPosition = canvasDiv.scrollTop;
  1164 + var horizontlScrollPosition = canvasDiv.scrollLeft;
  1165 + $rootScope.x = event.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left;
  1166 + $rootScope.y = event.pageY + verticalScrollPosition - $('#canvasDiv').offset().top;
1146 var canvasElement = document.getElementById("canvas"); 1167 var canvasElement = document.getElementById("canvas");
1147 var ctx = canvasElement.getContext("2d"); 1168 var ctx = canvasElement.getContext("2d");
1148 -  
1149 var canvasPaintElement = document.getElementById("canvasPaint"); 1169 var canvasPaintElement = document.getElementById("canvasPaint");
1150 var PaintCanvasctx = canvasPaintElement.getContext("2d"); 1170 var PaintCanvasctx = canvasPaintElement.getContext("2d");
1151 -  
1152 -  
1153 switch ($rootScope.shapeType) { 1171 switch ($rootScope.shapeType) {
1154 -  
1155 case "cursor": 1172 case "cursor":
1156 - // ctx.clearRect(0, 0, 2277, 3248);  
1157 ctx.beginPath(); 1173 ctx.beginPath();
1158 PaintCanvasctx.beginPath(); 1174 PaintCanvasctx.beginPath();
1159 -  
1160 -  
1161 break; 1175 break;
1162 -  
1163 case "Line": 1176 case "Line":
1164 - //$rootScope.canvasLayerNameCollection = [];  
1165 $rootScope.LineNumber = $rootScope.ObjectIndex++; 1177 $rootScope.LineNumber = $rootScope.ObjectIndex++;
1166 - 1178 + $rootScope.isLinePreviewCompleted = true;
1167 $rootScope.DrawLineOnModuleItem('#canvas', $rootScope.LineNumber, $rootScope.shapestyleborderColor, $rootScope.shapestyleborderWidth, $rootScope.offsetX1, $rootScope.offsetY1, $rootScope.x, $rootScope.y) 1179 $rootScope.DrawLineOnModuleItem('#canvas', $rootScope.LineNumber, $rootScope.shapestyleborderColor, $rootScope.shapestyleborderWidth, $rootScope.offsetX1, $rootScope.offsetY1, $rootScope.x, $rootScope.y)
1168 -  
1169 break; 1180 break;
1170 -  
1171 case "Rectangle": 1181 case "Rectangle":
1172 $rootScope.rectNumber = $rootScope.ObjectIndex++; 1182 $rootScope.rectNumber = $rootScope.ObjectIndex++;
  1183 + $rootScope.isRectanglePreviewCompleted = true;
1173 $rootScope.DrawRectangleOnModuleItem('#canvas', $rootScope.rectNumber, $rootScope.shapestyleFillColor, $rootScope.shapestyleborderColor, $rootScope.shapestyleOpacity, $rootScope.shapestyleborderWidth, $rootScope.offsetX1, $rootScope.offsetY1, $rootScope.x, $rootScope.y); 1184 $rootScope.DrawRectangleOnModuleItem('#canvas', $rootScope.rectNumber, $rootScope.shapestyleFillColor, $rootScope.shapestyleborderColor, $rootScope.shapestyleOpacity, $rootScope.shapestyleborderWidth, $rootScope.offsetX1, $rootScope.offsetY1, $rootScope.x, $rootScope.y);
1174 1185
1175 break; 1186 break;
1176 -  
1177 case "Circle": 1187 case "Circle":
1178 - // alert($rootScope.shapestyleborderWidth);  
1179 $rootScope.CircleNumber = $rootScope.ObjectIndex++; 1188 $rootScope.CircleNumber = $rootScope.ObjectIndex++;
1180 - 1189 + $rootScope.isCirclePreviewCompleted = true;
1181 $rootScope.DrawCircleOnModuleItem('#canvas', $rootScope.CircleNumber, $rootScope.shapestyleOpacity, $rootScope.shapestyleborderColor, $rootScope.shapestyleborderWidth, $rootScope.shapestyleFillColor, $rootScope.offsetX1, $rootScope.offsetY1, $rootScope.x, $rootScope.y); 1190 $rootScope.DrawCircleOnModuleItem('#canvas', $rootScope.CircleNumber, $rootScope.shapestyleOpacity, $rootScope.shapestyleborderColor, $rootScope.shapestyleborderWidth, $rootScope.shapestyleFillColor, $rootScope.offsetX1, $rootScope.offsetY1, $rootScope.x, $rootScope.y);
1182 break; 1191 break;
1183 case "Arrow": 1192 case "Arrow":
1184 $rootScope.ArrowNumber = $rootScope.ObjectIndex++; 1193 $rootScope.ArrowNumber = $rootScope.ObjectIndex++;
1185 - 1194 + $rootScope.isArrowPreviewCompleted = true;
1186 $rootScope.DrawArrowOnModuleItem('#canvas', $rootScope.ArrowNumber, $rootScope.shapestyleborderColor, $rootScope.shapestyleborderWidth, $rootScope.offsetX1, $rootScope.offsetY1, $rootScope.x, $rootScope.y); 1195 $rootScope.DrawArrowOnModuleItem('#canvas', $rootScope.ArrowNumber, $rootScope.shapestyleborderColor, $rootScope.shapestyleborderWidth, $rootScope.offsetX1, $rootScope.offsetY1, $rootScope.x, $rootScope.y);
1187 -  
1188 - // $scope.resetRect += 1;  
1189 break; 1196 break;
1190 case "Pin": 1197 case "Pin":
1191 $rootScope.PinNumber = $rootScope.PinObjectIndex++; 1198 $rootScope.PinNumber = $rootScope.PinObjectIndex++;
1192 $rootScope.PinArcNumber = $rootScope.ArcObjectIndex++; 1199 $rootScope.PinArcNumber = $rootScope.ArcObjectIndex++;
1193 - $rootScope.DrawPinOnModuleItem('#canvas', $rootScope.PinNumber, $rootScope.offsetX1, $rootScope.offsetY1, $rootScope.x, $rootScope.y, $rootScope.PinArcNumber);  
1194 1200
  1201 + $rootScope.isPinPreviewCompleted = true;
  1202 +
  1203 + $rootScope.DrawPinOnModuleItem('#canvas', $rootScope.PinNumber, $rootScope.offsetX1, $rootScope.offsetY1, $rootScope.x, $rootScope.y, $rootScope.PinArcNumber);
1195 break; 1204 break;
1196 case "TextArea": 1205 case "TextArea":
1197 -  
1198 $rootScope.IsTextAlreadySave = false; 1206 $rootScope.IsTextAlreadySave = false;
1199 $("#text_area").val(''); 1207 $("#text_area").val('');
1200 // Draw text 1208 // Draw text
1201 $rootScope.resetTextRect = $rootScope.ObjectIndex++; 1209 $rootScope.resetTextRect = $rootScope.ObjectIndex++;
1202 $rootScope.TextNumber = $rootScope.ObjectIndex++; 1210 $rootScope.TextNumber = $rootScope.ObjectIndex++;
  1211 + $rootScope.isTextAreaPreviewCompleted = true;
1203 $rootScope.TextEditorFunctionality('#canvas', $rootScope.TextNumber, $rootScope.offsetX1, $rootScope.offsetY1, $rootScope.resetTextRect, $rootScope.shapestyleOpacity, $rootScope.shapestyleborderColor, $rootScope.shapestyleborderWidth, $rootScope.shapestyleFillColor, $rootScope.x, $rootScope.y); 1212 $rootScope.TextEditorFunctionality('#canvas', $rootScope.TextNumber, $rootScope.offsetX1, $rootScope.offsetY1, $rootScope.resetTextRect, $rootScope.shapestyleOpacity, $rootScope.shapestyleborderColor, $rootScope.shapestyleborderWidth, $rootScope.shapestyleFillColor, $rootScope.x, $rootScope.y);
1204 break; 1213 break;
1205 -  
1206 case "DrawPolygon": 1214 case "DrawPolygon":
1207 -  
1208 break; 1215 break;
1209 1216
1210 } 1217 }
1211 //} 1218 //}
1212 1219
1213 } 1220 }
1214 - ///----- 1221 + $rootScope.OnPaintCanvasMouseMove = function (event) {
  1222 + var canvasDiv = document.getElementById('canvasDiv');
  1223 + var verticalScrollPosition = canvasDiv.scrollTop;
  1224 + var horizontlScrollPosition = canvasDiv.scrollLeft;
  1225 + $rootScope.MouseMoveXAxis = event.pageX + horizontlScrollPosition - $('#canvasDiv').offset().left;
  1226 + $rootScope.MouseMoveYAxis = event.pageY + verticalScrollPosition - $('#canvasDiv').offset().top;
  1227 + switch ($rootScope.shapeType) {
  1228 + case "Line":
  1229 + $(".line").remove();
  1230 +
  1231 + $("#canvasDiv").append("<div class='line' style='border:1px dashed #000000;position:absolute;left:" + $rootScope.offsetX1 + "px;top:" + $rootScope.offsetY1 + "px;'></div>");
  1232 + $rootScope.Annotationangle();
  1233 + break;
  1234 + case "Arrow":
  1235 + $(".arrow").remove();
  1236 +
  1237 + $("#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>");
  1238 + $rootScope.Annotationangle();
  1239 + break;
  1240 + case "Pin":
  1241 + $(".pin").remove();
  1242 +
  1243 + $("#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>");
  1244 + $rootScope.Annotationangle();
  1245 + break;
  1246 + case "Circle":
  1247 + $(".circle").remove();
  1248 +
  1249 + $("#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>");
  1250 + break;
  1251 + case "Rectangle":
  1252 + $(".rectangle").remove();
  1253 +
  1254 + $("#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>");
  1255 + break;
  1256 + case "TextArea":
  1257 + $(".textarea").remove();
  1258 +
  1259 + $("#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>");
  1260 + break;
  1261 + }
  1262 + }
  1263 + $rootScope.Annotationangle = function (event) {
  1264 + var dy = $rootScope.MouseMoveYAxis - $rootScope.offsetY1;
  1265 + var dx = $rootScope.MouseMoveXAxis - $rootScope.offsetX1;
  1266 + var theta = 0;
  1267 + if (dx < 0) {
  1268 + theta = Math.atan(dy / dx) * (180 / Math.PI);
  1269 + theta = theta + 180;
  1270 + }
  1271 + else if (dy < 0) {
  1272 + theta = Math.atan(dy / dx) * (180 / Math.PI);
  1273 + theta = theta + 360;
  1274 + }
  1275 + else {
  1276 + theta = Math.atan(dy / dx) * (180 / Math.PI);
  1277 + }
  1278 + var dottedLineWidth = Math.sqrt(($rootScope.offsetX1 - $rootScope.MouseMoveXAxis) * ($rootScope.offsetX1 - $rootScope.MouseMoveXAxis) + ($rootScope.offsetY1 - $rootScope.MouseMoveYAxis) * ($rootScope.offsetY1 - $rootScope.MouseMoveYAxis));
  1279 + switch ($rootScope.shapeType) {
  1280 + case "Line":
  1281 + $('.line').css({ 'transform': 'rotate(' + theta + 'deg)', '-moz-transform': 'rotate(' + theta + 'deg)', '-webkit-transform': 'rotate(' + theta + 'deg)', 'transform-origin': '0% 0%', 'width': dottedLineWidth + 'px' });
  1282 + break;
  1283 + case "Arrow":
  1284 + $('.arrow').css({ 'transform': 'rotate(' + theta + 'deg)', '-moz-transform': 'rotate(' + theta + 'deg)', '-webkit-transform': 'rotate(' + theta + 'deg)', 'transform-origin': '0% 0%', 'width': dottedLineWidth + 'px' });
  1285 + break;
  1286 + case "Pin":
  1287 + $('.pin').css({ 'transform': 'rotate(' + theta + 'deg)', '-moz-transform': 'rotate(' + theta + 'deg)', '-webkit-transform': 'rotate(' + theta + 'deg)', 'transform-origin': '0% 0%', 'width': dottedLineWidth + 'px' });
  1288 + break;
  1289 + }
  1290 + }
1215 1291
  1292 + ///-----
1216 $rootScope.saveText = function () { 1293 $rootScope.saveText = function () {
1217 - debugger; 1294 +
1218 document.getElementById('modelbackground').style.display = "none"; 1295 document.getElementById('modelbackground').style.display = "none";
1219 // this part will work first time when save button will be clicked 1296 // this part will work first time when save button will be clicked
1220 if ($rootScope.IsTextAlreadySave == false) { 1297 if ($rootScope.IsTextAlreadySave == false) {
@@ -1229,15 +1306,8 @@ AIA.controller(&quot;HomeController&quot;, [&quot;$rootScope&quot;, &quot;Modules&quot;, &quot;$log&quot;, &quot;$location&quot;, @@ -1229,15 +1306,8 @@ AIA.controller(&quot;HomeController&quot;, [&quot;$rootScope&quot;, &quot;Modules&quot;, &quot;$log&quot;, &quot;$location&quot;,
1229 $rootScope.textArea = $("#text_area").val(); 1306 $rootScope.textArea = $("#text_area").val();
1230 1307
1231 // deleting previous text area 1308 // deleting previous text area
1232 -  
1233 -  
1234 $("#canvas").removeLayer($rootScope.TextID).drawLayers(); 1309 $("#canvas").removeLayer($rootScope.TextID).drawLayers();
1235 $("#canvas").removeLayer($rootScope.TextAreaRectID).drawLayers(); 1310 $("#canvas").removeLayer($rootScope.TextAreaRectID).drawLayers();
1236 -  
1237 -  
1238 - // $("#canvas").removeLayer('TextArea_' + $rootScope.TextNumber).drawLayers();  
1239 - // $("#canvas").removeLayer("TextRect_" + $rootScope.TextNumber).drawLayers();  
1240 -  
1241 // Text After Saving in Rectangle 1311 // Text After Saving in Rectangle
1242 $rootScope.resetTextRect = $rootScope.ObjectIndex++; 1312 $rootScope.resetTextRect = $rootScope.ObjectIndex++;
1243 $('#canvas').drawText({ 1313 $('#canvas').drawText({
@@ -1249,6 +1319,7 @@ AIA.controller(&quot;HomeController&quot;, [&quot;$rootScope&quot;, &quot;Modules&quot;, &quot;$log&quot;, &quot;$location&quot;, @@ -1249,6 +1319,7 @@ AIA.controller(&quot;HomeController&quot;, [&quot;$rootScope&quot;, &quot;Modules&quot;, &quot;$log&quot;, &quot;$location&quot;,
1249 fillStyle: $rootScope.fontColor, 1319 fillStyle: $rootScope.fontColor,
1250 fontStyle: $rootScope.fontWeight + " " + $rootScope.fontStyle, 1320 fontStyle: $rootScope.fontWeight + " " + $rootScope.fontStyle,
1251 fontSize: $rootScope.fontSizes, 1321 fontSize: $rootScope.fontSizes,
  1322 + fromCenter: false,
1252 fontFamily: $rootScope.fontFamily, 1323 fontFamily: $rootScope.fontFamily,
1253 align: $rootScope.textAlignmt, 1324 align: $rootScope.textAlignmt,
1254 strokeWidth: 0, 1325 strokeWidth: 0,
@@ -1272,6 +1343,7 @@ AIA.controller(&quot;HomeController&quot;, [&quot;$rootScope&quot;, &quot;Modules&quot;, &quot;$log&quot;, &quot;$location&quot;, @@ -1272,6 +1343,7 @@ AIA.controller(&quot;HomeController&quot;, [&quot;$rootScope&quot;, &quot;Modules&quot;, &quot;$log&quot;, &quot;$location&quot;,
1272 opacity: $rootScope.shapestyleOpacity, 1343 opacity: $rootScope.shapestyleOpacity,
1273 strokeStyle: $rootScope.shapestyleborderColor, 1344 strokeStyle: $rootScope.shapestyleborderColor,
1274 strokeWidth: $rootScope.shapestyleborderWidth, 1345 strokeWidth: $rootScope.shapestyleborderWidth,
  1346 + fromCenter: false,
1275 x: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].x, y: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].y, 1347 x: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].x, y: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].y,
1276 width: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].width, 1348 width: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].width,
1277 height: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].height, 1349 height: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].height,
@@ -1304,31 +1376,12 @@ AIA.controller(&quot;HomeController&quot;, [&quot;$rootScope&quot;, &quot;Modules&quot;, &quot;$log&quot;, &quot;$location&quot;, @@ -1304,31 +1376,12 @@ AIA.controller(&quot;HomeController&quot;, [&quot;$rootScope&quot;, &quot;Modules&quot;, &quot;$log&quot;, &quot;$location&quot;,
1304 var _rectLayerOnSaveSplit = _rectLayerOnSave.split("_"); 1376 var _rectLayerOnSaveSplit = _rectLayerOnSave.split("_");
1305 var TextAreaRectName = "TextAreaNew_"; 1377 var TextAreaRectName = "TextAreaNew_";
1306 var TextAreaRectNameConcatenated = TextAreaRectName.concat(_rectLayerOnSaveSplit[1]); 1378 var TextAreaRectNameConcatenated = TextAreaRectName.concat(_rectLayerOnSaveSplit[1]);
1307 - // alert(TextAreaRectNameConcatenated);  
1308 - //if (_rectLayerOnSaveSplit[1]%2 == 0)  
1309 - //{  
1310 - // _rectLayerOnSaveSplit[1] = _rectLayerOnSaveSplit[1] - 1;  
1311 -  
1312 - //}  
1313 - //else  
1314 - //{  
1315 -  
1316 - // _rectLayerOnSaveSplit[1] = _rectLayerOnSaveSplit[1];  
1317 - //}  
1318 1379
1319 $rootScope.layerNameArr = layer.name; 1380 $rootScope.layerNameArr = layer.name;
1320 $rootScope.rectTextArr = TextAreaRectNameConcatenated; 1381 $rootScope.rectTextArr = TextAreaRectNameConcatenated;
1321 1382
1322 1383
1323 $rootScope.rectDimension.push({ width: layer.width, height: layer.height, x: layer.x, y: layer.y }); 1384 $rootScope.rectDimension.push({ width: layer.width, height: layer.height, x: layer.x, y: layer.y });
1324 - // var _rectLayerOnSaveSplitInt;  
1325 -  
1326 -  
1327 - // _rectLayerOnSaveSplitInt = parseInt(_rectLayerOnSaveSplit[1]);  
1328 -  
1329 - //alert(_rectLayerOnSaveSplitInt);  
1330 - // alert($rootScope.TextPropertyArray.length);  
1331 -  
1332 1385
1333 for (var i = 0; i <= $rootScope.TextPropertyArray.length - 1; i++) { 1386 for (var i = 0; i <= $rootScope.TextPropertyArray.length - 1; i++) {
1334 if ($rootScope.TextPropertyArray[i].layerName == TextAreaRectNameConcatenated) { 1387 if ($rootScope.TextPropertyArray[i].layerName == TextAreaRectNameConcatenated) {
@@ -1540,6 +1593,7 @@ AIA.controller(&quot;HomeController&quot;, [&quot;$rootScope&quot;, &quot;Modules&quot;, &quot;$log&quot;, &quot;$location&quot;, @@ -1540,6 +1593,7 @@ AIA.controller(&quot;HomeController&quot;, [&quot;$rootScope&quot;, &quot;Modules&quot;, &quot;$log&quot;, &quot;$location&quot;,
1540 fontFamily: _modifiedFontFamily, 1593 fontFamily: _modifiedFontFamily,
1541 align: _modifiedTextAlign, 1594 align: _modifiedTextAlign,
1542 strokeWidth: 0, 1595 strokeWidth: 0,
  1596 + fromCenter: false,
1543 text: _modifiedText, 1597 text: _modifiedText,
1544 x: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].x, y: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].y, 1598 x: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].x, y: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].y,
1545 maxWidth: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].width, 1599 maxWidth: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].width,
@@ -1554,6 +1608,7 @@ AIA.controller(&quot;HomeController&quot;, [&quot;$rootScope&quot;, &quot;Modules&quot;, &quot;$log&quot;, &quot;$location&quot;, @@ -1554,6 +1608,7 @@ AIA.controller(&quot;HomeController&quot;, [&quot;$rootScope&quot;, &quot;Modules&quot;, &quot;$log&quot;, &quot;$location&quot;,
1554 groups: ['TextAreaAfterEdit_' + $rootScope.resetTextSave], 1608 groups: ['TextAreaAfterEdit_' + $rootScope.resetTextSave],
1555 dragGroups: ['TextAreaAfterEdit_' + $rootScope.resetTextSave], 1609 dragGroups: ['TextAreaAfterEdit_' + $rootScope.resetTextSave],
1556 opacity: $rootScope.shapestyleOpacity, 1610 opacity: $rootScope.shapestyleOpacity,
  1611 + fromCenter: false,
1557 strokeStyle: $rootScope.shapestyleborderColor, 1612 strokeStyle: $rootScope.shapestyleborderColor,
1558 strokeWidth: $rootScope.shapestyleborderWidth, 1613 strokeWidth: $rootScope.shapestyleborderWidth,
1559 x: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].x, y: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].y, 1614 x: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].x, y: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].y,
@@ -1729,9 +1784,6 @@ AIA.controller(&quot;HomeController&quot;, [&quot;$rootScope&quot;, &quot;Modules&quot;, &quot;$log&quot;, &quot;$location&quot;, @@ -1729,9 +1784,6 @@ AIA.controller(&quot;HomeController&quot;, [&quot;$rootScope&quot;, &quot;Modules&quot;, &quot;$log&quot;, &quot;$location&quot;,
1729 1784
1730 } 1785 }
1731 else if ($rootScope.shapeTypeText == "textAreaRect") { 1786 else if ($rootScope.shapeTypeText == "textAreaRect") {
1732 -  
1733 -  
1734 -  
1735 $("#canvas").removeLayer($rootScope.canvasLayerNameCollection[0].textareaRectangle).drawLayers(); 1787 $("#canvas").removeLayer($rootScope.canvasLayerNameCollection[0].textareaRectangle).drawLayers();
1736 $("#canvas").removeLayer($rootScope.canvasLayerNameCollection[0].textareaString).drawLayers(); 1788 $("#canvas").removeLayer($rootScope.canvasLayerNameCollection[0].textareaString).drawLayers();
1737 $rootScope.shapeTypeText = ""; 1789 $rootScope.shapeTypeText = "";
@@ -1739,7 +1791,6 @@ AIA.controller(&quot;HomeController&quot;, [&quot;$rootScope&quot;, &quot;Modules&quot;, &quot;$log&quot;, &quot;$location&quot;, @@ -1739,7 +1791,6 @@ AIA.controller(&quot;HomeController&quot;, [&quot;$rootScope&quot;, &quot;Modules&quot;, &quot;$log&quot;, &quot;$location&quot;,
1739 } 1791 }
1740 else { 1792 else {
1741 1793
1742 - // alert($rootScope.canvasLayerNameCollection);  
1743 $("#canvas").removeLayer($rootScope.canvasLayerNameCollection).drawLayers(); 1794 $("#canvas").removeLayer($rootScope.canvasLayerNameCollection).drawLayers();
1744 } 1795 }
1745 1796
@@ -1848,22 +1899,24 @@ AIA.controller(&quot;HomeController&quot;, [&quot;$rootScope&quot;, &quot;Modules&quot;, &quot;$log&quot;, &quot;$location&quot;, @@ -1848,22 +1899,24 @@ AIA.controller(&quot;HomeController&quot;, [&quot;$rootScope&quot;, &quot;Modules&quot;, &quot;$log&quot;, &quot;$location&quot;,
1848 1899
1849 $('#listManager').css('display', 'block'); 1900 $('#listManager').css('display', 'block');
1850 $("#listManager").css("visibility", "visible"); 1901 $("#listManager").css("visibility", "visible");
1851 -  
1852 - // $('#termList option[selected="selected"]').prop("selected", false);  
1853 - // $("#termList").find("option[value=" + $rootScope.searchSelectedText + "]").prop("selected", true);  
1854 - // $("#termList").find("option").css({ "background-color": "#ffffff", "color": "#000000" });  
1855 - // $("#termList").find("option[value=" + $rootScope.searchSelectedText + "]").css({ "background-color": "#3399FF", "color": "#ffffff" }); 1902 +
  1903 + // $('#termList option[selected="selected"]').prop("selected", false);
  1904 + // $("#termList").find("option[value=" + $rootScope.searchSelectedText + "]").prop("selected", true);
  1905 + // $("#termList").find("option").css({ "background-color": "#ffffff", "color": "#000000" });
  1906 + // $("#termList").find("option[value=" + $rootScope.searchSelectedText + "]").css({ "background-color": "#3399FF", "color": "#ffffff" });
1856 $('#listManager').draggable(); 1907 $('#listManager').draggable();
1857 1908
1858 1909
1859 $rootScope.islistManagerEventAlredayDispachted = true; 1910 $rootScope.islistManagerEventAlredayDispachted = true;
1860 1911
1861 $rootScope.$broadcast('listManagerEvent', true); 1912 $rootScope.$broadcast('listManagerEvent', true);
1862 - 1913 +
1863 $('#termList option[selected="selected"]').prop("selected", false); 1914 $('#termList option[selected="selected"]').prop("selected", false);
1864 $('#termList option[value="' + $rootScope.searchSelectedText + '"]').prop("selected", true); 1915 $('#termList option[value="' + $rootScope.searchSelectedText + '"]').prop("selected", true);
1865 $("#termList").find("option").css({ "background-color": "#ffffff", "color": "#000000" }); 1916 $("#termList").find("option").css({ "background-color": "#ffffff", "color": "#000000" });
1866 $('#termList option[value="' + $rootScope.searchSelectedText + '"]').css({ "background-color": "#3399FF", "color": "#ffffff" }); 1917 $('#termList option[value="' + $rootScope.searchSelectedText + '"]').css({ "background-color": "#3399FF", "color": "#ffffff" });
  1918 +
  1919 +
1867 } 1920 }
1868 1921
1869 $rootScope.CloseListManager = function () { 1922 $rootScope.CloseListManager = function () {