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 5650 layer: true,
5651 5651 type: 'line',
5652 5652 draggable: true,
5653   - strokeStyle: 'black',
5654   - strokeWidth: 2,
  5653 + strokeStyle: $rootScope.shapestyleborderColor,
  5654 + strokeWidth: $rootScope.shapestyleborderWidth,
5655 5655 rounded: true,
5656 5656 x1: $scope.offsetX1, y1: $scope.offsetY1,
5657 5657 x2: $scope.x, y2: $scope.y,
... ... @@ -5712,12 +5712,12 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
5712 5712 $('#canvas').addLayer({
5713 5713 layer: true,
5714 5714 name: 'Rect_' + $rootScope.resetRect,
5715   - fillStyle: '#fff',
  5715 + fillStyle: $rootScope.shapestyleFillColor,
5716 5716 type: 'rectangle',
5717 5717 draggable: true,
5718   - strokeStyle: 'black',
  5718 + strokeStyle: $rootScope.shapestyleborderColor,
5719 5719 opacity: $rootScope.shapestyleOpacity,
5720   - strokeWidth: 2,
  5720 + strokeWidth: $rootScope.shapestyleborderWidth,
5721 5721 x: $scope.offsetX1, y: $scope.offsetY1,
5722 5722 width: $scope.x - $scope.offsetX1,
5723 5723 height: $scope.y - $scope.offsetY1,
... ... @@ -5781,7 +5781,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
5781 5781 break;
5782 5782  
5783 5783 case "Circle":
5784   -
  5784 + // alert($rootScope.shapestyleFillColor);
5785 5785 $rootScope.resetCircle = $rootScope.ObjectIndex++;
5786 5786 $('#canvas').addLayer({
5787 5787 layer: true,
... ... @@ -5789,9 +5789,9 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
5789 5789 type: 'ellipse',
5790 5790 opacity: $rootScope.shapestyleOpacity,
5791 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 5795 x: $scope.offsetX1, y: $scope.offsetY1,
5796 5796 width: ($scope.x - $scope.offsetX1) * 2, height: ($scope.y - $scope.offsetY1) * 2,
5797 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 5855 layer: true,
5856 5856 name: 'Arrow_' + $rootScope.resetArrow,
5857 5857 draggable: true,
5858   - strokeStyle: '#000',
5859   - strokeWidth: 2,
  5858 + strokeStyle: $rootScope.shapestyleborderColor,
  5859 + strokeWidth: $rootScope.shapestyleborderWidth,
5860 5860 rounded: true,
5861 5861 startArrow: true,
5862 5862 arrowRadius: 7,
... ... @@ -6058,8 +6058,9 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
6058 6058 name: "TextRect_" + $rootScope.resetTextRect,
6059 6059 dragGroups: ['shapes'],
6060 6060 opacity: $rootScope.shapestyleOpacity,
6061   - strokeStyle: 'black',
6062   - strokeWidth: 2,
  6061 + strokeStyle: $rootScope.shapestyleborderColor,
  6062 + strokeWidth: $rootScope.shapestyleborderWidth,
  6063 + fillStyle: $rootScope.shapestyleFillColor,
6063 6064 x: $scope.offsetX1, y: $scope.offsetY1,
6064 6065 width: $scope.x - $scope.offsetX1,
6065 6066 height: $scope.y - $scope.offsetY1,
... ... @@ -6148,7 +6149,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
6148 6149 $rootScope.textArea = $("#text_area").val();
6149 6150 $("#canvas").removeLayer('TextArea_' + $rootScope.resetText).drawLayers();
6150 6151 $("#canvas").removeLayer("TextRect_" + $rootScope.resetTextRect).drawLayers();
6151   -
  6152 + // alert($rootScope.fontColor);
6152 6153 $('#canvas').drawText({
6153 6154 layer: true,
6154 6155 draggable: true,
... ... @@ -6184,8 +6185,11 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
6184 6185 groups: ['TextArea_' + $rootScope.resetText],
6185 6186 dragGroups: ['TextArea_' + $rootScope.resetText],
6186 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 6193 x: $scope.offsetX1, y: $scope.offsetY1,
6190 6194 width: $scope.x - $scope.offsetX1,
6191 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 255  
256 256 //opacity code
257 257 $rootScope.shapestyleOpacity = 1;
  258 + $rootScope.shapestyleFillColor = "#fff";
  259 + $rootScope.shapestyleFillBorderColor = "black";
  260 + $rootScope.shapestyleborderWidth=2;
  261 +
258 262 $rootScope.shapestyle = function (id) {
259 263  
260 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 280 $('#editshapestyle').modal('hide');
262 281 }
263 282  
... ...
400-SOURCECODE/AIAHTML5.Web/index.html
  View file @2d9fb1a
... ... @@ -673,7 +673,7 @@
673 673 <div class="col-sm-12">
674 674 <div class="checkbox no-margin">
675 675 <label>
676   - <input type="checkbox" checked> Fill Option
  676 + <input id="fill-option" type="checkbox" checked> Fill Option
677 677 </label>
678 678 </div>
679 679 </div>
... ... @@ -692,7 +692,7 @@
692 692  
693 693 <div class="form-group" style="display:inline-flex;vertical-align:top;cursor:pointer;margin-right:36px;">
694 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 696 </div>
697 697  
698 698  
... ... @@ -732,7 +732,7 @@
732 732 <div class="col-sm-12">
733 733 <div class="checkbox no-margin">
734 734 <label>
735   - <input type="checkbox" checked> Outline Option
  735 + <input id="Outline-Option" type="checkbox" checked> Outline Option
736 736 </label>
737 737 </div>
738 738 </div>
... ... @@ -744,7 +744,7 @@
744 744  
745 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 748 </div>
749 749  
750 750  
... ... @@ -755,10 +755,10 @@
755 755 <div class="col-sm-6">
756 756 <div class="form-horizontal">
757 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 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 762 <option value="2">2</option>
763 763 <option value="3">3</option>
764 764 <option value="4">4</option>
... ... @@ -1008,8 +1008,21 @@
1008 1008  
1009 1009 <script>
1010 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 1027 $(this).minicolors({
1015 1028 control: $(this).attr('data-control') || 'hue',
... ... @@ -1026,6 +1039,13 @@
1026 1039 if (opacity) value += ', ' + opacity;
1027 1040 if (typeof console === 'object') {
1028 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 1051 theme: 'bootstrap'
... ... @@ -1035,7 +1055,7 @@
1035 1055  
1036 1056  
1037 1057  
1038   - $('.demo2').each(function () {
  1058 + $('.outerBackgroundColor').each(function () {
1039 1059  
1040 1060 $(this).minicolors({
1041 1061 control: $(this).attr('data-control') || 'hue',
... ... @@ -1052,6 +1072,8 @@
1052 1072 if (opacity) value += ', ' + opacity;
1053 1073 if (typeof console === 'object') {
1054 1074 console.log(value);
  1075 + $("#imgOpacity").parent().css("background-color", value);
  1076 +
1055 1077 }
1056 1078 },
1057 1079 theme: 'bootstrap'
... ...