ADAM / AIAHTML5

Commit 038e9bf6ad553c754faad2e4f4315f130cfb489a

Authored by Mukul Rajput
1 parent 8a21167f

this is for bug 9818 colored rectagnle behind text

Inline Side-by-side
Showing 2 changed files with 129 additions and 84 deletions
400-SOURCECODE/AIAHTML5.Web/app/controllers/HomeController.js
  View file @038e9bf
@@ -154,6 +154,80 @@ function ($rootScope, Modules, $log, $location, $timeout, DataService, Authentic @@ -154,6 +154,80 @@ function ($rootScope, Modules, $log, $location, $timeout, DataService, Authentic
154 154
155 $(document).ready(function () { 155 $(document).ready(function () {
156 getUserDetails(); 156 getUserDetails();
  157 +
  158 +
  159 + $(function () {
  160 + var colpick = $('.demo').each(function () {
  161 +
  162 + $(this).minicolors({
  163 + control: $(this).attr('data-control') || 'hue',
  164 + inline: $(this).attr('data-inline') === 'true',
  165 + letterCase: 'lowercase',
  166 + opacity: false,
  167 + change: function (hex, opacity) {
  168 + $("#font-color .minicolors .minicolors-swatch .minicolors-swatch-color").removeClass("ActiveDefaultColorAnnotation");
  169 + if (!hex) return;
  170 + if (opacity) hex += ', ' + opacity;
  171 + try {
  172 + console.log(hex);
  173 + $("#text_area").css("color", hex);
  174 + } catch (e) { }
  175 + $(this).select();
  176 + },
  177 + theme: 'bootstrap'
  178 + });
  179 + });
  180 +
  181 + var $inlinehex = $('#inlinecolorhex h3 small');
  182 + //alert($inlinehex);
  183 + $('#inlinecolors').minicolors({
  184 + inline: true,
  185 + theme: 'bootstrap',
  186 + change: function (hex) {
  187 + if (!hex) return;
  188 +
  189 + $inlinehex.html(hex);
  190 + }
  191 + });
  192 + });
  193 +
  194 +
  195 + $(function () {
  196 + var colpick = $('.drawTextBG').each(function () {
  197 + $(this).minicolors({
  198 + control: $(this).attr('data-control') || 'hue',
  199 + inline: $(this).attr('data-inline') === 'true',
  200 + letterCase: 'lowercase',
  201 + opacity: false,
  202 + change: function (hex, opacity) {
  203 + $("#drawTextBGColorpicker .minicolors .minicolors-swatch .minicolors-swatch-color").removeClass("ActiveDefaultColorAnnotation");
  204 + if (!hex) return;
  205 + if (opacity) hex += ', ' + opacity;
  206 + try {
  207 + console.log(hex);
  208 + // $("#text_area").css("background-color", hex);
  209 + } catch (e) { }
  210 + $(this).select();
  211 + },
  212 + theme: 'bootstrap'
  213 + });
  214 + });
  215 + var $inlinehex = $('#inlinecolorhex h3 small');
  216 + //alert($inlinehex);
  217 + $('#inlinecolors').minicolors({
  218 + inline: true,
  219 + theme: 'bootstrap',
  220 + change: function (hex) {
  221 +
  222 + if (!hex) return;
  223 + $inlinehex.html(hex);
  224 + }
  225 + });
  226 + });
  227 +
  228 + $("#font-color .minicolors .minicolors-swatch .minicolors-swatch-color").css({ "background-color": "#000000" });
  229 + $("#drawTextBGColorpicker .minicolors .minicolors-swatch .minicolors-swatch-color").css({ "background-color": "#ffffff" });
  230 +
157 }); 231 });
158 232
159 $rootScope.$on("$locationChangeSuccess", function () { 233 $rootScope.$on("$locationChangeSuccess", function () {
@@ -1592,6 +1666,8 @@ function ($rootScope, Modules, $log, $location, $timeout, DataService, Authentic @@ -1592,6 +1666,8 @@ function ($rootScope, Modules, $log, $location, $timeout, DataService, Authentic
1592 $rootScope.saveText = function () { 1666 $rootScope.saveText = function () {
1593 1667
1594 document.getElementById('modelbackground').style.display = "none"; 1668 document.getElementById('modelbackground').style.display = "none";
  1669 + $rootScope.selectedBGColorForTextArea = $("#drawTextBGColorpicker span.minicolors-swatch-color").css('background-color');
  1670 +
1595 // this part will work first time when save button will be clicked 1671 // this part will work first time when save button will be clicked
1596 if ($rootScope.IsTextAlreadySave == false) { 1672 if ($rootScope.IsTextAlreadySave == false) {
1597 // getting textarea style properties 1673 // getting textarea style properties
@@ -1609,31 +1685,8 @@ function ($rootScope, Modules, $log, $location, $timeout, DataService, Authentic @@ -1609,31 +1685,8 @@ function ($rootScope, Modules, $log, $location, $timeout, DataService, Authentic
1609 $("#canvas").removeLayer($rootScope.TextAreaRectID).drawLayers(); 1685 $("#canvas").removeLayer($rootScope.TextAreaRectID).drawLayers();
1610 // Text After Saving in Rectangle 1686 // Text After Saving in Rectangle
1611 $rootScope.resetTextRect = $rootScope.ObjectIndex++; 1687 $rootScope.resetTextRect = $rootScope.ObjectIndex++;
1612 - $('#canvas').drawText({  
1613 - layer: true,  
1614 - draggable: true,  
1615 - name: 'TextAreaNew_' + $rootScope.resetTextRect,  
1616 - groups: ['TextAreaNew_' + $rootScope.resetTextRect],  
1617 - dragGroups: ['TextAreaNew_' + $rootScope.resetTextRect],  
1618 - fillStyle: $rootScope.fontColor,  
1619 - fontStyle: $rootScope.fontWeight + " " + $rootScope.fontStyle,  
1620 - fontSize: $rootScope.fontSizes,  
1621 - fromCenter: false,  
1622 - fontFamily: $rootScope.fontFamily,  
1623 - align: $rootScope.textAlignmt,  
1624 - strokeWidth: 0,  
1625 - text: $rootScope.textArea,  
1626 - x: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].x, y: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].y,  
1627 - maxWidth: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].width,  
1628 - maxHeight: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].height,  
1629 - add: function (layer) {  
1630 -  
1631 - //$rootScope.TextPropertyArray.push({ Text1: '', Align: '', FontColor: '', FontSize: '', FontStyle: '', FontFamily: '' });  
1632 - $rootScope.TextPropertyArray.push({ layerName: layer.name, Rect_Text: layer.text, Align: layer.align, FontColor: layer.fillStyle, FontSize: layer.fontSize, FontStyle: layer.fontStyle, FontFamily: layer.fontFamily, TextDecoration: $rootScope.underlineText });  
1633 - }  
1634 - })  
1635 - // Draw rectangle  
1636 - .drawRect({ 1688 +
  1689 + $('#canvas').drawRect({
1637 name: 'TextArea1_' + $rootScope.resetTextRect, 1690 name: 'TextArea1_' + $rootScope.resetTextRect,
1638 layer: true, 1691 layer: true,
1639 draggable: true, 1692 draggable: true,
@@ -1642,6 +1695,7 @@ function ($rootScope, Modules, $log, $location, $timeout, DataService, Authentic @@ -1642,6 +1695,7 @@ function ($rootScope, Modules, $log, $location, $timeout, DataService, Authentic
1642 opacity: $rootScope.shapestyleOpacity, 1695 opacity: $rootScope.shapestyleOpacity,
1643 strokeStyle: $rootScope.shapestyleborderColor, 1696 strokeStyle: $rootScope.shapestyleborderColor,
1644 strokeWidth: $rootScope.shapestyleborderWidth, 1697 strokeWidth: $rootScope.shapestyleborderWidth,
  1698 + fillStyle: $rootScope.selectedBGColorForTextArea,
1645 fromCenter: false, 1699 fromCenter: false,
1646 x: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].x, y: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].y, 1700 x: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].x, y: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].y,
1647 width: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].width, 1701 width: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].width,
@@ -1858,7 +1912,29 @@ function ($rootScope, Modules, $log, $location, $timeout, DataService, Authentic @@ -1858,7 +1912,29 @@ function ($rootScope, Modules, $log, $location, $timeout, DataService, Authentic
1858 layer.draggable = false; 1912 layer.draggable = false;
1859 } 1913 }
1860 } 1914 }
1861 - }); 1915 + }).drawText({
  1916 + layer: true,
  1917 + draggable: true,
  1918 + name: 'TextAreaNew_' + $rootScope.resetTextRect,
  1919 + groups: ['TextAreaNew_' + $rootScope.resetTextRect],
  1920 + dragGroups: ['TextAreaNew_' + $rootScope.resetTextRect],
  1921 + fillStyle: $rootScope.fontColor,
  1922 + fontStyle: $rootScope.fontWeight + " " + $rootScope.fontStyle,
  1923 + fontSize: $rootScope.fontSizes,
  1924 + fromCenter: false,
  1925 + fontFamily: $rootScope.fontFamily,
  1926 + align: $rootScope.textAlignmt,
  1927 + strokeWidth: 0,
  1928 + text: $rootScope.textArea,
  1929 + x: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].x, y: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].y,
  1930 + maxWidth: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].width,
  1931 + maxHeight: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].height,
  1932 + add: function (layer) {
  1933 +
  1934 + //$rootScope.TextPropertyArray.push({ Text1: '', Align: '', FontColor: '', FontSize: '', FontStyle: '', FontFamily: '' });
  1935 + $rootScope.TextPropertyArray.push({ layerName: layer.name, Rect_Text: layer.text, Align: layer.align, FontColor: layer.fillStyle, FontSize: layer.fontSize, FontStyle: layer.fontStyle, FontFamily: layer.fontFamily, TextDecoration: $rootScope.underlineText });
  1936 + }
  1937 + });
