ADAM / AIAHTML5

Commit 2d9fb1ad353bdff092e5bc5a3986ece5adb763c0

Authored by unknown
1 parent ac796d01

Commit changes for Fill option and Outline option (color and size)

Inline Side-by-side
Showing 3 changed files with 70 additions and 25 deletions
400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js
  View file @2d9fb1a
@@ -5650,8 +5650,8 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo @@ -5650,8 +5650,8 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
5650 layer: true, 5650 layer: true,
5651 type: 'line', 5651 type: 'line',
5652 draggable: true, 5652 draggable: true,
5653 - strokeStyle: 'black',  
5654 - strokeWidth: 2, 5653 + strokeStyle: $rootScope.shapestyleborderColor,
  5654 + strokeWidth: $rootScope.shapestyleborderWidth,
5655 rounded: true, 5655 rounded: true,
5656 x1: $scope.offsetX1, y1: $scope.offsetY1, 5656 x1: $scope.offsetX1, y1: $scope.offsetY1,
5657 x2: $scope.x, y2: $scope.y, 5657 x2: $scope.x, y2: $scope.y,
@@ -5712,12 +5712,12 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo @@ -5712,12 +5712,12 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
5712 $('#canvas').addLayer({ 5712 $('#canvas').addLayer({
5713 layer: true, 5713 layer: true,
5714 name: 'Rect_' + $rootScope.resetRect, 5714 name: 'Rect_' + $rootScope.resetRect,
5715 - fillStyle: '#fff', 5715 + fillStyle: $rootScope.shapestyleFillColor,
5716 type: 'rectangle', 5716 type: 'rectangle',
5717 draggable: true, 5717 draggable: true,
5718 - strokeStyle: 'black', 5718 + strokeStyle: $rootScope.shapestyleborderColor,
5719 opacity: $rootScope.shapestyleOpacity, 5719 opacity: $rootScope.shapestyleOpacity,
5720 - strokeWidth: 2, 5720 + strokeWidth: $rootScope.shapestyleborderWidth,
5721 x: $scope.offsetX1, y: $scope.offsetY1, 5721 x: $scope.offsetX1, y: $scope.offsetY1,
5722 width: $scope.x - $scope.offsetX1, 5722 width: $scope.x - $scope.offsetX1,
5723 height: $scope.y - $scope.offsetY1, 5723 height: $scope.y - $scope.offsetY1,
@@ -5781,7 +5781,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo @@ -5781,7 +5781,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
5781 break; 5781 break;
5782 5782
5783 case "Circle": 5783 case "Circle":
5784 - 5784 + // alert($rootScope.shapestyleFillColor);
5785 $rootScope.resetCircle = $rootScope.ObjectIndex++; 5785 $rootScope.resetCircle = $rootScope.ObjectIndex++;
5786 $('#canvas').addLayer({ 5786 $('#canvas').addLayer({
5787 layer: true, 5787 layer: true,
@@ -5789,9 +5789,9 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo @@ -5789,9 +5789,9 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
5789 type: 'ellipse', 5789 type: 'ellipse',
5790 opacity: $rootScope.shapestyleOpacity, 5790 opacity: $rootScope.shapestyleOpacity,
5791 draggable: true, 5791 draggable: true,
5792 - strokeStyle: '#000',  
5793 - strokeWidth: 2,  
5794 - fillStyle: '#FFF', 5792 + strokeStyle: $rootScope.shapestyleborderColor,
  5793 + strokeWidth: $rootScope.shapestyleborderWidth,
  5794 + fillStyle: $rootScope.shapestyleFillColor,
5795 x: $scope.offsetX1, y: $scope.offsetY1, 5795 x: $scope.offsetX1, y: $scope.offsetY1,
5796 width: ($scope.x - $scope.offsetX1) * 2, height: ($scope.y - $scope.offsetY1) * 2, 5796 width: ($scope.x - $scope.offsetX1) * 2, height: ($scope.y - $scope.offsetY1) * 2,
5797 // Place a handle at each side and each corner 5797 // Place a handle at each side and each corner
@@ -5855,8 +5855,8 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo @@ -5855,8 +5855,8 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
5855 layer: true, 5855 layer: true,
5856 name: 'Arrow_' + $rootScope.resetArrow, 5856 name: 'Arrow_' + $rootScope.resetArrow,
5857 draggable: true, 5857 draggable: true,
5858 - strokeStyle: '#000',  
5859 - strokeWidth: 2, 5858 + strokeStyle: $rootScope.shapestyleborderColor,
  5859 + strokeWidth: $rootScope.shapestyleborderWidth,
5860 rounded: true, 5860 rounded: true,
5861 startArrow: true, 5861 startArrow: true,
5862 arrowRadius: 7, 5862 arrowRadius: 7,
@@ -6058,8 +6058,9 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo @@ -6058,8 +6058,9 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
6058 name: "TextRect_" + $rootScope.resetTextRect, 6058 name: "TextRect_" + $rootScope.resetTextRect,
6059 dragGroups: ['shapes'], 6059 dragGroups: ['shapes'],
6060 opacity: $rootScope.shapestyleOpacity, 6060 opacity: $rootScope.shapestyleOpacity,
6061 - strokeStyle: 'black',  
6062 - strokeWidth: 2, 6061 + strokeStyle: $rootScope.shapestyleborderColor,
  6062 + strokeWidth: $rootScope.shapestyleborderWidth,
  6063 + fillStyle: $rootScope.shapestyleFillColor,
6063 x: $scope.offsetX1, y: $scope.offsetY1, 6064 x: $scope.offsetX1, y: $scope.offsetY1,
6064 width: $scope.x - $scope.offsetX1, 6065 width: $scope.x - $scope.offsetX1,
6065 height: $scope.y - $scope.offsetY1, 6066 height: $scope.y - $scope.offsetY1,
@@ -6148,7 +6149,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo @@ -6148,7 +6149,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
6148 $rootScope.textArea = $("#text_area").val(); 6149 $rootScope.textArea = $("#text_area").val();
6149 $("#canvas").removeLayer('TextArea_' + $rootScope.resetText).drawLayers(); 6150 $("#canvas").removeLayer('TextArea_' + $rootScope.resetText).drawLayers();
6150 $("#canvas").removeLayer("TextRect_" + $rootScope.resetTextRect).drawLayers(); 6151 $("#canvas").removeLayer("TextRect_" + $rootScope.resetTextRect).drawLayers();
6151 - 6152 + // alert($rootScope.fontColor);
6152 $('#canvas').drawText({ 6153 $('#canvas').drawText({
6153 layer: true, 6154 layer: true,
6154 draggable: true, 6155 draggable: true,
@@ -6184,8 +6185,11 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo @@ -6184,8 +6185,11 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
6184 groups: ['TextArea_' + $rootScope.resetText], 6185 groups: ['TextArea_' + $rootScope.resetText],
6185 dragGroups: ['TextArea_' + $rootScope.resetText], 6186 dragGroups: ['TextArea_' + $rootScope.resetText],
6186 opacity: $rootScope.shapestyleOpacity, 6187 opacity: $rootScope.shapestyleOpacity,
6187 - strokeStyle: 'black',  
6188 - strokeWidth: 2, 6188 + // strokeStyle: 'black',
  6189 + // strokeWidth: 2,
  6190 + strokeStyle: $rootScope.shapestyleborderColor,
  6191 + strokeWidth: $rootScope.shapestyleborderWidth,
  6192 + // fillStyle: $rootScope.shapestyleFillColor,
6189 x: $scope.offsetX1, y: $scope.offsetY1, 6193 x: $scope.offsetX1, y: $scope.offsetY1,
6190 width: $scope.x - $scope.offsetX1, 6194 width: $scope.x - $scope.offsetX1,
6191 height: $scope.y - $scope.offsetY1, 6195 height: $scope.y - $scope.offsetY1,
400-SOURCECODE/AIAHTML5.Web/app/controllers/HomeController.js
  View file @2d9fb1a
@@ -255,9 +255,28 @@ AIA.controller("HomeController", ["$rootScope", "Modules", "$log", "$location", @@ -255,9 +255,28 @@ AIA.controller("HomeController", ["$rootScope", "Modules", "$log", "$location",
255 255
256 //opacity code 256 //opacity code
257 $rootScope.shapestyleOpacity = 1; 257 $rootScope.shapestyleOpacity = 1;
  258 + $rootScope.shapestyleFillColor = "#fff";
  259 + $rootScope.shapestyleFillBorderColor = "black";
  260 + $rootScope.shapestyleborderWidth=2;
  261 +
258 $rootScope.shapestyle = function (id) { 262 $rootScope.shapestyle = function (id) {
259 263
260 $rootScope.shapestyleOpacity = $("#" + id).css('opacity'); 264 $rootScope.shapestyleOpacity = $("#" + id).css('opacity');
  265 + $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];
  277 +
  278 +
  279 + // alert($rootScope.shapestyleFillColor);
261 $('#editshapestyle').modal('hide'); 280 $('#editshapestyle').modal('hide');
262 } 281 }
263 282
400-SOURCECODE/AIAHTML5.Web/index.html
  View file @2d9fb1a
@@ -673,7 +673,7 @@ @@ -673,7 +673,7 @@
673 <div class="col-sm-12"> 673 <div class="col-sm-12">
674 <div class="checkbox no-margin"> 674 <div class="checkbox no-margin">
675 <label> 675 <label>
676 - <input type="checkbox" checked> Fill Option 676 + <input id="fill-option" type="checkbox" checked> Fill Option
677 </label> 677 </label>
678 </div> 678 </div>
679 </div> 679 </div>
@@ -692,7 +692,7 @@ @@ -692,7 +692,7 @@
692 692
693 <div class="form-group" style="display:inline-flex;vertical-align:top;cursor:pointer;margin-right:36px;"> 693 <div class="form-group" style="display:inline-flex;vertical-align:top;cursor:pointer;margin-right:36px;">
694 <span style="font-weight: normal; float: left; padding-top: 5px; padding-right: 5px;">Color</span> 694 <span style="font-weight: normal; float: left; padding-top: 5px; padding-right: 5px;">Color</span>
695 - <input type="text" class="form-control demo2" data-control="saturation" style="display:none;" value="#0088cc"> 695 + <input type="text" class="form-control outerBackgroundColor" data-control="saturation" style="display:none;" value="#0088cc">
696 </div> 696 </div>
697 697
698 698
@@ -732,7 +732,7 @@ @@ -732,7 +732,7 @@
732 <div class="col-sm-12"> 732 <div class="col-sm-12">
733 <div class="checkbox no-margin"> 733 <div class="checkbox no-margin">
734 <label> 734 <label>
735 - <input type="checkbox" checked> Outline Option 735 + <input id="Outline-Option" type="checkbox" checked> Outline Option
736 </label> 736 </label>
737 </div> 737 </div>
738 </div> 738 </div>
@@ -744,7 +744,7 @@ @@ -744,7 +744,7 @@
744 744
745 <div class="form-group" style="display:inline-flex;vertical-align:top;cursor:pointer;margin-right:36px;"> 745 <div class="form-group" style="display:inline-flex;vertical-align:top;cursor:pointer;margin-right:36px;">
746 746
747 - <input type="text" class="form-control demo1" data-control="saturation" style="display:none;" value="#0088cc"> 747 + <input type="text" class="form-control borderColorCanvasPreview" data-control="saturation" style="display:none;" value="#0088cc">
748 </div> 748 </div>
749 749
750 750
@@ -755,10 +755,10 @@ @@ -755,10 +755,10 @@
755 <div class="col-sm-6"> 755 <div class="col-sm-6">
756 <div class="form-horizontal"> 756 <div class="form-horizontal">
757 <div class="form-group"> 757 <div class="form-group">
758 - <label for="inputPassword" class="col-sm-3 control-label" style=" font-weight:normal; padding-top:9px;">Size</label> 758 + <label class="col-sm-3 control-label" style=" font-weight:normal; padding-top:9px;">Size</label>
759 <div class="col-sm-9 marginTop5"> 759 <div class="col-sm-9 marginTop5">
760 - <select class="form-control input-sm">  
761 - <option value="1" selected>1</option> 760 + <select id="borderWidthCanvasElement" class="form-control input-sm">
  761 + <option value="1">1</option>
762 <option value="2">2</option> 762 <option value="2">2</option>
763 <option value="3">3</option> 763 <option value="3">3</option>
764 <option value="4">4</option> 764 <option value="4">4</option>
@@ -1008,8 +1008,21 @@ @@ -1008,8 +1008,21 @@
1008 1008
1009 <script> 1009 <script>
1010 $(document).ready(function () { 1010 $(document).ready(function () {
  1011 + var borderWidth = 1;
  1012 + var borderColor;
  1013 + $("#borderWidthCanvasElement").change(function () {
  1014 +
  1015 + borderWidth = $(this).val();
  1016 +
  1017 + if (borderColor != null) {
  1018 + $("#imgOpacity").parent().css("border", borderWidth + "px" + " " + "solid" + borderColor);
  1019 + } else {
  1020 + $("#imgOpacity").parent().css("border", borderWidth + "px" + " " + "solid");
  1021 + }
  1022 + });
  1023 +
1011 1024
1012 - $('.demo1').each(function () { 1025 + $('.borderColorCanvasPreview').each(function () {
1013 1026
1014 $(this).minicolors({ 1027 $(this).minicolors({
1015 control: $(this).attr('data-control') || 'hue', 1028 control: $(this).attr('data-control') || 'hue',
@@ -1026,6 +1039,13 @@ @@ -1026,6 +1039,13 @@
1026 if (opacity) value += ', ' + opacity; 1039 if (opacity) value += ', ' + opacity;
1027 if (typeof console === 'object') { 1040 if (typeof console === 'object') {
1028 console.log(value); 1041 console.log(value);
  1042 + console.log(borderWidth);
  1043 + // alert(borderWidth);
  1044 +
  1045 + borderColor = value;
  1046 + $("#imgOpacity").parent().css("border", borderWidth + "px" + " " + "solid" + value);
  1047 +
  1048 + // alert($("#imgOpacity").parent().css("border", borderWidth + "px" + " " + "solid" + value));
1029 } 1049 }
1030 }, 1050 },
1031 theme: 'bootstrap' 1051 theme: 'bootstrap'
@@ -1035,7 +1055,7 @@ @@ -1035,7 +1055,7 @@
1035 1055
1036 1056
1037 1057
1038 - $('.demo2').each(function () { 1058 + $('.outerBackgroundColor').each(function () {
1039 1059
1040 $(this).minicolors({ 1060 $(this).minicolors({
1041 control: $(this).attr('data-control') || 'hue', 1061 control: $(this).attr('data-control') || 'hue',
@@ -1052,6 +1072,8 @@ @@ -1052,6 +1072,8 @@
1052 if (opacity) value += ', ' + opacity; 1072 if (opacity) value += ', ' + opacity;
1053 if (typeof console === 'object') { 1073 if (typeof console === 'object') {
1054 console.log(value); 1074 console.log(value);
  1075 + $("#imgOpacity").parent().css("background-color", value);
  1076 +
1055 } 1077 }
1056 }, 1078 },
1057 theme: 'bootstrap' 1079 theme: 'bootstrap'