ADAM / AIAHTML5

Commit e14c243d422c5baa1302b4c860147ac3967b5009

Authored by Birendra
1 parent dd601b77

fix bug in annotation tools for text area

Inline Side-by-side
Showing 2 changed files with 91 additions and 164 deletions
400-SOURCECODE/AIAHTML5.Web/app/controllers/HomeController.js
  View file @e14c243
... ... @@ -3742,6 +3742,12 @@ function ($rootScope, $scope, Modules, $log, $location, $compile, $timeout, Data
3742 3742 };
3743 3743  
3744 3744 }
  3745 + $timeout(function(){
  3746 + $('.btnCursor').trigger('click');
  3747 + $(".btn-annotation").removeClass("activebtncolor");
  3748 + $('.btnCursor').addClass('activebtncolor');
  3749 +
  3750 + },100)
3745 3751 }
3746 3752  
3747 3753  
... ... @@ -3932,8 +3938,8 @@ function ($rootScope, $scope, Modules, $log, $location, $compile, $timeout, Data
3932 3938 $rootScope.IsTextAlreadySave = false;
3933 3939 $rootScope.TextNumber = $rootScope.ObjectIndex++;
3934 3940 $rootScope.isTextAreaPreviewCompleted = true;
3935   -
3936   - $rootScope.TextEditorFunctionality(canvasId, $rootScope.TextNumber,shapeData.text,shapeData.shapestyle,shapeData.textstyle, shapeData.x, shapeData.y, shapeData.size.width, shapeData.size.height);
  3941 +
  3942 + $rootScope.TextEditorFunctionality(canvasId, $rootScope.TextNumber,shapeData.text,shapeData.shapestyle,shapeData.textstyle, shapeData.x, shapeData.y, shapeData.size.width, shapeData.size.height);
3937 3943 break;
3938 3944  
3939 3945 }
... ... @@ -4221,7 +4227,9 @@ function ($rootScope, $scope, Modules, $log, $location, $compile, $timeout, Data
4221 4227 }
4222 4228 $rootScope.jcanvasObjectArray = [];
4223 4229 $rootScope.DrawRectangleOnModuleItem = function (canvasId, RectNumber, shapestyleFillColor, shapestyleborderColor, shapestyleOpacity, shapestyleborderWidth, offsetX1, offsetY1, width, height) {
4224   - if ($rootScope.isRectanglePreviewCompleted == true) {
  4230 + if ($rootScope.isRectanglePreviewCompleted == true) {
  4231 + if(width<30) width=30 ;
  4232 + if(height<30) height=30;
4225 4233 $rootScope.isRectanglePreviewCompleted = false;
4226 4234 $("#"+canvasId).addLayer({
4227 4235 panelCanvasId:canvasId,
... ... @@ -4237,6 +4245,8 @@ function ($rootScope, $scope, Modules, $log, $location, $compile, $timeout, Data
4237 4245 x: offsetX1, y: offsetY1,
4238 4246 width: width,
4239 4247 height: height,
  4248 + minWidth:30,
  4249 + minHeight:30,
4240 4250 resizeFromCenter: false,
4241 4251 add: function (layer) {
4242 4252 var drawingPoints={
... ... @@ -4372,7 +4382,9 @@ function ($rootScope, $scope, Modules, $log, $location, $compile, $timeout, Data
4372 4382  
4373 4383 $rootScope.DrawCircleOnModuleItem = function (canvasId, CircleNumber, shapestyleOpacity, shapestyleborderColor, shapestyleborderWidth, shapestyleFillColor, offsetX1, offsetY1, width, height) {
4374 4384  
4375   - if ($rootScope.isCirclePreviewCompleted == true) {
  4385 + if ($rootScope.isCirclePreviewCompleted == true) {
  4386 + if(width<30) width=30 ;
  4387 + if(height<30) height=30;
4376 4388 $rootScope.isCirclePreviewCompleted = false;
4377 4389 $("#"+canvasId).addLayer({
4378 4390 panelCanvasId:canvasId,
... ... @@ -4389,6 +4401,8 @@ function ($rootScope, $scope, Modules, $log, $location, $compile, $timeout, Data
4389 4401 y: offsetY1,
4390 4402 width: width,
4391 4403 height: height,
  4404 + minWidth:30,
  4405 + minHeight:30,
4392 4406 // Place a handle at each side and each corner
4393 4407 resizeFromCenter: false,
4394 4408 handlePlacement: 'both',
... ... @@ -4932,139 +4946,6 @@ function ($rootScope, $scope, Modules, $log, $location, $compile, $timeout, Data
4932 4946 document.getElementById('modelbackground').style.display = "none";
4933 4947 }
4934 4948  
4935   - $scope.RefreshShapeText=function(canvasId,selectedTextRect,selectedTextArea,areaText)
4936   - {
4937   - var contentWidthArray = [];
4938   - var contentHeightArray = [];
4939   - $rootScope.textWidth=[];
4940   - var adjustWidth=0;
4941   - var text = areaText;
4942   - var stringText="";
4943   -
4944   - var rectDimension = new jinqJs()
4945   - .from($rootScope.rectDimension)
4946   - .where('panelCanvasId == ' + canvasId,'name == ' + selectedTextRect)
4947   - .select();
4948   - var textDimension = new jinqJs()
4949   - .from($rootScope.textDimension)
4950   - .where('panelCanvasId == ' + canvasId,'name == ' + selectedTextArea)
4951   - .select();
4952   -
4953   - $("#atTextDiv").css({ "width": Math.abs(rectDimension[0].width), "height": Math.abs(rectDimension[0].height), "font-size": textDimension[0].textstyle.fontSize });
4954   -
4955   - $("#textspan").empty();
4956   - $("#textspan").css({"display":"inline-block"});
4957   -
4958   - for (var i = 0; i <= text.length - 1; i++) {
4959   - if (contentWidthArray.length > 0) {
4960   - if (parseInt(contentWidthArray[0]) < $("#atTextDiv").width()) {
4961   - //store break line by enter key
4962   - var charvalue=text[i];
4963   - var LineBreaksLen = (text[i].match(/\n/g)||[]).length;
4964   - var isaddchar=true;
4965   - if(LineBreaksLen>0)
4966   - {
4967   - var lastspace= $rootScope.textWidth[$rootScope.textWidth.length-1].character;
4968   - charvalue=" ";//replace break line in between text by white space
4969   - if(lastspace==charvalue)
4970   - {
4971   - isaddchar=false;
4972   - }
4973   - }
4974   - else
4975   - {
4976   - // handle multiple space
4977   - var lastspace= $rootScope.textWidth[$rootScope.textWidth.length-1].character;
4978   - if(lastspace==" " && charvalue==" ")
4979   - {
4980   - isaddchar=false;
4981   - }
4982   -
4983   - }
4984   - if(isaddchar)
4985   - {
4986   - stringText=stringText+charvalue;
4987   - $("#textspan").append(charvalue);
4988   - contentWidthArray = [];
4989   - $rootScope.textWidth.push({"panelCanvasId":canvasId, "id": "", "character": charvalue });
4990   - contentWidthArray.push(Math.ceil($("#textspan").width()));
4991   - }
4992   - }
4993   - else {
4994   - var LineBreaksLen = (text[i].match(/\n/g)||[]).length;
4995   - if(LineBreaksLen<=0)
4996   - {
4997   - if(adjustWidth<contentWidthArray[0])
4998   - {
4999   - adjustWidth=contentWidthArray[0];
5000   - }
5001   - contentWidthArray = [];
5002   - // handle multiple space
5003   - var lastspace= $rootScope.textWidth[$rootScope.textWidth.length-1].character;
5004   - if(lastspace!=" " && charvalue!=" ")
5005   - {
5006   - stringText=stringText+" "+text[i];
5007   - $("#textspan").text(' ');
5008   - }
5009   - else
5010   - {
5011   - stringText=stringText+text[i];
5012   - $("#textspan").text('');
5013   - }
5014   - $("#textspan").append(text[i]);
5015   - $rootScope.textWidth.push({"panelCanvasId":canvasId, "id": "", "character": text[i] });
5016   - contentWidthArray.push(Math.ceil($("#textspan").width()));
5017   - //due to dispaly none height not update again.
5018   - var totalheight = contentHeightArray[0].totalHeight;
5019   - contentHeightArray[0].totalHeight=totalheight+contentHeightArray[0].firstlineHeight;
5020   -
5021   - }
5022   -
5023   - }
5024   - }
5025   - else {
5026   - //initially ignore break line
5027   - var LineBreaksLen = (text[i].match(/\n/g)||[]).length;
5028   - if(LineBreaksLen<=0)
5029   - {
5030   - stringText=stringText+text[i];
5031   - $("#textspan").text(text[i]);
5032   - contentWidthArray = [];
5033   - $rootScope.textWidth.push({"panelCanvasId":canvasId, "id": "", "character": text[i] });;
5034   - contentWidthArray.push(Math.ceil($("#textspan").width()));
5035   - contentHeightArray.push({firstlineHeight:Math.ceil($("#textspan").height()),totalHeight:Math.ceil($("#textspan").height())});
5036   - }
5037   - }
5038   - }
5039   - $("#atTextDiv").removeAttr("style");
5040   - $("#atTextDiv").css({ "float": "left" });//reset style
5041   -
5042   - $("#textspan").css({"display":"none"});
5043   -
5044   - // manage height
5045   - if (contentHeightArray.length >0) {
5046   - // update height
5047   - $rootScope.rectDimension = new jinqJs()
5048   - .from($rootScope.rectDimension)
5049   - .update(function (coll, index) {
5050   - coll[index].height = contentHeightArray[0].totalHeight;
5051   - coll[index].width = adjustWidth>0 ?adjustWidth:coll[index].width;
5052   - })
5053   - .at('panelCanvasId == ' + canvasId,'name == ' + selectedTextRect)
5054   - .select();
5055   -
5056   -
5057   - }
5058   -
5059   - $rootScope.textDimension = new jinqJs()
5060   - .from($rootScope.textDimension)
5061   - .update(function (coll, index) { coll[index].stringText = stringText; })
5062   - .at('panelCanvasId == ' + canvasId,'name == ' + selectedTextArea)
5063   - .select();
5064   -
5065   - contentHeightArray = [];//clear hieght
5066   - }
5067   -
5068 4949 $scope.UpdateTextEditor=function(TextPropertyArray,fillStyle)
5069 4950 {
5070 4951 if (TextPropertyArray.length>0) {
... ... @@ -5156,9 +5037,13 @@ function ($rootScope, $scope, Modules, $log, $location, $compile, $timeout, Data
5156 5037 if(areaText!=undefined)
5157 5038 {
5158 5039 //not use while open from CB
5159   - $scope.RefreshShapeText(canvasId,selectedTextRect,selectedTextArea,areaText);
  5040 + $rootScope.textDimension = new jinqJs()
  5041 + .from($rootScope.textDimension)
  5042 + .update(function (coll, index) { coll[index].stringText = areaText; })
  5043 + .at('panelCanvasId == ' + canvasId,'name == ' + selectedTextArea)
  5044 + .select();
5160 5045 }
5161   -
  5046 +
5162 5047 var rectDimension = new jinqJs()
5163 5048 .from($rootScope.rectDimension)
5164 5049 .where('panelCanvasId == ' + canvasId,'name == ' + selectedTextRect)
... ... @@ -5185,8 +5070,35 @@ function ($rootScope, $scope, Modules, $log, $location, $compile, $timeout, Data
5185 5070 }
5186 5071 }
5187 5072 }
5188   -
5189   - $("#" + canvasId).drawRect({
  5073 +
  5074 + $("#" + canvasId).drawText({
  5075 + panelCanvasId:canvasId,
  5076 + layer: true,
  5077 + name: 'temptext',//use for intially adjust height and width of text for rectangle
  5078 + fillStyle:textDimension[0].textstyle.fontColor,
  5079 + fontStyle: textDimension[0].textstyle.fontWeight + " " + textDimension[0].textstyle.fontStyle,
  5080 + fontSize: textDimension[0].textstyle.fontSize,
  5081 + fromCenter: false,
  5082 + fontFamily: textDimension[0].textstyle.fontFamily,
  5083 + align: textDimension[0].textstyle.textAlignmt,
  5084 + strokeWidth: 0,
  5085 + text: textDimension[0].stringText,
  5086 + x: rectDimension[0].x, y: rectDimension[0].y,
  5087 + maxWidth:rectDimension[0].width,
  5088 + add: function (layer) {
  5089 + // internal use
  5090 + // use to calculate minwidth of rectangle by longest word with applied css
  5091 + var str=layer.text;
  5092 + var splittext=str.split(" ");
  5093 + var longtext= longest_string(splittext)[0];
  5094 + var test = document.getElementById("atTextDiv");
  5095 + test.style.fontSize = layer.fontSize;
  5096 + test.style.fontFamily = layer.fontFamily;
  5097 + test.style.fontWeight = layer.fontStyle.split(" ")[0];
  5098 + test.style.fontStyle = layer.fontStyle.split(" ")[1];
  5099 + $('#atTextDiv').html(longtext);
  5100 + },
  5101 + }).drawRect({
5190 5102 panelCanvasId:canvasId,
5191 5103 name: rectDimension[0].name,
5192 5104 groups: [rectDimension[0].groupName],
... ... @@ -5200,12 +5112,12 @@ function ($rootScope, $scope, Modules, $log, $location, $compile, $timeout, Data
5200 5112 fillStyle: rectDimension[0].shapestyle.fillStyle,
5201 5113 fromCenter: false,
5202 5114 x: rectDimension[0].x, y: rectDimension[0].y,
5203   - width: Math.abs(rectDimension[0].width),
5204   - height: Math.abs(rectDimension[0].height),
5205   - minWidth: Math.abs(rectDimension[0].width),
5206   - minHeight: Math.abs(rectDimension[0].height),
  5115 + width: $("#" + canvasId).measureText('temptext').width>20?$("#" + canvasId).measureText('temptext').width+10:40,
  5116 + height:$("#" + canvasId).measureText('temptext').height>20?$("#" + canvasId).measureText('temptext').height+10:40,
  5117 + minWidth:document.getElementById("atTextDiv").clientWidth>20?document.getElementById("atTextDiv").clientWidth+10:40,
  5118 + minHeight:$("#" + canvasId).measureText('temptext').height>20?$("#" + canvasId).measureText('temptext').height:40,
5207 5119 resizeFromCenter: false,
5208   - add: function (layer) {
  5120 + add: function (layer) {
5209 5121 var drawingPoints={
5210 5122 "layerName": layer.name,//for internal use
5211 5123 "shapeType":layer.type,
... ... @@ -5351,7 +5263,10 @@ function ($rootScope, $scope, Modules, $log, $location, $compile, $timeout, Data
5351 5263 handlemove: function(layer) {
5352 5264 if ($rootScope.isAnnotaionToolBarDrawingModeActive == true) {
5353 5265 var txtnumber=(layer.name).split('_')[1];
5354   - var textareaName="TextArea_" +txtnumber;
  5266 + var textareaName="TextArea_" +txtnumber;
  5267 + // change min height of reactangle
  5268 + var textheight=$("#" + layer.panelCanvasId).measureText(textareaName).height+10;
  5269 + layer.minHeight= textheight;
5355 5270 $("#" + layer.panelCanvasId).removeLayer(textareaName).drawLayers();
5356 5271  
5357 5272 var textDimension = new jinqJs()
... ... @@ -5374,8 +5289,8 @@ function ($rootScope, $scope, Modules, $log, $location, $compile, $timeout, Data
5374 5289 align: textDimension[0].textstyle.textAlignmt,
5375 5290 strokeWidth: 0,
5376 5291 text: textDimension[0].stringText,
5377   - x: layer.x, y: layer.y,
5378   - maxWidth:layer.width,
  5292 + x: layer.x+5, y: layer.y+5,
  5293 + maxWidth:layer.width-2,
5379 5294 add: function (layer) {
5380 5295 layer.draggable = true;
5381 5296 },
... ... @@ -5435,7 +5350,16 @@ function ($rootScope, $scope, Modules, $log, $location, $compile, $timeout, Data
5435 5350 }
5436 5351 }
5437 5352 var txtnumber=(layer.name).split('_')[1];
5438   - var textareaName="TextArea_" +txtnumber;
  5353 + var textareaName="TextArea_" +txtnumber;
  5354 +
  5355 + $rootScope.rectDimension = new jinqJs()
  5356 + .from($rootScope.rectDimension)
  5357 + .update(function (coll, index) {
  5358 + coll[index].height = layer.height;
  5359 + coll[index].width = layer.width;
  5360 + })
  5361 + .at('panelCanvasId == ' + layer.panelCanvasId,'name == ' + layer.name)
  5362 + .select();
5439 5363  
5440 5364 var rectDimension = new jinqJs()
5441 5365 .from($rootScope.rectDimension)
... ... @@ -5474,7 +5398,7 @@ function ($rootScope, $scope, Modules, $log, $location, $compile, $timeout, Data
5474 5398 }
5475 5399 }
5476 5400  
5477   - }).drawText({
  5401 + }).drawText({
5478 5402 panelCanvasId:canvasId,
5479 5403 layer: true,
5480 5404 draggable: true,
... ... @@ -5489,10 +5413,12 @@ function ($rootScope, $scope, Modules, $log, $location, $compile, $timeout, Data
5489 5413 align: textDimension[0].textstyle.textAlignmt,
5490 5414 strokeWidth: 0,
5491 5415 text: textDimension[0].stringText,
5492   - x: rectDimension[0].x, y: rectDimension[0].y,
  5416 + x: rectDimension[0].x+5, y: rectDimension[0].y+5,
5493 5417 maxWidth:rectDimension[0].width,
5494 5418 add: function (layer) {
5495   - layer.draggable = true;
  5419 + layer.draggable = true;
  5420 + //remove temptext
  5421 + $("#" + canvasId).removeLayer('temptext').drawLayers();
5496 5422 },
5497 5423 dragstop: function (layer) {
5498 5424 if ($rootScope.isAnnotaionToolBarDrawingModeActive == true) {
... ... @@ -5536,6 +5462,13 @@ function ($rootScope, $scope, Modules, $log, $location, $compile, $timeout, Data
5536 5462 }
5537 5463 }
5538 5464  
  5465 + function longest_string(str_ara) {
  5466 + let max = str_ara[0].length;
  5467 + str_ara.map(v => max = Math.max(max, v.length));
  5468 + var result = str_ara.filter(v => v.length == max);
  5469 + return result;
  5470 + }
  5471 +
5539 5472 $scope.dragstopEvent=function(panelCanvasId,rectName,textareaName,positionX,positionY)
5540 5473 {
5541 5474 if ((panelCanvasId).match("canvasAA")) {
... ...
400-SOURCECODE/AIAHTML5.Web/index.aspx
  View file @e14c243
... ... @@ -786,15 +786,7 @@
786 786  
787 787 </div>
788 788 </div>
789   - <textarea class="form-control" id="text_area" rows="3" style="font-family: 'Verdana, sans-serif';font-size:14px; font-weight: normal; font-style: normal; color: #000; text-align: left; text-decoration: none;"></textarea>
790   -
791   - <!--code for horizonatl text going out-->
792   - <div id="atTextDiv" style="float:left;">
793   - <!-- <span id="duptextspan" style="float: left; display: none;"></span> -->
794   - <span id="textspan" style="display:none;"></span>
795   - </div>
796   - <!--code for horizonatl text going out-->
797   -
  789 + <textarea class="form-control" id="text_area" rows="3" style="font-family: 'Verdana, sans-serif';font-size:14px; font-weight: normal; font-style: normal; color: #000; text-align: left; text-decoration: none;"></textarea>
798 790 </div>
799 791 <div class="modal-footer">
800 792 <!--<button type="button" class="btn btn-default" ng-click="closeModal()" data-dismiss="modal">Close</button>-->
... ... @@ -805,8 +797,10 @@
805 797  
806 798 </div>
807 799  
808   -
809   -
  800 + <!--text area div to calculate width and height-->
  801 + <div id="atTextDiv" style="position: absolute; visibility: hidden; height: auto; width: auto; white-space: nowrap">
  802 + </div>
  803 +
810 804  
811 805 <!--List manager-->
812 806 <!--List manager-->
... ...