1862 $("#text_area").val(''); 1938 $("#text_area").val('');
1863 $("#text_area").css({ " font-family": "Arial", "font-size": "14px", "font-weight": "normal", "font-style": "normal", "color": "#000", "text-align": "left", "text-decoration": "none" }); 1939 $("#text_area").css({ " font-family": "Arial", "font-size": "14px", "font-weight": "normal", "font-style": "normal", "color": "#000", "text-align": "left", "text-decoration": "none" });
1864 1940
@@ -1910,27 +1986,9 @@ function ($rootScope, Modules, $log, $location, $timeout, DataService, Authentic @@ -1910,27 +1986,9 @@ function ($rootScope, Modules, $log, $location, $timeout, DataService, Authentic
1910 $rootScope.resetTextSave = $rootScope.ObjectIndexSave++; 1986 $rootScope.resetTextSave = $rootScope.ObjectIndexSave++;
1911 1987
1912 // generating new text area 1988 // generating new text area
1913 - $('#canvas').drawText({  
1914 - layer: true,  
1915 - draggable: true,  
1916 - name: 'TextAreaAfterEdit_' + $rootScope.resetTextSave,  
1917 - groups: ['TextAreaAfterEdit_' + $rootScope.resetTextSave],  
1918 - dragGroups: ['TextAreaAfterEdit_' + $rootScope.resetTextSave],  
1919 - fillStyle: _modifiedFontColor,  
1920 - fontStyle: _modifiedFontWeight + " " + _modifiedFontStyle,  
1921 - fontSize: _modifiedFontSize,  
1922 - fontFamily: _modifiedFontFamily,  
1923 - align: _modifiedTextAlign,  
1924 - strokeWidth: 0,  
1925 - fromCenter: false,  
1926 - text: _modifiedText,  
1927 - x: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].x, y: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].y,  
1928 - maxWidth: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].width,  
1929 - maxHeight: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].height  
1930 -  
1931 - }) 1989 + $('#canvas')
1932 // Draw rect as wide as the text 1990 // Draw rect as wide as the text
1933 - .drawRect({ 1991 + $('#canvas').drawRect({
1934 name: 'TextAreaAfterEditRect_' + $rootScope.resetTextSave, 1992 name: 'TextAreaAfterEditRect_' + $rootScope.resetTextSave,
1935 layer: true, 1993 layer: true,
1936 draggable: true, 1994 draggable: true,
@@ -1940,6 +1998,7 @@ function ($rootScope, Modules, $log, $location, $timeout, DataService, Authentic @@ -1940,6 +1998,7 @@ function ($rootScope, Modules, $log, $location, $timeout, DataService, Authentic
1940 fromCenter: false, 1998 fromCenter: false,
1941 strokeStyle: $rootScope.shapestyleborderColor, 1999 strokeStyle: $rootScope.shapestyleborderColor,
1942 strokeWidth: $rootScope.shapestyleborderWidth, 2000 strokeWidth: $rootScope.shapestyleborderWidth,
  2001 + fillStyle: $rootScope.selectedBGColorForTextArea,
1943 x: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].x, y: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].y, 2002 x: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].x, y: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].y,
1944 width: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].width, 2003 width: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].width,
1945 height: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].height, 2004 height: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].height,
@@ -2113,7 +2172,25 @@ function ($rootScope, Modules, $log, $location, $timeout, DataService, Authentic @@ -2113,7 +2172,25 @@ function ($rootScope, Modules, $log, $location, $timeout, DataService, Authentic
2113 } 2172 }
2114 } 2173 }
2115 2174
2116 - }); 2175 + }).drawText({
  2176 + layer: true,
  2177 + draggable: true,
  2178 + name: 'TextAreaAfterEdit_' + $rootScope.resetTextSave,
  2179 + groups: ['TextAreaAfterEdit_' + $rootScope.resetTextSave],
  2180 + dragGroups: ['TextAreaAfterEdit_' + $rootScope.resetTextSave],
  2181 + fillStyle: _modifiedFontColor,
  2182 + fontStyle: _modifiedFontWeight + " " + _modifiedFontStyle,
  2183 + fontSize: _modifiedFontSize,
  2184 + fontFamily: _modifiedFontFamily,
  2185 + align: _modifiedTextAlign,
  2186 + strokeWidth: 0,
  2187 + fromCenter: false,
  2188 + text: _modifiedText,
  2189 + x: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].x, y: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].y,
  2190 + maxWidth: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].width,
  2191 + maxHeight: $rootScope.rectDimension[$rootScope.rectDimension.length - 1].height
  2192 +
  2193 + });
