ADAM / AIAHTML5

Commit 6b9edcfe890149176d19fd696366f7b02168f2e2

Authored by Nikita Kulshreshtha
2 parents 7afb263b b51b2ae2

merged AnnotationDawingDetectMode and renamed varibales

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