ADAM / AIAHTML5

Commit 0168f33a87800ccedae2f4798331563bf1f7af53

Authored by unknown
1 parent c834bc9c

Commit changes for Annotation in CI module.

Inline Side-by-side
Showing 4 changed files with 908 additions and 13 deletions
400-SOURCECODE/AIAHTML5.Web/app/controllers/CIController.js
  View file @0168f33
... ... @@ -282,8 +282,10 @@ function ($scope, $window, $rootScope, $compile, $http, log, $location, $timeout
282 282 $("html,body").scrollTop(0);
283 283 }
284 284  
  285 +
285 286 $scope.openView = function ($event) {
286   -
  287 +
  288 + $rootScope.CIAnotationIdentifyModeOff = true;
287 289 $rootScope.currentBodyViewId = $event.currentTarget.id;
288 290 if ($event.currentTarget.textContent !== null && typeof ($event.currentTarget.textContent) !== "undefined") {
289 291 var CITitle = [];
... ... @@ -402,7 +404,8 @@ function ($scope, $window, $rootScope, $compile, $http, log, $location, $timeout
402 404 theme: 'success',
403 405 currentController: 'CIController',
404 406 parentSlug: 'clinical-illustrations',
405   - content: '<div class="row"><div class="col-sm-12 img-thumbnail" align="center">' +
  407 + content: '<div class="row"><div style="align:left;width:100%;height:100%"><canvas id="canvas" ng-click="doClick($event)" width="1369" height="325" class="canvas-annotationStyle" style="position: absolute; background-color: transparent;z-index:1 "></canvas></div> <canvas id="canvasPaint" ng-click="FreeStylePaint($event)" width="1369" height="325" class="canvas-annotationStyle1" style="position: absolute;z-index:0;"></canvas>' +
  408 + '<div class="col-sm-12 img-thumbnail" align="center">' +
406 409 '<img src="' + $scope.clickedCIImage + '" alt="" title="" class="img-responsive "><div class="col-sm-12 well">' +
407 410 '<div align="left" id="sid"><p>' + $scope.clickedCISummary + '</p></div><button id="btnTxtOnOff" class="btn btn-primary pull-right">Text Off</button>' +
408 411 '<script>$(document).ready(function(){$("#btnTxtOnOff").click(function(){$("#sid").toggle();if($.trim($(this).text()) === "Text Off"){$(this).text("Text On");}else{$(this).text("Text Off");}});});</script></div>' +
... ... @@ -467,8 +470,893 @@ function ($scope, $window, $rootScope, $compile, $http, log, $location, $timeout
467 470 $('#CIView').css("width", $(window).outerWidth());
468 471  
469 472 }
  473 + //khushbu
  474 + $scope.$on('annotationToolEvent', function (event, data) {
  475 + $("#canvas").css("display", "block");
  476 + $("#canvasPaint").css("display", "block");
  477 +
  478 + $scope.doClick();
  479 + // $rootScope.FreeStylePaint();
  480 + });
  481 +
  482 +
  483 + $scope.clicked = true;
  484 + $scope.offsetX1 = 0;
  485 + $scope.offsetY1 = 0;
  486 + $scope.x = 0;
  487 + $scope.y = 0;
  488 + $scope.doClick = function (event) {
  489 +
  490 + $scope.clicked = true;
  491 + // OnPaintCanvasMouseDown(event);
  492 + canvas.addEventListener('mousedown', $scope.OnPaintCanvasMouseDown, false);
  493 + canvas.addEventListener('mouseup', $scope.OnPaintCanvasMouseUp, false);
  494 + // alert("doclick");
  495 + };
  496 +
  497 + $scope.mousePressed = false;
  498 + $scope.lastX; $scope.lastY;
  499 + var ctx;
  500 +
  501 + $scope.OnPaintCanvasMouseDown = function (event) {
  502 + // alert("testing333");
  503 + var canvasElement = document.getElementById("canvas");
  504 + var ctx = canvasElement.getContext("2d");
  505 +
  506 + // var x = event.clientX;
  507 + // var y = event.clientY;
  508 + $scope.offsetX1 = 0;
  509 + $scope.offsetY1 = 0;
  510 + $scope.offsetX1 = event.offsetX;
  511 + $scope.offsetY1 = event.offsetY;
  512 +
  513 + ctx.clearRect(0, 0, 2277, 3248);
  514 + $scope.clicked = true;
  515 + }
  516 + $rootScope.resetRectCI = 0;
  517 + $rootScope.resetLineCI = 0;
  518 + $rootScope.resetCircleCI = 0;
  519 + $rootScope.resetArrowCI = 0;
  520 + $rootScope.resetPinCI = 0;
  521 + $rootScope.resetPinArcCI = 0;
  522 + $rootScope.ObjectIndexCI = 0;
  523 + $rootScope.Object1IndexCI = 0;
  524 + $rootScope.Object2IndexCI = 0;
  525 + $rootScope.resetTextCI = 0;
  526 + $rootScope.resetTextSaveCI = 0;
  527 + $rootScope.ObjectIndexSaveCI = 0;
  528 + var arrayRect = {};
  529 +
  530 +
  531 + var storeLine = '';
  532 + $rootScope.canvasLayerNameCollection1CI = [];
  533 + $scope.OnPaintCanvasMouseUp = function (event) {
  534 +
  535 + if (!$scope.clicked) {
  536 + return;
  537 + }
  538 + $scope.clicked = false;
  539 + $scope.x = 0;
  540 + $scope.y = 0;
  541 + $scope.x = parseInt(event.clientX - ($("#canvas").offset().left));
  542 + $scope.y = parseInt(event.clientY - ($("#canvas").offset().top));
  543 +
  544 + var canvasElement = document.getElementById("canvas");
  545 + var ctx = canvasElement.getContext("2d");
  546 +
  547 + var canvasElement1 = document.getElementById("canvasPaint");
  548 + var ctx1 = canvasElement1.getContext("2d");
  549 +
  550 +
  551 + switch ($rootScope.shapeType) {
  552 +
  553 + case "cursor":
  554 + // ctx.clearRect(0, 0, 2277, 3248);
  555 + ctx.beginPath();
  556 + ctx1.beginPath();
  557 +
  558 +
  559 + break;
  560 +
  561 + case "Line":
  562 +
  563 + $rootScope.resetLineCI = $rootScope.ObjectIndexCI++;
  564 + $('#canvas').addLayer({
  565 + name: 'Line_' + $rootScope.resetLineCI,
  566 + layer: true,
  567 + type: 'line',
  568 + draggable: true,
  569 + strokeStyle: $rootScope.shapestyleborderColor,
  570 + strokeWidth: $rootScope.shapestyleborderWidth,
  571 + rounded: true,
  572 + x1: $scope.offsetX1, y1: $scope.offsetY1,
  573 + x2: $scope.x, y2: $scope.y,
  574 +
  575 + click: function (layer) {
  576 + $rootScope.canvasLayerNameCollectionCI = [];
  577 + $rootScope.canvasLayerNameCollectionCI.push(layer.name);
  578 + $('#canvas').setLayer(layer.name, {
  579 + handle: {
  580 + type: 'arc',
  581 + fillStyle: '#fff',
  582 + strokeStyle: '#c33',
  583 + strokeWidth: 2,
  584 + radius: 3
  585 + }
  586 + }).drawLayers();
  587 +
  588 +
  589 + },
  590 + mouseout: function (layer) {
  591 + $rootScope.canvasLayerNameCollectionCI = [];
  592 + $('#canvas').setLayer(layer.name, {
  593 + handle: {
  594 + type: 'arc',
  595 + fillStyle: '#fff',
  596 + strokeStyle: '#c33',
  597 + strokeWidth: 0,
  598 + radius: 0
  599 + }
  600 +
  601 + }).drawLayers();
  602 +
  603 + },
  604 + mouseover: function (layer) {
  605 +
  606 +
  607 + $('#canvas').setLayer(layer.name, {
  608 + handle: {
  609 + type: 'arc',
  610 + fillStyle: '#fff',
  611 + strokeStyle: '#c33',
  612 + strokeWidth: 2,
  613 + radius: 3
  614 + }
  615 + }).drawLayers();
  616 +
  617 + }
  618 +
  619 + }).drawLayers();
  620 + $('.btnCursor').trigger('click');
  621 + $(".btn-annotation").removeClass("activebtncolor");
  622 + $('.btnCursor').addClass('activebtncolor');
  623 + break;
  624 +
  625 + case "Rectangle":
  626 + $rootScope.resetRectCI = $rootScope.ObjectIndexCI++;
  627 +
  628 + $('#canvas').addLayer({
  629 + layer: true,
  630 + name: 'Rect_' + $rootScope.resetRectCI,
  631 + fillStyle: $rootScope.shapestyleFillColor,
  632 + type: 'rectangle',
  633 + draggable: true,
  634 + strokeStyle: $rootScope.shapestyleborderColor,
  635 + opacity: $rootScope.shapestyleOpacity,
  636 + strokeWidth: $rootScope.shapestyleborderWidth,
  637 + x: $scope.offsetX1, y: $scope.offsetY1,
  638 + width: $scope.x - $scope.offsetX1,
  639 + height: $scope.y - $scope.offsetY1,
  640 +
  641 + resizeFromCenter: false,
  642 +
  643 +
  644 + click: function (layer) {
  645 + $rootScope.canvasLayerNameCollectionCI = [];
  646 + $rootScope.canvasLayerNameCollectionCI.push(layer.name);
  647 + $('#canvas').setLayer(layer.name, {
  648 + handle: {
  649 + type: 'rectangle',
  650 + fillStyle: '#fff',
  651 + strokeStyle: '#c33',
  652 + strokeWidth: 2,
  653 + width: 5, height: 5,
  654 + cornerRadius: 3
  655 + }
  656 + }).drawLayers();
  657 +
  658 + },
  659 + mouseout: function (layer) {
  660 + $rootScope.canvasLayerNameCollectionCI = [];
  661 + $('#canvas').setLayer(layer.name, {
  662 + handle: {
  663 + type: 'rectangle',
  664 + fillStyle: 'pink',
  665 + strokeStyle: 'yellow',
  666 + strokeWidth: 0,
  667 + width: 0, height: 0,
  668 + cornerRadius: 0
  669 + }
  670 +
  671 + }).drawLayers();
  672 +
  673 + },
  674 + mouseover: function (layer) {
  675 +
  676 +
  677 + $('#canvas').setLayer(layer.name, {
  678 + handle: {
  679 + type: 'rectangle',
  680 + fillStyle: '#fff',
  681 + strokeStyle: '#c33',
  682 + strokeWidth: 2,
  683 + width: 5, height: 5,
  684 + cornerRadius: 3
  685 + }
  686 + }).drawLayers();
  687 +
  688 + }
  689 + }).drawLayers();
  690 +
  691 +
  692 +
  693 + $('.btnCursor').trigger('click');
  694 + $(".btn-annotation").removeClass("activebtncolor");
  695 + $('.btnCursor').addClass('activebtncolor');
  696 +
  697 + break;
  698 +
  699 + case "Circle":
  700 + // alert($rootScope.shapestyleborderWidth);
  701 + $rootScope.resetCircleCI = $rootScope.ObjectIndexCI++;
  702 + $('#canvas').addLayer({
  703 + layer: true,
  704 + name: 'Circle_' + $rootScope.resetCircleCI,
  705 + type: 'ellipse',
  706 + opacity: $rootScope.shapestyleOpacity,
  707 + draggable: true,
  708 + strokeStyle: $rootScope.shapestyleborderColor,
  709 + strokeWidth: $rootScope.shapestyleborderWidth,
  710 + fillStyle: $rootScope.shapestyleFillColor,
  711 + x: $scope.offsetX1, y: $scope.offsetY1,
  712 + width: ($scope.x - $scope.offsetX1) * 2, height: ($scope.y - $scope.offsetY1) * 2,
  713 + // Place a handle at each side and each corner
  714 + handlePlacement: 'both',
  715 +
  716 +
  717 +
  718 + click: function (layer) {
  719 + // alert($rootScope.shapestyleFillColor);
  720 + $rootScope.canvasLayerNameCollectionCI = [];
  721 + $rootScope.canvasLayerNameCollectionCI.push(layer.name);
  722 + $('#canvas').setLayer(layer.name, {
  723 + handle: {
  724 + type: 'arc',
  725 + fillStyle: '#fff',
  726 + strokeStyle: '#c33',
  727 + strokeWidth: 2,
  728 + radius: 3
  729 + }
  730 + }).drawLayers();
  731 +
  732 + },
  733 + mouseout: function (layer) {
  734 + $rootScope.canvasLayerNameCollectionCI = [];
  735 +
  736 + $('#canvas').setLayer(layer.name, {
  737 + handle: {
  738 + type: 'arc',
  739 + fillStyle: '#fff',
  740 + strokeStyle: '#c33',
  741 + strokeWidth: 0,
  742 + // width: 0, height: 0,
  743 + radius: 0
  744 + }
  745 +
  746 + }).drawLayers();
  747 +
  748 + },
  749 + mouseover: function (layer) {
  750 +
  751 +
  752 + $('#canvas').setLayer(layer.name, {
  753 + handle: {
  754 + type: 'arc',
  755 + fillStyle: '#fff',
  756 + strokeStyle: '#c33',
  757 + strokeWidth: 2,
  758 + // width: 5, height: 5,
  759 + radius: 3
  760 + }
  761 + }).drawLayers();
  762 +
  763 + }
  764 + }).drawLayers();
  765 + $('.btnCursor').trigger('click');
  766 + $(".btn-annotation").removeClass("activebtncolor");
  767 + $('.btnCursor').addClass('activebtncolor');
  768 + break;
  769 + case "Arrow":
  770 + $rootScope.resetArrowCI = $rootScope.ObjectIndexCI++;
  771 +
  772 + $('#canvas').drawLine({
  773 + layer: true,
  774 + name: 'Arrow_' + $rootScope.resetArrowCI,
  775 + draggable: true,
  776 + strokeStyle: $rootScope.shapestyleborderColor,
  777 + strokeWidth: $rootScope.shapestyleborderWidth,
  778 + rounded: true,
  779 + startArrow: true,
  780 + arrowRadius: 7,
  781 + arrowAngle: 90,
  782 + x1: $scope.offsetX1, y1: $scope.offsetY1,
  783 + x2: $scope.x, y2: $scope.y,
  784 +
  785 + click: function (layer) {
  786 + $rootScope.canvasLayerNameCollectionCI = [];
  787 + $rootScope.canvasLayerNameCollectionCI.push(layer.name);
  788 + $('#canvas').setLayer(layer.name, {
  789 + handle: {
  790 + type: 'arc',
  791 + fillStyle: '#fff',
  792 + strokeStyle: '#c33',
  793 + strokeWidth: 2,
  794 + // width: 5, height: 5,
  795 + radius: 3
  796 + }
  797 + }).drawLayers();
  798 + // $("#canvas").removeLayer(layer.name).drawLayers();
  799 +
  800 + },
  801 + mouseout: function (layer) {
  802 + $rootScope.canvasLayerNameCollectionCI = [];
  803 + $('#canvas').setLayer(layer.name, {
  804 + handle: {
  805 + type: 'arc',
  806 + fillStyle: '#fff',
  807 + strokeStyle: '#c33',
  808 + strokeWidth: 0,
  809 + // width: 0, height: 0,
  810 + radius: 0
  811 + }
  812 +
  813 + }).drawLayers();
  814 +
  815 + },
  816 + mouseover: function (layer) {
  817 +
  818 +
  819 + $('#canvas').setLayer(layer.name, {
  820 + handle: {
  821 + type: 'arc',
  822 + fillStyle: '#fff',
  823 + strokeStyle: '#c33',
  824 + strokeWidth: 2,
  825 + // width: 5, height: 5,
  826 + radius: 3
  827 + }
  828 + }).drawLayers();
  829 +
  830 + }
  831 +
  832 + });
  833 + $('.btnCursor').trigger('click');
  834 + $(".btn-annotation").removeClass("activebtncolor");
  835 + $('.btnCursor').addClass('activebtncolor');
  836 +
  837 + // $scope.resetRect += 1;
  838 + break;
  839 + case "Pin":
  840 +
  841 + $rootScope.resetPinCI = $rootScope.Object2IndexCI++;
  842 + $rootScope.resetPinArc = $rootScope.Object1IndexCI++;
  843 + var radial = $('canvas').createGradient({
  844 + x1: 50, y1: 50,
  845 + x2: 50, y2: 50,
  846 + r1: 10, r2: 30,
  847 + c1: 'rgba(100, 50, 0,0)',
  848 + c2: 'grey'
  849 + });
  850 + $('#canvas').drawLine({
  851 + draggable: true,
  852 + layer: true,
  853 + name: "Pin_" + $rootScope.resetPinCI,
  854 + groups: ["Pin_" + $rootScope.resetPinCI],
  855 + dragGroups: ["Pin_" + $rootScope.resetPinCI],
  856 + strokeStyle: 'black',
  857 + strokeWidth: 2,
  858 + x1: $scope.offsetX1, y1: $scope.offsetY1,
  859 + x2: $scope.x, y2: $scope.y,
  860 +
  861 + click: function (layer) {
  862 +
  863 + $rootScope.shapeTypePinCI = "Pin";
  864 + $rootScope.canvasLayerNameCollectionCI = [];
  865 + var pinLine_layer = layer.name;
  866 + var pinLine_layer_split = pinLine_layer.split("_");
  867 + var pinArcName = "ArcPin_";
  868 + var pinResult = pinArcName.concat(pinLine_layer_split[1]);
  869 +
  870 + $rootScope.canvasLayerNameCollectionCI.push({ pinName: layer.name, ArcName: pinResult });
  871 +
  872 + $('#canvas').setLayer(layer.name, {
  873 + handle: {
  874 + type: 'arc',
  875 + fillStyle: '#fff',
  876 + strokeStyle: '#c33',
  877 + strokeWidth: 2,
  878 + // width: 5, height: 5,
  879 + radius: 3
  880 + }
  881 + }).drawLayers();
  882 +
  883 +
  884 + },
  885 + mouseout: function (layer) {
  886 +
  887 + $rootScope.canvasLayerNameCollectioCI = [];
  888 + $('#canvas').setLayer(layer.name, {
  889 + handle: {
  890 + type: 'arc',
  891 + fillStyle: '#fff',
  892 + strokeStyle: '#c33',
  893 + strokeWidth: 0,
  894 + // width: 0, height: 0,
  895 + radius: 0
  896 + }
  897 +
  898 + }).drawLayers();
  899 +
  900 + },
  901 + mouseover: function (layer) {
  902 +
  903 +
  904 + $('#canvas').setLayer(layer.name, {
  905 + handle: {
  906 + type: 'arc',
  907 + fillStyle: '#fff',
  908 + strokeStyle: '#c33',
  909 + strokeWidth: 2,
  910 + // width: 5, height: 5,
  911 + radius: 3
  912 + }
  913 + }).drawLayers();
  914 +
  915 + }
  916 + }).drawArc({
  917 + draggable: true,
  918 + name: "ArcPin_" + $rootScope.resetPinArcCI,
  919 + // name: "Pin_" + $rootScope.resetPinCI,
  920 + layer: true,
  921 + groups: ["Pin_" + $rootScope.resetPinCI],
  922 + dragGroups: ["Pin_" + $rootScope.resetPinCI],
  923 + strokeStyle: 'grey',
  924 + strokeWidth: 2,
  925 + fillStyle: radial,
  926 + x: $scope.offsetX1, y: $scope.offsetY1,
  927 + radius: 5,
  928 + //handle: {
  929 + // type: 'arc',
  930 + // fillStyle: '#fff',
  931 + // strokeStyle: '#c33',
  932 + // strokeWidth: 2,
  933 + // radius: 3
  934 + //},
  935 + add: function (layer) {
  936 +
  937 + $rootScope.resetPinArcCI = layer.name;
  938 + // $scope.arr = [];
  939 +
  940 +
  941 + },
  942 +
  943 + }).drawLayers();
  944 + $('.btnCursor').trigger('click');
  945 + $(".btn-annotation").removeClass("activebtncolor");
  946 + $('.btnCursor').addClass('activebtncolor');
  947 + break;
  948 + case "TextArea":
  949 + $rootScope.IsTextAlreadySaveCI = false;
  950 + $("#text_area").val('');
  951 + // Draw text
  952 + $rootScope.resetTextRectCI = $rootScope.ObjectIndexCI++;
  953 + $rootScope.resetTextCI = $rootScope.ObjectIndexCI++;
  954 + $('#canvas').drawText({
  955 + layer: true,
  956 + draggable: true,
  957 + // opacity: $rootScope.shapestyleOpacity,
  958 + name: 'TextArea_' + $rootScope.resetTextCI,
  959 + groups: ['TextArea_' + $rootScope.resetTextCI],
  960 + dragGroups: ['TextArea_' + $rootScope.resetTextCI],
  961 + fillStyle: '#36c',
  962 + strokeWidth: 0,
  963 + x: $scope.offsetX1, y: $scope.offsetY1,
  964 + fontSize: '14pt',
  965 + align: "left",
  966 + fontFamily: 'Verdana, sans-serif',
  967 + text: ''
  968 +
  969 + })
  970 + // Draw rect as wide as the text
  971 + .drawRect({
  972 + layer: true,
  973 + name: "TextRect_" + $rootScope.resetTextRectCI,
  974 + dragGroups: ['shapes'],
  975 + opacity: $rootScope.shapestyleOpacity,
  976 + strokeStyle: $rootScope.shapestyleborderColor,
  977 + strokeWidth: $rootScope.shapestyleborderWidth,
  978 + fillStyle: $rootScope.shapestyleFillColor,
  979 + x: $scope.offsetX1, y: $scope.offsetY1,
  980 + width: $scope.x - $scope.offsetX1,
  981 + height: $scope.y - $scope.offsetY1,
  982 + click: function (layer) {
  983 +
  984 + $rootScope.canvasLayerNameCollectionCI = [];
  985 + $rootScope.canvasLayerNameCollectionCI.push(layer.name);
  986 + $('#canvas').setLayer(layer.name, {
  987 + handle: {
  988 + type: 'rectangle',
  989 + fillStyle: '#fff',
  990 + strokeStyle: '#c33',
  991 + strokeWidth: 2,
  992 + width: 5, height: 5,
  993 + cornerRadius: 3
  994 + }
  995 + }).drawLayers();
  996 +
  997 + },
  998 + mouseout: function (layer) {
  999 + $rootScope.canvasLayerNameCollectionCI = [];
  1000 + $('#canvas').setLayer(layer.name, {
  1001 + handle: {
  1002 + type: 'rectangle',
  1003 + fillStyle: 'pink',
  1004 + strokeStyle: 'yellow',
  1005 + strokeWidth: 0,
  1006 + width: 0, height: 0,
  1007 + cornerRadius: 0
  1008 + }
  1009 +
  1010 + }).drawLayers();
  1011 +
  1012 + },
  1013 + mouseover: function (layer) {
  1014 +
  1015 + $('#canvas').setLayer(layer.name, {
  1016 + handle: {
  1017 + type: 'rectangle',
  1018 + fillStyle: '#fff',
  1019 + strokeStyle: '#c33',
  1020 + strokeWidth: 2,
  1021 + width: 5, height: 5,
  1022 + cornerRadius: 3
  1023 + }
  1024 + }).drawLayers();
  1025 +
  1026 + }
  1027 + });
  1028 +
  1029 +
  1030 + $("#annotationTextModal").modal("toggle");
  1031 + $('.btnCursor').trigger('click');
  1032 + $("#text_area").val('');
  1033 + $("#text_area").css({ " font-family": 'Verdana, sans-serif', "font-size": "14px", "font-weight": "normal", "font-style": "normal", "color": "#000", "text-align": "left", "text-decoration": "none" });
  1034 + $(".btn-annotation").removeClass("activebtncolor");
  1035 + $('.btnCursor').addClass('activebtncolor');
  1036 + break;
  1037 +
  1038 + case "DrawPolygon":
  1039 +
  1040 + break;
  1041 +
  1042 + }
  1043 + //}
  1044 +
  1045 + }
  1046 +
  1047 + //-- TextArea functionality of Annotation toolbar
  1048 +
  1049 + $rootScope.fontSizesCI;
  1050 + $rootScope.fontWeightCI;
  1051 + $rootScope.fontStyleCI;
  1052 + $rootScope.textAlignmtCI;
  1053 + $rootScope.fontColorCI;
  1054 + $rootScope.underlineTextCI;
  1055 + $rootScope.textAreaCI;
  1056 + $rootScope.fontFamilyCI;
  1057 + $rootScope.TextPropertyArrayCI = [];
  1058 + $rootScope.modifySavedTextCI = [];
  1059 + $rootScope.TextRectangleArrCI = [];
  1060 + $rootScope.rectDimensionCI = [];
  1061 +
  1062 +
  1063 + // will refactor this code later
  1064 +
  1065 +
  1066 + $rootScope.saveText = function () {
  1067 + // this part will work first time when save button will be clicked
  1068 + if ($rootScope.IsTextAlreadySaveCI == false) {
  1069 + // getting textarea style properties
  1070 + $rootScope.fontSizesCI = $("#text_area").css("font-size");
  1071 + $rootScope.fontWeightCI = $("#text_area").css("font-weight");
  1072 + $rootScope.fontStyleCI = $("#text_area").css("font-style");
  1073 + $rootScope.textAlignmtCI = $("#text_area").css("text-align");
  1074 + $rootScope.fontColorCI = $("#text_area").css("color");
  1075 + $rootScope.fontFamilyCI = $("#text_area").css("font-family");
  1076 + $rootScope.underlineTextCI = $("#text_area").css("text-decoration");
  1077 + $rootScope.textAreaCI = $("#text_area").val();
  1078 +
  1079 + // deleting previous text area
  1080 +
  1081 + $("#canvas").removeLayer('TextArea_' + $rootScope.resetTextCI).drawLayers();
  1082 + $("#canvas").removeLayer("TextRect_" + $rootScope.resetTextRectCI).drawLayers();
  1083 +
  1084 + // Text After Saving in Rectangle
  1085 + $('#canvas').drawText({
  1086 + layer: true,
  1087 + draggable: true,
  1088 + name: 'TextArea_' + $rootScope.resetTextCI,
  1089 + groups: ['TextArea_' + $rootScope.resetTextCI],
  1090 + dragGroups: ['TextArea_' + $rootScope.resetTextCI],
  1091 + fillStyle: $rootScope.fontColorCI,
  1092 + fontStyle: $rootScope.fontStyleCI,
  1093 + fontSize: $rootScope.fontSizesCI,
  1094 + fontFamily: $rootScope.fontFamilyCI,
  1095 + align: $rootScope.textAlignmtCI,
  1096 + strokeWidth: 0,
  1097 + text: $rootScope.textAreaCI,
  1098 + x: $scope.offsetX1, y: $scope.offsetY1,
  1099 + maxWidth: $scope.x - $scope.offsetX1,
  1100 + maxHeight: $scope.y - $scope.offsetY1,
  1101 + add: function (layer) {
  1102 + $rootScope.TextPropertyArrayCI.push({ Text1: '', Align: '', FontColor: '', FontSize: '', FontStyle: '', FontFamily: '' });
  1103 + $rootScope.TextPropertyArrayCI.push({ Text1: layer.text, Align: layer.align, FontColor: layer.fillStyle, FontSize: layer.fontSize, FontStyle: layer.fontStyle, FontFamily: layer.fontFamily });
  1104 + }
  1105 + })
  1106 + // Draw rectangle
  1107 + .drawRect({
  1108 + name: 'TextArea1_' + $rootScope.resetTextCI,
  1109 + layer: true,
  1110 + draggable: true,
  1111 + groups: ['TextArea_' + $rootScope.resetTextCI],
  1112 + dragGroups: ['TextArea_' + $rootScope.resetTextCI],
  1113 + opacity: $rootScope.shapestyleOpacity,
  1114 + strokeStyle: $rootScope.shapestyleborderColor,
  1115 + strokeWidth: $rootScope.shapestyleborderWidth,
  1116 + x: $scope.offsetX1, y: $scope.offsetY1,
  1117 + width: $scope.x - $scope.offsetX1,
  1118 + height: $scope.y - $scope.offsetY1,
  1119 + click: function (layer) {
  1120 + $rootScope.shapeTypeTextCI = "textAreaRect";
  1121 +
  1122 + var layerNameSplit = layer.name;
  1123 + var splitedName = layerNameSplit.split("_");
  1124 + var textValName = "TextArea_";
  1125 + var concatinateResult = textValName.concat(splitedName[1]);
  1126 + $rootScope.canvasLayerNameCollectionCI = [];
  1127 + $rootScope.canvasLayerNameCollectionCI.push({ textareaRectangle: layer.name, textareaString: concatinateResult });
  1128 + $('#canvas').setLayer(layer.name, {
  1129 + handle: {
  1130 + type: 'rectangle',
  1131 + fillStyle: '#fff',
  1132 + strokeStyle: '#c33',
  1133 + strokeWidth: 2,
  1134 + width: 5, height: 5,
  1135 + cornerRadius: 3
  1136 + }
  1137 + }).drawLayers();
  1138 + },
  1139 + dblclick: function (layer) {
  1140 + $rootScope.IsTextAlreadySaveCI = true;
  1141 +
  1142 + var _rectLayerOnSave = layer.name;
  1143 + var _rectLayerOnSaveSplit = _rectLayerOnSave.split("_");
  1144 + var TextAreaRectName = "TextArea_";
  1145 + var TextAreaRectNameConcatenated = TextAreaRectName.concat(_rectLayerOnSaveSplit[1]);
  1146 + $rootScope.modifySavedTextCI.push({ TextName: layer.name, RectText: TextAreaRectNameConcatenated });
  1147 + $rootScope.rectDimensionCI.push({ width: layer.width, height: layer.height, x: layer.x, y: layer.y });
  1148 + var _rectLayerOnSaveSplitInt;
  1149 + if (_rectLayerOnSaveSplit[1] >= 3)
  1150 + _rectLayerOnSaveSplitInt = parseInt(_rectLayerOnSaveSplit[1] - 2);
  1151 + else
  1152 + _rectLayerOnSaveSplitInt = parseInt(_rectLayerOnSaveSplit[1]);
  1153 + var b = $rootScope.TextPropertyArrayCI[_rectLayerOnSaveSplitInt].Text1;
  1154 + $("#text_area").val(b);
  1155 + $("#text_area").css("font-size", $rootScope.TextPropertyArrayCI[_rectLayerOnSaveSplitInt].FontSize);
  1156 + $("#text_area").css("font-weight", $rootScope.TextPropertyArrayCI[_rectLayerOnSaveSplitInt].FontStyle);
  1157 + $("#text_area").css("font-style", $rootScope.TextPropertyArrayCI[_rectLayerOnSaveSplitInt].FontStyle);
  1158 + $("#text_area").css("text-align", $rootScope.TextPropertyArrayCI[_rectLayerOnSaveSplitInt].Align);
  1159 + $("#text_area").css("color", $rootScope.TextPropertyArrayCI[_rectLayerOnSaveSplitInt].FontColor);
  1160 + $("#text_area").css("font-family", $rootScope.TextPropertyArrayCI[_rectLayerOnSaveSplitInt].FontFamily);
  1161 + $("#text_area").css("text-decoration", $rootScope.underlineTextCI);
  1162 + _rectLayerOnSaveSplitInt = ''; b = '';
  1163 + $("#annotationTextModal").modal("toggle");
  1164 + },
  1165 + mouseout: function (layer) {
  1166 + $rootScope.canvasLayerNameCollectionCI = [];
  1167 + $('#canvas').setLayer(layer.name, {
  1168 + handle: {
  1169 + type: 'rectangle',
  1170 + fillStyle: 'pink',
  1171 + strokeStyle: 'yellow',
  1172 + strokeWidth: 0,
  1173 + width: 0, height: 0,
  1174 + cornerRadius: 0
  1175 + }
  1176 + }).drawLayers();
  1177 + },
  1178 + mouseover: function (layer) {
  1179 + $('#canvas').setLayer(layer.name, {
  1180 + handle: {
  1181 + type: 'rectangle',
  1182 + fillStyle: '#fff',
  1183 + strokeStyle: '#c33',
  1184 + strokeWidth: 2,
  1185 + width: 5, height: 5,
  1186 + cornerRadius: 3
  1187 + }
  1188 + }).drawLayers();
  1189 +
  1190 + }
  1191 + });
  1192 + $("#text_area").val('');
  1193 + $("#text_area").css({ " font-family": "'Verdana, sans-serif'", "font-size": "14px", "font-weight": "normal", "font-style": "normal", "color": "#000", "text-align": "left", "text-decoration": "none" });
  1194 +
  1195 + }
  1196 +
  1197 + // this part will work second time when save button will be clicked
  1198 + else {
  1199 + // getting textarea style properties
  1200 + var _modifiedText = $("#text_area").val();
  1201 + var _modifiedFontSize = $("#text_area").css("font-size");
  1202 + var _modifiedFontWeight = $("#text_area").css("font-weight");
  1203 + var _modifiedFontStyle = $("#text_area").css("font-style");
  1204 + var _modifiedTextAlign = $("#text_area").css("text-align");
  1205 + var _modifiedFontColor = $("#text_area").css("color");
  1206 + var _modifiedFontFamily = $("#text_area").css("font-family");
  1207 + var _modifiedFontDecoration = $("#text_area").css("text-decoration");
  1208 +
  1209 + // deleting previous textarea
  1210 + $("#canvas").removeLayer($rootScope.modifySavedTextCI[0].RectText).drawLayers();
  1211 + $("#canvas").removeLayer($rootScope.modifySavedTextCI[0].TextName).drawLayers();
  1212 + $rootScope.resetTextRectSaveCI = $rootScope.ObjectIndexSaveCI++;
  1213 + $rootScope.resetTextSaveCI = $rootScope.ObjectIndexSaveCI++;
  1214 +
  1215 + // generating new text area
  1216 + $('#canvas').drawText({
  1217 + layer: true,
  1218 + draggable: true,
  1219 + name: 'TextAreaAfterEdit_' + $rootScope.resetTextSaveCI,
  1220 + groups: ['TextAreaAfterEdit_' + $rootScope.resetTextSaveCI],
  1221 + dragGroups: ['TextAreaAfterEdit_' + $rootScope.resetTextSaveCI],
  1222 + fillStyle: _modifiedFontColor,
  1223 + fontStyle: _modifiedFontStyle,
  1224 + fontSize: _modifiedFontSize,
  1225 + fontFamily: _modifiedFontFamily,
  1226 + align: _modifiedTextAlign,
  1227 + strokeWidth: 0,
  1228 + text: _modifiedText,
  1229 + x: $rootScope.rectDimensionCI[$rootScope.rectDimensionCI.length - 1].x, y: $rootScope.rectDimensionCI[$rootScope.rectDimensionCI.length - 1].y,
  1230 + maxWidth: $rootScope.rectDimensionCI[$rootScope.rectDimensionCI.length - 1].width,
  1231 + maxHeight: $rootScope.rectDimensionCI[$rootScope.rectDimensionCI.length - 1].height
  1232 +
  1233 + })
  1234 + // Draw rect as wide as the text
  1235 + .drawRect({
  1236 + name: 'TextAreaAfterEditRect_' + $rootScope.resetTextSaveCI,
  1237 + layer: true,
  1238 + draggable: true,
  1239 + groups: ['TextAreaAfterEdit_' + $rootScope.resetTextSaveCI],
  1240 + dragGroups: ['TextAreaAfterEdit_' + $rootScope.resetTextSaveCI],
  1241 + opacity: $rootScope.shapestyleOpacity,
  1242 + strokeStyle: $rootScope.shapestyleborderColor,
  1243 + strokeWidth: $rootScope.shapestyleborderWidth,
  1244 + x: $rootScope.rectDimensionCI[$rootScope.rectDimensionCI.length - 1].x, y: $rootScope.rectDimensionCI[$rootScope.rectDimensionCI.length - 1].y,
  1245 + width: $rootScope.rectDimensionCI[$rootScope.rectDimensionCI.length - 1].width,
  1246 + height: $rootScope.rectDimensionCI[$rootScope.rectDimensionCI.length - 1].height,
  1247 + click: function (layer) {
  1248 + $rootScope.shapeTypeTextCI = "textAreaRect";
  1249 + var layerNameSplit = layer.name;
  1250 + var splitedName = layerNameSplit.split("_");
  1251 + var textValName = "TextAreaAfterEdit_";
  1252 + var concatinateResult = textValName.concat(splitedName[1]);
  1253 + $rootScope.canvasLayerNameCollectionCI = [];
  1254 + $rootScope.canvasLayerNameCollectionCI.push({ textareaRectangle: layer.name, textareaString: concatinateResult });
  1255 +
  1256 + $('#canvas').setLayer(layer.name, {
  1257 + handle: {
  1258 + type: 'rectangle',
  1259 + fillStyle: '#fff',
  1260 + strokeStyle: '#c33',
  1261 + strokeWidth: 2,
  1262 + width: 5, height: 5,
  1263 + cornerRadius: 3
  1264 + }
  1265 + }).drawLayers();
  1266 +
  1267 + },
  1268 + dblclick: function (layer) {
  1269 +
  1270 + $rootScope.IsTextAlreadySaveCI = true;
  1271 + var _rectLayerOnSave = layer.name;
  1272 + var _rectLayerOnSaveSplit = _rectLayerOnSave.split("_");
  1273 + var RectNameAfterEdit = "TextAreaAfterEdit_";
  1274 + var RectNameAfterEditResult = RectNameAfterEdit.concat(_rectLayerOnSaveSplit[1]);
  1275 + $rootScope.modifySavedTextCI.push({ TextName: layer.name, RectText: RectNameAfterEditResult });
  1276 + $rootScope.rectDimensionCI.push({ width: layer.width, height: layer.height, x: layer.x, y: layer.y });
  1277 + $("#text_area").val(_modifiedText);
  1278 + $("#text_area").css("font-size", _modifiedFontSize);
  1279 + $("#text_area").css("font-weight", _modifiedFontWeight);
  1280 + $("#text_area").css("font-style", _modifiedFontStyle);
  1281 + $("#text_area").css("text-align", _modifiedTextAlign);
  1282 + $("#text_area").css("color", _modifiedFontColor);
  1283 + $("#text_area").css("font-family", _modifiedFontFamily);
  1284 + $("#text_area").css("text-decoration", _modifiedFontDecoration);
  1285 + $("#annotationTextModal").modal("toggle");
  1286 + },
  1287 + mouseout: function (layer) {
  1288 + $rootScope.canvasLayerNameCollectionCI = [];
  1289 + $('#canvas').setLayer(layer.name, {
  1290 + handle: {
  1291 + type: 'rectangle',
  1292 + fillStyle: 'pink',
  1293 + strokeStyle: 'yellow',
  1294 + strokeWidth: 0,
  1295 + width: 0, height: 0,
  1296 + cornerRadius: 0
  1297 + }
  1298 + }).drawLayers();
  1299 + },
  1300 + mouseover: function (layer) {
  1301 + $('#canvas').setLayer(layer.name, {
  1302 + handle: {
  1303 + type: 'rectangle',
  1304 + fillStyle: '#fff',
  1305 + strokeStyle: '#c33',
  1306 + strokeWidth: 2,
  1307 + width: 5, height: 5,
  1308 + cornerRadius: 3
  1309 + }
  1310 + }).drawLayers();
  1311 +
  1312 + }
  1313 + });
  1314 + $rootScope.modifySavedText = [];
  1315 +
  1316 + }
  1317 + }
  1318 +
  1319 + // deleting text area on close button
  1320 + $rootScope.closeModal = function () {
  1321 +
  1322 + $("#canvas").removeLayer('TextArea_' + $rootScope.resetTextCI).drawLayers();
  1323 + $("#canvas").removeLayer("TextRect_" + $rootScope.resetTextRectCI).drawLayers();
  1324 +
  1325 + }
  1326 +
  1327 +
  1328 + $(document).keydown(function (event) {
  1329 +
470 1330  
  1331 + if (event.which == 46) {
471 1332  
  1333 + if ($rootScope.shapeTypePinCI == "Pin") {
  1334 +
  1335 +
  1336 + $("#canvas").removeLayer($rootScope.canvasLayerNameCollectionCI[0].pinName).drawLayers();
  1337 + $("#canvas").removeLayer($rootScope.canvasLayerNameCollectionCI[0].ArcName).drawLayers();
  1338 + $rootScope.shapeTypePinCI = "";
  1339 +
  1340 + }
  1341 + else if ($rootScope.shapeTypeTextCI == "textAreaRect") {
  1342 +
  1343 +
  1344 +
  1345 + $("#canvas").removeLayer($rootScope.canvasLayerNameCollectionCI[0].textareaRectangle).drawLayers();
  1346 + $("#canvas").removeLayer($rootScope.canvasLayerNameCollectionCI[0].textareaString).drawLayers();
  1347 + $rootScope.shapeTypeTextCI = "";
  1348 +
  1349 + }
  1350 + else {
  1351 +
  1352 + // alert($rootScope.canvasLayerNameCollection);
  1353 + $("#canvas").removeLayer($rootScope.canvasLayerNameCollectionCI).drawLayers();
  1354 + }
  1355 +
  1356 +
  1357 + }
  1358 +
  1359 + });
472 1360  
473 1361 }]
474 1362  
... ...
400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js
  View file @0168f33
... ... @@ -5902,10 +5902,9 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
5902 5902 // $scope.currentY;
5903 5903 //----Annotation Toolbar: Jcanvas---
5904 5904  
5905   - $scope.$on('annotationToolEvent', function (event, data) {
  5905 + $rootScope.$on('annotationToolEvent', function (event, data) {
5906 5906 $("#canvas").css("display", "block");
5907 5907 $("#canvasPaint").css("display", "block");
5908   -
5909 5908 $scope.doClick();
5910 5909 $rootScope.FreeStylePaint();
5911 5910 });
... ... @@ -6096,7 +6095,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
6096 6095 resizeFromCenter: false,
6097 6096  
6098 6097 dblclick: function () {
6099   - $rootScope.backOpacity();
  6098 + // $rootScope.backOpacity();
6100 6099  
6101 6100 },
6102 6101  
... ...
400-SOURCECODE/AIAHTML5.Web/app/controllers/HomeController.js
  View file @0168f33
... ... @@ -133,17 +133,23 @@ AIA.controller(&quot;HomeController&quot;, [&quot;$rootScope&quot;, &quot;Modules&quot;, &quot;$log&quot;, &quot;$location&quot;,
133 133 $("#canvasPaint").css("display", "none");
134 134 $("#canvas").css("display", "none");
135 135 }
136   -
  136 + $rootScope.CIAnotationIdentifyModeOff = false;
137 137 $rootScope.OnIdentifyClick = function () {
138 138 // $rootScope.isIdetifyClicked = true;
139 139 // $rootScope.isDrawingToolSelected = false;
140   - $("#canvasPaint").css("display", "none");
141   - $("#canvas").css("display", "none");
  140 + // debugger;
  141 + if ($rootScope.CIAnotationIdentifyModeOff == true) {
  142 + $('.btnCursor').removeClass('activebtncolor');
142 143  
143   - // $("#canvasPaint").css("z-index", "0");
144   - // $("#canvas").css("z-index", "0");
145   - $('.btnCursor').removeClass('activebtncolor');
  144 + } else {
  145 + $("#canvasPaint").css("display", "none");
  146 + $("#canvas").css("display", "none");
  147 +
  148 + // $("#canvasPaint").css("z-index", "0");
  149 + // $("#canvas").css("z-index", "0");
  150 + $('.btnCursor').removeClass('activebtncolor');
146 151  
  152 + }
147 153 }
148 154  
149 155  
... ... @@ -321,7 +327,7 @@ AIA.controller(&quot;HomeController&quot;, [&quot;$rootScope&quot;, &quot;Modules&quot;, &quot;$log&quot;, &quot;$location&quot;,
321 327 $rootScope.shapestyleborderWidth = 2;
322 328 $rootScope.shapestyleborderStyles = "solid";
323 329 $rootScope.shapestyle = function (id) {
324   -
  330 + // debugger;
325 331 document.getElementById('modelbackground').style.display = "none";
326 332 document.getElementById('modeleditstyle').style.display = "none";
327 333  
... ...
400-SOURCECODE/AIAHTML5.Web/app/views/ci/clinical-illustrations-detail.html
  View file @0168f33
1 1 <div>
2 2 <div ng-include="aap/widget/MainMenu.html"></div>
3   - <div ng-init="openBodyView()" id="CIView" class="ciView" ng-controller="CIController"></div>
  3 + <div ng-init="openBodyView()" id="CIView" class="ciView" ng-controller="CIController" style=" position: absolute !important;"></div>
  4 +
  5 +
4 6 </div>
... ...