2117 2194
2118 } 2195 }
2119 } 2196 }
400-SOURCECODE/AIAHTML5.Web/index.html
  View file @038e9bf
@@ -689,6 +689,9 @@ @@ -689,6 +689,9 @@
689 689
690 <input type="text" id="saturation-demo" class="form-control demo" data-control="saturation" style="display:none;" value="#0088cc"> 690 <input type="text" id="saturation-demo" class="form-control demo" data-control="saturation" style="display:none;" value="#0088cc">
691 </div> 691 </div>
  692 + <div class="form-group" id="drawTextBGColorpicker" style="display:inline-flex;vertical-align:top;cursor:pointer;margin-right:36px;">
  693 + <input type="text" id="saturation-demo-background" class="form-control drawTextBG" data-control="saturation" style="display:none;" value="#0088cc">
  694 + </div>
692 695
693 <span style="vertical-align:middle;"> 696 <span style="vertical-align:middle;">
694 <span id="text-left" class="Edittext-btn-css"> 697 <span id="text-left" class="Edittext-btn-css">
@@ -1404,42 +1407,7 @@ @@ -1404,42 +1407,7 @@
1404 }); 1407 });
1405 </script> 1408 </script>
1406 1409
1407 - <script type="text/javascript">  
1408 - $(function () {  
1409 - var colpick = $('.demo').each(function () {  
1410 -  
1411 - $(this).minicolors({  
1412 - control: $(this).attr('data-control') || 'hue',  
1413 - inline: $(this).attr('data-inline') === 'true',  
1414 - letterCase: 'lowercase',  
1415 - opacity: false,  
1416 - change: function (hex, opacity) {  
1417 - $("#font-color .minicolors .minicolors-swatch .minicolors-swatch-color").removeClass("ActiveDefaultColorAnnotation");  
1418 - if (!hex) return;  
1419 - if (opacity) hex += ', ' + opacity;  
1420 - try {  
1421 - console.log(hex);  
1422 - $("#text_area").css("color", hex);  
1423 - } catch (e) { }  
1424 - $(this).select();  
1425 - },  
1426 - theme: 'bootstrap'  
1427 - });  
1428 - });  
1429 -  
1430 - var $inlinehex = $('#inlinecolorhex h3 small');  
1431 - //alert($inlinehex);  
1432 - $('#inlinecolors').minicolors({  
1433 - inline: true,  
1434 - theme: 'bootstrap',  
1435 - change: function (hex) {  
1436 - if (!hex) return;  
1437 -  
1438 - $inlinehex.html(hex);  
1439 - }  
1440 - });  
1441 - });  
1442 - </script> 1410 +
1443 1411
1444 1412
1445 <script type="text/javascript"> 1413 <script type="text/javascript">
@@ -1549,7 +1517,7 @@ @@ -1549,7 +1517,7 @@
1549 <script> 1517 <script>
1550 $(document).ready(function () { 1518 $(document).ready(function () {
1551 // $("#font-color .minicolors .minicolors-swatch .minicolors-swatch-color").addClass("ActiveDefaultColorAnnotation"); 1519 // $("#font-color .minicolors .minicolors-swatch .minicolors-swatch-color").addClass("ActiveDefaultColorAnnotation");
1552 - $("#font-color .minicolors .minicolors-swatch .minicolors-swatch-color").css({ "background-color": "#000000" }); 1520 +
1553 var borderWidth = 1; 1521 var borderWidth = 1;
1554 var borderColor = "#000"; 1522 var borderColor = "#000";
1555 $("#borderWidthCanvasElement").change(function () { 1523 $("#borderWidthCanvasElement").change(function () {