ADAM / AIAHTML5

Commit 4878814b8391b7d5e9ba5008052d81a73f436b42

Authored by unknown
1 parent 2d9fb1ad

Edit Shape Style Pop-up Background Disabled and dragging issue resolved

Inline Side-by-side
Showing 4 changed files with 125 additions and 46 deletions
400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js
  View file @4878814
... ... @@ -95,7 +95,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
95 95 $scope.dragdivtop = 0;
96 96  
97 97 $scope.IsSearchVisible = false;
98   -
  98 + $scope.shapesize = 1;
99 99 $scope.dragdivposition = {
100 100 "left": $scope.dragdivleft,
101 101 "top": $scope.dragdivtop
... ... @@ -5617,7 +5617,8 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
5617 5617 var canvasElement = document.getElementById("canvas");
5618 5618 var ctx = canvasElement.getContext("2d");
5619 5619  
5620   -
  5620 + var canvasElement1 = document.getElementById("canvasPaint");
  5621 + var ctx1 = canvasElement1.getContext("2d");
5621 5622  
5622 5623 /* if ($rootScope.shapeType == "FreeStylePaint") {
5623 5624 var canvasPaint_zIndex = $('#canvasPaint').css("z-index");
... ... @@ -5638,6 +5639,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
5638 5639 case "cursor":
5639 5640 // ctx.clearRect(0, 0, 2277, 3248);
5640 5641 ctx.beginPath();
  5642 + ctx1.beginPath();
5641 5643  
5642 5644  
5643 5645 break;
... ... @@ -5781,7 +5783,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
5781 5783 break;
5782 5784  
5783 5785 case "Circle":
5784   - // alert($rootScope.shapestyleFillColor);
  5786 + // alert($rootScope.shapestyleborderWidth);
5785 5787 $rootScope.resetCircle = $rootScope.ObjectIndex++;
5786 5788 $('#canvas').addLayer({
5787 5789 layer: true,
... ... @@ -6277,7 +6279,28 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
6277 6279  
6278 6280 }
6279 6281 $scope.OnPaintBrushCanvasMouseDown = function (event) {
  6282 + switch ($rootScope.shapeType) {
  6283 +
  6284 + case "FreeStylePaint":
  6285 +
  6286 + debugger;
  6287 +
  6288 + if ($("#amount-2").val() == '') {
  6289 + $('#canvasPaint').sketch({ defaultSize: $scope.shapesize });
  6290 + }
  6291 + else {
6280 6292  
  6293 + var a = $("#amount-2").val();
  6294 + $scope.shapesize = parseInt(a);
  6295 + // alert(JSON.stringify({ defaultSize: $scope.shapesize }));
  6296 + $('#canvasPaint').sketch({ defaultSize: $scope.shapesize });
  6297 +
  6298 + }
  6299 +
  6300 +
  6301 + break;
  6302 +
  6303 + }
6281 6304 }
6282 6305 $scope.OnPaintBrushCanvasMouseUp = function (event) {
6283 6306  
... ... @@ -6285,19 +6308,36 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
6285 6308 // var canvasElement1 = document.getElementById("canvasPaint");
6286 6309 // var ctx1 = canvasElement1.getContext("2d");
6287 6310  
6288   - switch($rootScope.shapeType)
6289   - {
6290   - case "FreeStylePaint":
6291   -
6292   - $('#canvasPaint').sketch({ defaultSize: 1 });
  6311 + //switch($rootScope.shapeType)
  6312 + //{
  6313 +
  6314 + // case "FreeStylePaint":
  6315 +
  6316 + // debugger;
  6317 +
  6318 + // if ($("#amount-2").val() == '')
  6319 + // {
  6320 + // $('#canvasPaint').sketch({ defaultSize: $scope.shapesize });
  6321 + // }
  6322 + // else
  6323 + // {
  6324 +
  6325 + // var a = $("#amount-2").val();
  6326 + // $scope.shapesize = parseInt(a);
  6327 + // alert(JSON.stringify({ defaultSize: $scope.shapesize }));
  6328 + // $('#canvasPaint').sketch({ defaultSize: $scope.shapesize });
  6329 +
  6330 + // }
  6331 +
6293 6332  
6294   - break;
  6333 + // break;
6295 6334  
6296   -
6297   - }
  6335 + //}
6298 6336  
6299 6337 }
6300 6338  
  6339 +
  6340 +
6301 6341 $(document).keydown(function (event) {
6302 6342  
6303 6343  
... ...
400-SOURCECODE/AIAHTML5.Web/app/controllers/HomeController.js
  View file @4878814
... ... @@ -175,6 +175,8 @@ AIA.controller("HomeController", ["$rootScope", "Modules", "$log", "$location",
175 175 $(".btn-annotation-rectangle").addClass("activebtncolor");
176 176 }
177 177 $rootScope.paintBrush = function () {
  178 +
  179 + $('.btnCursor').addClass('activebtncolor');
178 180 $rootScope.switchCanvasToPaintCanvas();
179 181  
180 182 $rootScope.shapeType = "FreeStylePaint";
... ... @@ -258,28 +260,36 @@ AIA.controller("HomeController", ["$rootScope", "Modules", "$log", "$location",
258 260 $rootScope.shapestyleFillColor = "#fff";
259 261 $rootScope.shapestyleFillBorderColor = "black";
260 262 $rootScope.shapestyleborderWidth=2;
261   -
  263 + $rootScope.shapestyleborderStyles = "solid";
262 264 $rootScope.shapestyle = function (id) {
263 265  
  266 + document.getElementById('modelbackground').style.display = "none";
  267 +
264 268 $rootScope.shapestyleOpacity = $("#" + id).css('opacity');
265 269 $rootScope.shapestyleFillColor = $("#" + id).parent().css('background-color');
266   - $rootScope.shapestyleFillBorderColor = $("#" + id).parent().css('border');
267   - var a = $rootScope.shapestyleFillBorderColor;
268   - var b = a.split("px");
269   - // alert(b);
270   - $rootScope.shapestyleborderWidth = b[0];
271   -
272   - // alert(b[0]);
273   - //alert(b[1]);
274   - var c = b[1].split("solid");
275   - // alert(c[1]);
276   - $rootScope.shapestyleborderColor = c[1];
  270 + $rootScope.shapestyleborderColor = $("#" + id).parent().css("border-top-color");
  271 + $rootScope.shapestyleborderWidthSeparatingPixel = $("#" + id).parent().css("border-top-width");
  272 + var pixelSeparation = $rootScope.shapestyleborderWidthSeparatingPixel;
  273 + var intPart = pixelSeparation.split("p");
  274 +
  275 + $rootScope.shapestyleborderWidth = intPart[0];
  276 + $rootScope.shapestyleborderStyles = "solid";
  277 +
  278 + $('#editshapestyle').modal('hide');
  279 + }
277 280  
  281 + $rootScope.backOpacity = function () {
  282 +
  283 + document.getElementById('modelbackground').style.display = "block";
  284 + $("#editshapestyle").modal('show');
278 285  
279   - // alert($rootScope.shapestyleFillColor);
280   - $('#editshapestyle').modal('hide');
281 286 }
282 287  
  288 + $rootScope.closeBackOpacity = function () {
  289 +
  290 + document.getElementById('modelbackground').style.display = "none";
  291 +
  292 + }
283 293  
284 294  
285 295 //----End-------------
... ...
400-SOURCECODE/AIAHTML5.Web/index.html
  View file @4878814
... ... @@ -423,7 +423,7 @@
423 423 </div>
424 424 </div>
425 425 <div class="well-popup well">
426   - <img src="content/images/blank-shape.jpg" alt="..." class="img-rounded img-responsive" data-toggle="modal" data-target="#editshapestyle">
  426 + <img src="content/images/blank-shape.jpg" alt="..." class="img-rounded img-responsive" ng-click="backOpacity()">
427 427 </div>
428 428 <div class="well well-popup">
429 429 <div class="" role="group" aria-label="...">
... ... @@ -656,7 +656,9 @@
656 656 </div>
657 657 </div>
658 658  
659   -
  659 + <!--background disable div-->
  660 +
  661 + <div id="modelbackground"></div>
660 662  
661 663  
662 664 <!--Edit Shape Modal-->
... ... @@ -783,7 +785,7 @@
783 785 <button type="button" class="btn btn-primary btn-sm" ng-click="shapestyle('imgOpacity')">
784 786 OK
785 787 </button>
786   - <button type="button" class="btn btn-primary btn-sm" data-dismiss="modal">Cancel</button>
  788 + <button type="button" class="btn btn-primary btn-sm" data-dismiss="modal" ng-click="closeBackOpacity()">Cancel</button>
787 789 </div>
788 790 </div>
789 791 </div>
... ... @@ -791,9 +793,6 @@
791 793  
792 794  
793 795  
794   -
795   -
796   -
797 796 <script>
798 797 function mytoggle() {
799 798 var div = document.getElementById("divSection");
... ... @@ -806,11 +805,6 @@
806 805 </script>
807 806  
808 807  
809   -
810   -
811   -
812   -
813   -
814 808 <script>
815 809 function mytoggle() {
816 810 var div = document.getElementById("divSection");
... ... @@ -880,9 +874,26 @@
880 874 max: 60,
881 875 value: 10,
882 876 slide: function (event, ui) {
  877 +
883 878 $("#amount-2").val(ui.value);
884   - }
  879 +
  880 +
  881 +
  882 + },
  883 +
  884 +
  885 + });
  886 + $("#slider-range-min-2").on("slidestart", function (event, ui) {
  887 +
  888 + $('.btnCursor').trigger('click');
  889 + $(".btn-annotation").removeClass("activebtncolor");
  890 + $('.btnCursor').addClass('activebtncolor');
  891 + // ctx.clearRect(0, 0, canvasPaint.width, canvasPaint.height);
  892 +
  893 +
885 894 });
  895 + // $("#slider-range-min-2").on("slidechange", function (event, ui) { alert("ssasa"); });
  896 +
886 897 $("#amount-2").val($("#slider-vertical-2").slider("value"));
887 898  
888 899 $(function () {
... ... @@ -1009,15 +1020,17 @@
1009 1020 <script>
1010 1021 $(document).ready(function () {
1011 1022 var borderWidth = 1;
1012   - var borderColor;
  1023 + var borderColor = "#000";
1013 1024 $("#borderWidthCanvasElement").change(function () {
1014 1025  
1015 1026 borderWidth = $(this).val();
1016   -
  1027 +
1017 1028 if (borderColor != null) {
  1029 +
1018 1030 $("#imgOpacity").parent().css("border", borderWidth + "px" + " " + "solid" + borderColor);
1019 1031 } else {
1020   - $("#imgOpacity").parent().css("border", borderWidth + "px" + " " + "solid");
  1032 +
  1033 + $("#imgOpacity").parent().css("border", borderWidth + "px" + " " + "solid");
1021 1034 }
1022 1035 });
1023 1036  
... ... @@ -1039,13 +1052,11 @@
1039 1052 if (opacity) value += ', ' + opacity;
1040 1053 if (typeof console === 'object') {
1041 1054 console.log(value);
1042   - console.log(borderWidth);
1043   - // alert(borderWidth);
1044   -
  1055 +
1045 1056 borderColor = value;
1046   - $("#imgOpacity").parent().css("border", borderWidth + "px" + " " + "solid" + value);
1047   -
1048   - // alert($("#imgOpacity").parent().css("border", borderWidth + "px" + " " + "solid" + value));
  1057 + $("#imgOpacity").parent().css("border", borderWidth + "px" + " " + "solid" + borderColor);
  1058 +
  1059 +
1049 1060 }
1050 1061 },
1051 1062 theme: 'bootstrap'
... ...
400-SOURCECODE/AIAHTML5.Web/themes/default/css/bootstrap/3.3.6/main.css
  View file @4878814
... ... @@ -825,3 +825,21 @@ cursor:pointer;
825 825 color: #ffffff;
826 826 }
827 827  
  828 +/*disable background css*/
  829 +
  830 +#modelbackground
  831 + {
  832 + background-color: black;
  833 + bottom: 0;
  834 + left: 0;
  835 + position: fixed;
  836 + right: 0;
  837 + top: 0;
  838 + z-index: 12000000;
  839 + opacity: 0.5;
  840 + display:none;
  841 + width:100%;
  842 + height:100%;
  843 +
  844 + filter: Alpha(opacity=50); / IE8 and earlier /
  845 +}
828 846 \ No newline at end of file
... ...