ADAM / AIAHTML5

Commit b51b2ae275ceb98ba4ff36a5c36b5c7d3b49c938

Authored by unknown
1 parent 38fa0efb

Commit Changes for textarea

Inline Side-by-side
Showing 1 changed file with 379 additions and 355 deletions
400-SOURCECODE/AIAHTML5.Web/app/controllers/HomeController.js
  View file @b51b2ae
... ... @@ -541,62 +541,67 @@ AIA.controller("HomeController", ["$rootScope", "Modules", "$log", "$location",
541 541  
542 542 //--Common code of Annotation Toolbar for CI and DA-------
543 543 $rootScope.LineFn = function (canvasId, LineNumber, shapestyleborderColor, shapestyleborderWidth, offsetX1, offsetY1, x, y) {
544   - $(canvasId).addLayer({
545   - name: 'Line_' + LineNumber,
546   - layer: true,
547   - type: 'line',
548   - draggable: true,
549   - strokeStyle: shapestyleborderColor,
550   - strokeWidth: shapestyleborderWidth,
551   - rounded: true,
552   - x1: offsetX1, y1: offsetY1,
553   - x2: x, y2: y,
554   -
555   - click: function (layer) {
556   - $rootScope.canvasLayerNameCollection = [];
557   - $rootScope.canvasLayerNameCollection.push(layer.name);
558   - $(canvasId).setLayer(layer.name, {
559   - handle: {
560   - type: 'arc',
561   - fillStyle: '#fff',
562   - strokeStyle: '#c33',
563   - strokeWidth: 2,
564   - radius: 3
565   - }
566   - }).drawLayers();
567   -
568   -
569   - },
570   - mouseout: function (layer) {
571   - $rootScope.canvasLayerNameCollection = [];
572   - $(canvasId).setLayer(layer.name, {
573   - handle: {
574   - type: 'arc',
575   - fillStyle: '#fff',
576   - strokeStyle: '#c33',
577   - strokeWidth: 0,
578   - radius: 0
579   - }
580   -
581   - }).drawLayers();
582   -
583   - },
584   - mouseover: function (layer) {
585   -
586   -
587   - $(canvasId).setLayer(layer.name, {
588   - handle: {
589   - type: 'arc',
590   - fillStyle: '#fff',
591   - strokeStyle: '#c33',
592   - strokeWidth: 2,
593   - radius: 3
594   - }
595   - }).drawLayers();
  544 + if ($rootScope.islineMoved == true) {
  545 + $rootScope.islineMoved = false;
  546 + $(canvasId).addLayer({
  547 + name: 'Line_' + LineNumber,
  548 + layer: true,
  549 + type: 'line',
  550 + draggable: true,
  551 + strokeStyle: shapestyleborderColor,
  552 + strokeWidth: shapestyleborderWidth,
  553 + rounded: true,
  554 + x1: offsetX1, y1: offsetY1,
  555 + x2: x, y2: y,
  556 +
  557 + click: function (layer) {
  558 + $rootScope.canvasLayerNameCollection = [];
  559 + $rootScope.canvasLayerNameCollection.push(layer.name);
  560 + $(canvasId).setLayer(layer.name, {
  561 + handle: {
  562 + type: 'arc',
  563 + fillStyle: '#fff',
  564 + strokeStyle: '#c33',
  565 + strokeWidth: 2,
  566 + radius: 3
  567 + }
  568 + }).drawLayers();
596 569  
597   - }
598 570  
599   - }).drawLayers();
  571 + },
  572 + mouseout: function (layer) {
  573 + $rootScope.canvasLayerNameCollection = [];
  574 + $(canvasId).setLayer(layer.name, {
  575 + handle: {
  576 + type: 'arc',
  577 + fillStyle: '#fff',
  578 + strokeStyle: '#c33',
  579 + strokeWidth: 0,
  580 + radius: 0
  581 + }
  582 +
  583 + }).drawLayers();
  584 +
  585 + },
  586 + mouseover: function (layer) {
  587 +
  588 +
  589 + $(canvasId).setLayer(layer.name, {
  590 + handle: {
  591 + type: 'arc',
  592 + fillStyle: '#fff',
  593 + strokeStyle: '#c33',
  594 + strokeWidth: 2,
  595 + radius: 3
  596 + }
  597 + }).drawLayers();
  598 +
  599 + }
  600 +
  601 + }).drawLayers();
  602 +
  603 + }
  604 +
600 605  
601 606 $('.btnCursor').trigger('click');
602 607 $(".btn-annotation").removeClass("activebtncolor");
... ... @@ -604,74 +609,77 @@ AIA.controller("HomeController", ["$rootScope", "Modules", "$log", "$location",
604 609 }
605 610  
606 611 $rootScope.RectangleFn = function (canvasId, RectNumber, shapestyleFillColor, shapestyleborderColor, shapestyleOpacity, shapestyleborderWidth, offsetX1, offsetY1, x, y) {
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   - x: offsetX1, y: offsetY1,
617   - width: (x - offsetX1) * 2,
618   - height: (y - offsetY1) * 2,
619   -
620   - resizeFromCenter: false,
621   -
622   - dblclick: function () {
623   - // $rootScope.backOpacity();
624   -
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   - }
653   -
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();
  612 + if ($rootScope.isrectangleMoved == true) {
  613 + $rootScope.isrectangleMoved = false;
  614 + $(canvasId).addLayer({
  615 + layer: true,
  616 + name: 'Rect_' + RectNumber,
  617 + fillStyle: shapestyleFillColor,
  618 + type: 'rectangle',
  619 + draggable: true,
  620 + strokeStyle: shapestyleborderColor,
  621 + opacity: shapestyleOpacity,
  622 + strokeWidth: shapestyleborderWidth,
  623 + fromCenter: false,
  624 + x: offsetX1, y: offsetY1,
  625 + width: (x - offsetX1),
  626 + height: (y - offsetY1),
670 627  
671   - }
672   - }).drawLayers();
  628 + resizeFromCenter: false,
673 629  
  630 + dblclick: function () {
  631 + // $rootScope.backOpacity();
674 632  
  633 + },
  634 +
  635 + click: function (layer) {
  636 + $rootScope.canvasLayerNameCollection = [];
  637 + $rootScope.canvasLayerNameCollection.push(layer.name);
  638 + $(canvasId).setLayer(layer.name, {
  639 + handle: {
  640 + type: 'rectangle',
  641 + fillStyle: '#fff',
  642 + strokeStyle: '#c33',
  643 + strokeWidth: 2,
  644 + width: 5, height: 5,
  645 + cornerRadius: 3
  646 + }
  647 + }).drawLayers();
  648 +
  649 + },
  650 + mouseout: function (layer) {
  651 + $rootScope.canvasLayerNameCollection = [];
  652 + $(canvasId).setLayer(layer.name, {
  653 + handle: {
  654 + type: 'rectangle',
  655 + fillStyle: 'pink',
  656 + strokeStyle: 'yellow',
  657 + strokeWidth: 0,
  658 + width: 0, height: 0,
  659 + cornerRadius: 0
  660 + }
  661 +
  662 + }).drawLayers();
  663 +
  664 + },
  665 + mouseover: function (layer) {
  666 +
  667 +
  668 + $(canvasId).setLayer(layer.name, {
  669 + handle: {
  670 + type: 'rectangle',
  671 + fillStyle: '#fff',
  672 + strokeStyle: '#c33',
  673 + strokeWidth: 2,
  674 + width: 5, height: 5,
  675 + cornerRadius: 3
  676 + }
  677 + }).drawLayers();
  678 +
  679 + }
  680 + }).drawLayers();
  681 +
  682 + }
675 683  
676 684 $('.btnCursor').trigger('click');
677 685 $(".btn-annotation").removeClass("activebtncolor");
... ... @@ -681,133 +689,140 @@ AIA.controller("HomeController", ["$rootScope", "Modules", "$log", "$location",
681 689  
682 690 $rootScope.CircleFn = function (canvasId, CircleNumber, shapestyleOpacity, shapestyleborderColor, shapestyleborderWidth, shapestyleFillColor, offsetX1, offsetY1, x, y) {
683 691 // console.log("up"+ offsetX1 + " " + offsetY1 + " " + (x - offsetX1) + " " + (y - offsetY1));
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   - x: (offsetX1), y: (offsetY1),
694   - width: (x - offsetX1) * 2, height: (y - offsetY1) * 2,
695   - // Place a handle at each side and each corner
696   - handlePlacement: 'both',
697   - click: function (layer) {
698   - $rootScope.canvasLayerNameCollection = [];
699   - $rootScope.canvasLayerNameCollection.push(layer.name);
700   - $(canvasId).setLayer(layer.name, {
701   - handle: {
702   - type: 'arc',
703   - fillStyle: '#fff',
704   - strokeStyle: '#c33',
705   - strokeWidth: 2,
706   - radius: 3
707   - }
708   - }).drawLayers();
709   -
710   - },
711   - mouseout: function (layer) {
712   - $rootScope.canvasLayerNameCollection = [];
713   -
714   - $(canvasId).setLayer(layer.name, {
715   - handle: {
716   - type: 'arc',
717   - fillStyle: '#fff',
718   - strokeStyle: '#c33',
719   - strokeWidth: 0,
720   - // width: 0, height: 0,
721   - radius: 0
722   - }
723   -
724   - }).drawLayers();
725   -
726   - },
727   - mouseover: function (layer) {
728   -
729   -
730   - $(canvasId).setLayer(layer.name, {
731   - handle: {
732   - type: 'arc',
733   - fillStyle: '#fff',
734   - strokeStyle: '#c33',
735   - strokeWidth: 2,
736   - // width: 5, height: 5,
737   - radius: 3
738   - }
739   - }).drawLayers();
  692 + if ($rootScope.iscircleMoved == true) {
  693 + $rootScope.iscircleMoved = false;
  694 + $(canvasId).addLayer({
  695 + layer: true,
  696 + name: 'Circle_' + CircleNumber,
  697 + type: 'ellipse',
  698 + opacity: shapestyleOpacity,
  699 + draggable: true,
  700 + strokeStyle: shapestyleborderColor,
  701 + strokeWidth: shapestyleborderWidth,
  702 + fillStyle: shapestyleFillColor,
  703 + fromCenter: false,
  704 + x: (offsetX1), y: (offsetY1),
  705 + width: (x - offsetX1), height: (y - offsetY1),
  706 + // Place a handle at each side and each corner
  707 + handlePlacement: 'both',
  708 + click: function (layer) {
  709 + $rootScope.canvasLayerNameCollection = [];
  710 + $rootScope.canvasLayerNameCollection.push(layer.name);
  711 + $(canvasId).setLayer(layer.name, {
  712 + handle: {
  713 + type: 'arc',
  714 + fillStyle: '#fff',
  715 + strokeStyle: '#c33',
  716 + strokeWidth: 2,
  717 + radius: 3
  718 + }
  719 + }).drawLayers();
740 720  
741   - }
742   - }).drawLayers();
  721 + },
  722 + mouseout: function (layer) {
  723 + $rootScope.canvasLayerNameCollection = [];
  724 +
  725 + $(canvasId).setLayer(layer.name, {
  726 + handle: {
  727 + type: 'arc',
  728 + fillStyle: '#fff',
  729 + strokeStyle: '#c33',
  730 + strokeWidth: 0,
  731 + // width: 0, height: 0,
  732 + radius: 0
  733 + }
  734 +
  735 + }).drawLayers();
  736 +
  737 + },
  738 + mouseover: function (layer) {
  739 +
  740 +
  741 + $(canvasId).setLayer(layer.name, {
  742 + handle: {
  743 + type: 'arc',
  744 + fillStyle: '#fff',
  745 + strokeStyle: '#c33',
  746 + strokeWidth: 2,
  747 + // width: 5, height: 5,
  748 + radius: 3
  749 + }
  750 + }).drawLayers();
  751 +
  752 + }
  753 + }).drawLayers();
  754 + }
743 755 $('.btnCursor').trigger('click');
744 756 $(".btn-annotation").removeClass("activebtncolor");
745 757 $('.btnCursor').addClass('activebtncolor');
746 758 }
747 759  
748 760 $rootScope.ArrowFn = function (canvasId, ArrowNumber, shapestyleborderColor, shapestyleborderWidth, offsetX1, offsetY1, x, y) {
  761 + if ($rootScope.isarrowMoved == true) {
  762 + $rootScope.isarrowMoved = false;
  763 + $('#canvas').drawLine({
  764 + layer: true,
  765 + name: 'Arrow_' + ArrowNumber,
  766 + draggable: true,
  767 + strokeStyle: shapestyleborderColor,
  768 + strokeWidth: shapestyleborderWidth,
  769 + rounded: true,
  770 + startArrow: true,
  771 + arrowRadius: 7,
  772 + arrowAngle: 90,
  773 + x1: offsetX1, y1: offsetY1,
  774 + x2: x, y2: y,
749 775  
750   - $('#canvas').drawLine({
751   - layer: true,
752   - name: 'Arrow_' + ArrowNumber,
753   - draggable: true,
754   - strokeStyle: shapestyleborderColor,
755   - strokeWidth: shapestyleborderWidth,
756   - rounded: true,
757   - startArrow: true,
758   - arrowRadius: 7,
759   - arrowAngle: 90,
760   - x1: offsetX1, y1: offsetY1,
761   - x2: x, y2: y,
762   -
763   - click: function (layer) {
764   - $rootScope.canvasLayerNameCollection = [];
765   - $rootScope.canvasLayerNameCollection.push(layer.name);
766   - $(canvasId).setLayer(layer.name, {
767   - handle: {
768   - type: 'arc',
769   - fillStyle: '#fff',
770   - strokeStyle: '#c33',
771   - strokeWidth: 2,
772   - // width: 5, height: 5,
773   - radius: 3
774   - }
775   - }).drawLayers();
776   - // $("#canvas").removeLayer(layer.name).drawLayers();
777   -
778   - },
779   - mouseout: function (layer) {
780   - $rootScope.canvasLayerNameCollection = [];
781   - $(canvasId).setLayer(layer.name, {
782   - handle: {
783   - type: 'arc',
784   - fillStyle: '#fff',
785   - strokeStyle: '#c33',
786   - strokeWidth: 0,
787   - // width: 0, height: 0,
788   - radius: 0
789   - }
790   -
791   - }).drawLayers();
792   -
793   - },
794   - mouseover: function (layer) {
795   -
796   -
797   - $(canvasId).setLayer(layer.name, {
798   - handle: {
799   - type: 'arc',
800   - fillStyle: '#fff',
801   - strokeStyle: '#c33',
802   - strokeWidth: 2,
803   - // width: 5, height: 5,
804   - radius: 3
805   - }
806   - }).drawLayers();
  776 + click: function (layer) {
  777 + $rootScope.canvasLayerNameCollection = [];
  778 + $rootScope.canvasLayerNameCollection.push(layer.name);
  779 + $(canvasId).setLayer(layer.name, {
  780 + handle: {
  781 + type: 'arc',
  782 + fillStyle: '#fff',
  783 + strokeStyle: '#c33',
  784 + strokeWidth: 2,
  785 + // width: 5, height: 5,
  786 + radius: 3
  787 + }
  788 + }).drawLayers();
  789 + // $("#canvas").removeLayer(layer.name).drawLayers();
807 790  
808   - }
  791 + },
  792 + mouseout: function (layer) {
  793 + $rootScope.canvasLayerNameCollection = [];
  794 + $(canvasId).setLayer(layer.name, {
  795 + handle: {
  796 + type: 'arc',
  797 + fillStyle: '#fff',
  798 + strokeStyle: '#c33',
  799 + strokeWidth: 0,
  800 + // width: 0, height: 0,
  801 + radius: 0
  802 + }
809 803  
810   - });
  804 + }).drawLayers();
  805 +
  806 + },
  807 + mouseover: function (layer) {
  808 +
  809 +
  810 + $(canvasId).setLayer(layer.name, {
  811 + handle: {
  812 + type: 'arc',
  813 + fillStyle: '#fff',
  814 + strokeStyle: '#c33',
  815 + strokeWidth: 2,
  816 + // width: 5, height: 5,
  817 + radius: 3
  818 + }
  819 + }).drawLayers();
  820 +
  821 + }
  822 +
  823 + });
  824 + }
  825 +
811 826 $('.btnCursor').trigger('click');
812 827 $(".btn-annotation").removeClass("activebtncolor");
813 828 $('.btnCursor').addClass('activebtncolor');
... ... @@ -815,10 +830,8 @@ AIA.controller("HomeController", ["$rootScope", "Modules", "$log", "$location",
815 830  
816 831 $rootScope.PinFn = function (canvasId, PinNumber, offsetX1, offsetY1, x, y, PinArcNumber) {
817 832  
818   - var xAxisPinDiff = offsetX1 - x;
819   - var yAxisPinDiff = offsetY1 - y;
820   - if (xAxisPinDiff != 0 && yAxisPinDiff != 0) {
821   -
  833 + if ($rootScope.isPinMoved == true) {
  834 + $rootScope.isPinMoved = false;
822 835 var radial = $('#canvas').createGradient({
823 836 x1: 50, y1: 50,
824 837 x2: 50, y2: 50,
... ... @@ -930,10 +943,8 @@ AIA.controller("HomeController", ["$rootScope", "Modules", "$log", "$location",
930 943 }
931 944  
932 945 $rootScope.TextAreaFn = function (canvasId, TextNumber, offsetX1, offsetY1, resetTextRect, shapestyleOpacity, shapestyleborderColor, shapestyleborderWidth, shapestyleFillColor, x, y) {
933   -
934   -
935   - // debugger;
936   -
  946 + if ($rootScope.istextAreaMoved == true) {
  947 + $rootScope.istextAreaMoved = false;
937 948 $('#canvas').drawText({
938 949 layer: true,
939 950 draggable: true,
... ... @@ -944,6 +955,7 @@ AIA.controller("HomeController", ["$rootScope", "Modules", "$log", "$location",
944 955 fillStyle: '#36c',
945 956 strokeWidth: 0,
946 957 x: $rootScope.offsetX1, y: $rootScope.offsetY1,
  958 + fromCenter: false,
947 959 fontSize: '14pt',
948 960 align: "left",
949 961 fontFamily: 'Verdana, sans-serif',
... ... @@ -955,117 +967,119 @@ AIA.controller("HomeController", ["$rootScope", "Modules", "$log", "$location",
955 967  
956 968  
957 969 })
958   - // Draw rect as wide as the text
959   - .drawRect({
960   - layer: true,
961   - name: "TextRect_" + $rootScope.TextNumber,
962   - dragGroups: ['shapes'],
963   - opacity: $rootScope.shapestyleOpacity,
964   - strokeStyle: $rootScope.shapestyleborderColor,
965   - strokeWidth: $rootScope.shapestyleborderWidth,
966   - fillStyle: $rootScope.shapestyleFillColor,
967   - x: $rootScope.offsetX1, y: $rootScope.offsetY1,
968   - width: ($rootScope.x - $rootScope.offsetX1) * 2,
969   - height: ($rootScope.y - $rootScope.offsetY1) * 2,
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();
1057   -
1058   - }
1059   - });
  970 + // Draw rect as wide as the text
  971 + .drawRect({
  972 + layer: true,
  973 + name: "TextRect_" + $rootScope.TextNumber,
  974 + dragGroups: ['shapes'],
  975 + opacity: $rootScope.shapestyleOpacity,
  976 + strokeStyle: $rootScope.shapestyleborderColor,
  977 + fromCenter: false,
  978 + strokeWidth: $rootScope.shapestyleborderWidth,
  979 + fillStyle: $rootScope.shapestyleFillColor,
  980 + x: $rootScope.offsetX1, y: $rootScope.offsetY1,
  981 + width: ($rootScope.x - $rootScope.offsetX1),
  982 + height: ($rootScope.y - $rootScope.offsetY1),
  983 + add: function (layer) {
  984 +
  985 + $rootScope.TextAreaRectID = layer.name;
  986 + $rootScope.rectDimension.push({ width: layer.width, height: layer.height, x: layer.x, y: layer.y });
  987 + // $rootScope.CurrentWidth = layer.width;
  988 + // $rootScope.CurrentHeight = layer.height;
  989 +
  990 + },
  991 + click: function (layer) {
  992 +
  993 + $rootScope.canvasLayerNameCollection = [];
  994 + $rootScope.canvasLayerNameCollection.push(layer.name);
  995 + $('#canvas').setLayer(layer.name, {
  996 + handle: {
  997 + type: 'rectangle',
  998 + fillStyle: '#fff',
  999 + strokeStyle: '#c33',
  1000 + strokeWidth: 2,
  1001 + width: 5, height: 5,
  1002 + cornerRadius: 3
  1003 + }
  1004 + }).drawLayers();
  1005 +
  1006 + },
  1007 + dblclick: function (layer) {
  1008 +
  1009 + $rootScope.IsTextAlreadySave = false;
  1010 + var RectNameArray = (layer.name).split("_");
  1011 +
  1012 + var TextAreaRectangleName = "TextArea_";
  1013 + var TextAreaRectNameConcat = TextAreaRectangleName.concat(RectNameArray[1]);
  1014 + $rootScope.TextAreaRectID = layer.name;
  1015 + $rootScope.TextID = TextAreaRectNameConcat;
  1016 +
  1017 + $rootScope.rectDimension.push({ width: layer.width, height: layer.height, x: layer.x, y: layer.y });
  1018 + $("#annotationTextModal").css("padding-right", "0px");
  1019 + document.getElementById('modelbackground').style.display = "block";
  1020 + $("#annotationTextModal").modal("toggle");
  1021 +
  1022 + $("#text_area").val('');
  1023 + $("#text_area").css({ "font-family": "Arial", "font-size": "14px", "font-weight": "normal", "font-style": "normal", "color": "#000", "text-align": "left", "text-decoration": "none" });
  1024 + $("#font-color .minicolors .minicolors-swatch .minicolors-swatch-color").css({ "background-color": "#000000" });
  1025 + // $("#font-color .minicolors .minicolors-swatch .minicolors-swatch-color").addClass("ActiveDefaultColorAnnotation");
  1026 +
  1027 + $("#selected-font-family option:eq(0)").prop('selected', true);
  1028 + $("#selected-font-size option:eq(0)").prop('selected', true);
  1029 +
  1030 + $("#text-italic").removeClass("ActiveFormattingButtonClass");
  1031 +
  1032 + $("#text-bold").removeClass("ActiveFormattingButtonClass");
  1033 +
  1034 + $("#text-underline").removeClass("ActiveFormattingButtonClass");
  1035 +
  1036 + $("#text-left").removeClass("ActiveFormattingButtonClass");
  1037 +
  1038 + $("#text-right").removeClass("ActiveFormattingButtonClass");
  1039 +
  1040 + $("#text-center").removeClass("ActiveFormattingButtonClass");
  1041 +
  1042 + },
  1043 + mouseout: function (layer) {
  1044 + $rootScope.canvasLayerNameCollection = [];
  1045 + $('#canvas').setLayer(layer.name, {
  1046 + handle: {
  1047 + type: 'rectangle',
  1048 + fillStyle: 'pink',
  1049 + strokeStyle: 'yellow',
  1050 + strokeWidth: 0,
  1051 + width: 0, height: 0,
  1052 + cornerRadius: 0
  1053 + }
  1054 +
  1055 + }).drawLayers();
  1056 +
  1057 + },
  1058 + mouseover: function (layer) {
  1059 +
  1060 + $('#canvas').setLayer(layer.name, {
  1061 + handle: {
  1062 + type: 'rectangle',
  1063 + fillStyle: '#fff',
  1064 + strokeStyle: '#c33',
  1065 + strokeWidth: 2,
  1066 + width: 5, height: 5,
  1067 + cornerRadius: 3
  1068 + }
  1069 + }).drawLayers();
  1070 +
  1071 + }
  1072 + });
  1073 +
  1074 +
  1075 +
1060 1076 // Annotation: Edit Text option is missing.
1061   - // alert($rootScope.CurrentWidth);
1062   - // alert($rootScope.CurrentHeight);
1063 1077 $("#annotationTextModal").css("padding-right", "0px");
1064   - if (($rootScope.CurrentWidth > 0 && $rootScope.CurrentHeight > 0) || ($rootScope.CurrentWidth > 0 && $rootScope.CurrentHeight <= 0) || ($rootScope.CurrentWidth <= 0 && $rootScope.CurrentHeight > 0)) {
1065   - $("#annotationTextModal").modal("toggle");
1066   - document.getElementById('modelbackground').style.display = "block";
1067   - }
1068   - $('.btnCursor').trigger('click');
  1078 + $("#annotationTextModal").modal("toggle");
  1079 + document.getElementById('modelbackground').style.display = "block";
  1080 +
  1081 + }
  1082 + $('.btnCursor').trigger('click');
1069 1083 $("#font-color .minicolors .minicolors-swatch .minicolors-swatch-color").css({ "background-color": "#000000" });
1070 1084  
1071 1085 $("#text_area").val('');
... ... @@ -1093,8 +1107,6 @@ AIA.controller(&quot;HomeController&quot;, [&quot;$rootScope&quot;, &quot;Modules&quot;, &quot;$log&quot;, &quot;$location&quot;,
1093 1107  
1094 1108 $('.btnCursor').addClass('activebtncolor');
1095 1109  
1096   -
1097   -
1098 1110 }
1099 1111  
1100 1112  
... ... @@ -1150,6 +1162,7 @@ AIA.controller(&quot;HomeController&quot;, [&quot;$rootScope&quot;, &quot;Modules&quot;, &quot;$log&quot;, &quot;$location&quot;,
1150 1162 }
1151 1163 var AnnotationCanvas = document.getElementById('canvas');
1152 1164 AnnotationCanvas.removeEventListener('mousemove', $rootScope.OnPaintCanvasMouseMove, false);
  1165 +
1153 1166 $(".line").remove();
1154 1167 $(".arrow").remove();
1155 1168 $(".pin").remove();
... ... @@ -1220,32 +1233,38 @@ AIA.controller(&quot;HomeController&quot;, [&quot;$rootScope&quot;, &quot;Modules&quot;, &quot;$log&quot;, &quot;$location&quot;,
1220 1233 switch ($rootScope.shapeType) {
1221 1234 case "Line":
1222 1235 $(".line").remove();
  1236 + $rootScope.islineMoved = true;
1223 1237 // console.log($rootScope.MouseMoveXAxis - $rootScope.offsetX1);
1224 1238 $("#canvasDiv").append("<div class='line' style='border:1px dashed #AEAEAE;position:absolute;left:" + $rootScope.offsetX1 + "px;top:" + $rootScope.offsetY1 + "px;'></div>");
1225 1239 $rootScope.Annotationangle();
1226 1240 break;
1227 1241 case "Arrow":
1228 1242 $(".arrow").remove();
  1243 + $rootScope.isarrowMoved = true;
1229 1244 $("#canvasDiv").append("<div class='arrow' style='border:1px dashed #AEAEAE;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>");
1230 1245 $rootScope.Annotationangle();
1231 1246 break;
1232 1247 case "Pin":
1233 1248 $(".pin").remove();
  1249 + $rootScope.isPinMoved = true;
1234 1250 $("#canvasDiv").append("<div class='pin' style='border:1px dashed #AEAEAE;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>");
1235 1251 $rootScope.Annotationangle();
1236 1252 break;
1237 1253 case "Circle":
1238 1254 $(".circle").remove();
  1255 + $rootScope.iscircleMoved = true;
1239 1256 // console.log($rootScope.offsetX1 + " " + $rootScope.offsetY1 + " " + Math.abs($rootScope.MouseMoveXAxis - $rootScope.offsetX1) + " " + Math.abs($rootScope.MouseMoveYAxis - $rootScope.offsetY1));
1240 1257 $("#canvasDiv").append("<div class='circle' style='border-radius:50%;border:1px dashed #AEAEAE;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>");
1241 1258 break;
1242 1259 case "Rectangle":
1243 1260 $(".rectangle").remove();
  1261 + $rootScope.isrectangleMoved = true;
1244 1262 // console.log($rootScope.offsetX1 + " " + $rootScope.offsetY1 + " " + Math.abs($rootScope.MouseMoveXAxis - $rootScope.offsetX1) + " " + Math.abs($rootScope.MouseMoveYAxis - $rootScope.offsetY1));
1245 1263 $("#canvasDiv").append("<div class='rectangle' style='border:1px dashed #AEAEAE;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>");
1246 1264 break;
1247 1265 case "TextArea":
1248 1266 $(".textarea").remove();
  1267 + $rootScope.istextAreaMoved = true;
1249 1268 // console.log($rootScope.offsetX1 + " " + $rootScope.offsetY1 + " " + Math.abs($rootScope.MouseMoveXAxis - $rootScope.offsetX1) + " " + Math.abs($rootScope.MouseMoveYAxis - $rootScope.offsetY1));
1250 1269 $("#canvasDiv").append("<div class='textarea' style='border:1px dashed #AEAEAE;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>");
1251 1270 break;
... ... @@ -1270,6 +1289,7 @@ AIA.controller(&quot;HomeController&quot;, [&quot;$rootScope&quot;, &quot;Modules&quot;, &quot;$log&quot;, &quot;$location&quot;,
1270 1289 theta = Math.atan(dy / dx) * (180 / Math.PI);
1271 1290 }
1272 1291 var dottedLineWidth = Math.sqrt(($rootScope.offsetX1 - $rootScope.MouseMoveXAxis) * ($rootScope.offsetX1 - $rootScope.MouseMoveXAxis) + ($rootScope.offsetY1 - $rootScope.MouseMoveYAxis) * ($rootScope.offsetY1 - $rootScope.MouseMoveYAxis));
  1292 +
1273 1293 switch ($rootScope.shapeType) {
1274 1294 case "Line":
1275 1295 $('.line').css({ 'transform': 'rotate(' + theta + 'deg)', '-moz-transform': 'rotate(' + theta + 'deg)', '-webkit-transform': 'rotate(' + theta + 'deg)', 'transform-origin': '0% 0%', 'width': dottedLineWidth + 'px' });
... ... @@ -1313,6 +1333,7 @@ AIA.controller(&quot;HomeController&quot;, [&quot;$rootScope&quot;, &quot;Modules&quot;, &quot;$log&quot;, &quot;$location&quot;,
1313 1333 fillStyle: $rootScope.fontColor,
1314 1334 fontStyle: $rootScope.fontWeight + " " + $rootScope.fontStyle,
1315 1335 fontSize: $rootScope.fontSizes,
  1336 + fromCenter: false,
1316 1337 fontFamily: $rootScope.fontFamily,
1317 1338 align: $rootScope.textAlignmt,
1318 1339 strokeWidth: 0,
... ... @@ -1336,6 +1357,7 @@ AIA.controller(&quot;HomeController&quot;, [&quot;$rootScope&quot;, &quot;Modules&quot;, &quot;$log&quot;, &quot;$location&quot;,
1336 1357 opacity: $rootScope.shapestyleOpacity,
1337 1358 strokeStyle: $rootScope.shapestyleborderColor,
1338 1359 strokeWidth: $rootScope.shapestyleborderWidth,
  1360 + fromCenter: false,
1339 1361 x: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].x, y: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].y,
1340 1362 width: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].width,
1341 1363 height: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].height,
... ... @@ -1604,6 +1626,7 @@ AIA.controller(&quot;HomeController&quot;, [&quot;$rootScope&quot;, &quot;Modules&quot;, &quot;$log&quot;, &quot;$location&quot;,
1604 1626 fontFamily: _modifiedFontFamily,
1605 1627 align: _modifiedTextAlign,
1606 1628 strokeWidth: 0,
  1629 + fromCenter: false,
1607 1630 text: _modifiedText,
1608 1631 x: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].x, y: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].y,
1609 1632 maxWidth: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].width,
... ... @@ -1618,6 +1641,7 @@ AIA.controller(&quot;HomeController&quot;, [&quot;$rootScope&quot;, &quot;Modules&quot;, &quot;$log&quot;, &quot;$location&quot;,
1618 1641 groups: ['TextAreaAfterEdit_' + $rootScope.resetTextSave],
1619 1642 dragGroups: ['TextAreaAfterEdit_' + $rootScope.resetTextSave],
1620 1643 opacity: $rootScope.shapestyleOpacity,
  1644 + fromCenter: false,
1621 1645 strokeStyle: $rootScope.shapestyleborderColor,
1622 1646 strokeWidth: $rootScope.shapestyleborderWidth,
1623 1647 x: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].x, y: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].y,
... ...