TRUONG / T-Shats Frontend

Download as
Browse Code »

Commit b196bab487b2abaaeec566683a44b0c6712e4df6

Authored by TRUONG
1 parent 057ad34c67
Exists in master and in 1 other branch develop

fix clear color SVG.

Showing 2 changed files with 3 additions and 3 deletions Inline Diff

1 <!doctype html> 1 <!doctype html>
2 <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" id="ng-app" ng-app=""> <![endif]--> 2 <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" id="ng-app" ng-app=""> <![endif]-->
3 <!--[if IE 8]> <html class="no-js lt-ie9" id="ng-app" ng-app=""> <![endif]--> 3 <!--[if IE 8]> <html class="no-js lt-ie9" id="ng-app" ng-app=""> <![endif]-->
4 <!--[if gt IE 8]><!--> <html class="no-js" ng-app> <!--<![endif]--> 4 <!--[if gt IE 8]><!--> <html class="no-js" ng-app> <!--<![endif]-->
5 <head> 5 <head>
6 <meta charset="utf-8"> 6 <meta charset="utf-8">
7 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta http-equiv="X-UA-Compatible" content="IE=edge">
8 <title></title> 8 <title></title>
9 <meta name="description" content=""> 9 <meta name="description" content="">
10 <meta name="viewport" content="width=device-width"> 10 <meta name="viewport" content="width=device-width">
11 <!-- Place favicon.ico and apple-touch-icon.png in the root directory --> 11 <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
12 <!-- build:css styles/vendor.css --> 12 <!-- build:css styles/vendor.css -->
13 <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" /> 13 <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
14 <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css" /> 14 <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css" />
15 <link rel="stylesheet" href="bower_components/select2/select2.css"> 15 <link rel="stylesheet" href="bower_components/select2/select2.css">
16 <!-- bower:css --> 16 <!-- bower:css -->
17 <!-- endbower --> 17 <!-- endbower -->
18 <!-- endbuild --> 18 <!-- endbuild -->
19 <!-- build:css({.tmp,app}) styles/main.css --> 19 <!-- build:css({.tmp,app}) styles/main.css -->
20 <link rel="stylesheet" href="styles/main.css"> 20 <link rel="stylesheet" href="styles/main.css">
21 <!-- endbuild --> 21 <!-- endbuild -->
22 </head> 22 </head>
23 <body ng-app="tshatsApp"> 23 <body ng-app="tshatsApp">
24 <!--[if lt IE 7]> 24 <!--[if lt IE 7]>
25 <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> 25 <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
26 <![endif]--> 26 <![endif]-->
27 27
28 <!-- Add your site or application content here --> 28 <!-- Add your site or application content here -->
29 <div class="container" ng-view></div> 29 <div class="container" ng-view></div>
30 30
31 <!-- Google Analytics: change UA-XXXXX-X to be your site's ID --> 31 <!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
32 <script> 32 <script>
33 (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ 33 (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
34 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), 34 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
35 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) 35 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
36 })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); 36 })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
37 37
38 ga('create', 'UA-XXXXX-X'); 38 ga('create', 'UA-XXXXX-X');
39 ga('send', 'pageview'); 39 ga('send', 'pageview');
40 </script> 40 </script>
41 <script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script> 41 <script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
42 <script type="text/javascript" src="bower_components/fabric.js/dist/fabric.min.js"></script> 42 <script type="text/javascript" src="bower_components/fabric.js/dist/fabric.min.js"></script>
43 <script type="text/javascript" src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script> 43 <script type="text/javascript" src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
44 <script type="text/javascript" src="bower_components/fabric-customise-controls/dist/customiseControls.min.js"></script> 44 <script type="text/javascript" src="bower_components/fabric-customise-controls/dist/customiseControls.min.js"></script>
45 <!--[if lt IE 9]> 45 <!--[if lt IE 9]>
46 <script src="bower_components/es5-shim/es5-shim.js"></script> 46 <script src="bower_components/es5-shim/es5-shim.js"></script>
47 <script src="bower_components/json3/lib/json3.min.js"></script> 47 <script src="bower_components/json3/lib/json3.min.js"></script>
48 <![endif]--> 48 <![endif]-->
49 <script type="text/javascript"> 49 <script type="text/javascript">
50 var VERSION = '28-11_02'; 50 var VERSION = '28-11_03';
51 var require = { 51 var require = {
52 urlArgs: "ver="+VERSION, 52 urlArgs: "ver="+VERSION,
53 }; 53 };
54 </script> 54 </script>
55 <script src="bower_components/requirejs/require.js" data-main="scripts/main"></script> 55 <script src="bower_components/requirejs/require.js" data-main="scripts/main"></script>
56 </body> 56 </body>
57 </html> 57 </html>
58 58
app/scripts/controllers/tshirtdesign.js
Diff comments   View file @ b196bab
1 define(['app'], function (app) { 1 define(['app'], function (app) {
2 app.controller('TshirtdesignCtrl', function ($scope, $rootScope, $window, $timeout, $illustration, $favorite) { 2 app.controller('TshirtdesignCtrl', function ($scope, $rootScope, $window, $timeout, $illustration, $favorite) {
3 $scope.Math = window.Math; 3 $scope.Math = window.Math;
4 $scope.savedFrameView = 'views/design_part/tshirt-saved.html?ver='+VERSION; 4 $scope.savedFrameView = 'views/design_part/tshirt-saved.html?ver='+VERSION;
5 var canvas = new fabric.Canvas('main-design-container'); 5 var canvas = new fabric.Canvas('main-design-container');
6 var diffX = 40, diffY = 40; 6 var diffX = 40, diffY = 40;
7 var _coorTrash_x = 567; 7 var _coorTrash_x = 567;
8 var _coorTrash_y = 545; 8 var _coorTrash_y = 545;
9 var ObjectOrd=0; 9 var ObjectOrd=0;
10 //Set width and height canvas 10 //Set width and height canvas
11 function setSizeCanvas() { 11 function setSizeCanvas() {
12 if(typeof $rootScope.placeTshirt.place == 'undefined') 12 if(typeof $rootScope.placeTshirt.place == 'undefined')
13 return; 13 return;
14 14
15 var _modalWidth = $('.modal-dialog').width(); 15 var _modalWidth = $('.modal-dialog').width();
16 var _windowWidth = window.innerWidth; 16 var _windowWidth = window.innerWidth;
17 var place = $rootScope.placeTshirt.place; 17 var place = $rootScope.placeTshirt.place;
18 18
19 switch (place) { 19 switch (place) {
20 case 't_shirt_p_1' : 20 case 't_shirt_p_1' :
21 $scope.designCanvasClass = 'design-content-t_shirt_p_1'; 21 $scope.designCanvasClass = 'design-content-t_shirt_p_1';
22 if(_windowWidth > 762) { 22 if(_windowWidth > 762) {
23 var _contentCanvasWidth = (_modalWidth*8/12)/1.2; 23 var _contentCanvasWidth = (_modalWidth*8/12)/1.2;
24 var _contentCanvasHeight = _contentCanvasWidth; 24 var _contentCanvasHeight = _contentCanvasWidth;
25 } else { 25 } else {
26 var _contentCanvasWidth = _windowWidth-70; 26 var _contentCanvasWidth = _windowWidth-70;
27 var _contentCanvasHeight = _contentCanvasWidth; 27 var _contentCanvasHeight = _contentCanvasWidth;
28 } 28 }
29 break; 29 break;
30 case 't_shirt_p_2' : 30 case 't_shirt_p_2' :
31 $scope.designCanvasClass = 'design-content-t_shirt_p_2'; 31 $scope.designCanvasClass = 'design-content-t_shirt_p_2';
32 if(_windowWidth > 762) { 32 if(_windowWidth > 762) {
33 var _contentCanvasWidth = (_modalWidth*8/12)/1.2; 33 var _contentCanvasWidth = (_modalWidth*8/12)/1.2;
34 var _contentCanvasHeight = (_modalWidth*8/12)/2.2; 34 var _contentCanvasHeight = (_modalWidth*8/12)/2.2;
35 35
36 } else { 36 } else {
37 var _contentCanvasWidth = _windowWidth-70; 37 var _contentCanvasWidth = _windowWidth-70;
38 var _contentCanvasHeight = (_windowWidth)/2.5; 38 var _contentCanvasHeight = (_windowWidth)/2.5;
39 } 39 }
40 break; 40 break;
41 default: 41 default:
42 break; 42 break;
43 } 43 }
44 44
45 canvas.setWidth(_contentCanvasWidth); 45 canvas.setWidth(_contentCanvasWidth);
46 canvas.setHeight(_contentCanvasHeight); 46 canvas.setHeight(_contentCanvasHeight);
47 47
48 var mainDsWidth = (_modalWidth*8/12)-30; 48 var mainDsWidth = (_modalWidth*8/12)-30;
49 var mainDsHeight = (place == 't_shirt_p_1' ? 80 : 400) + _contentCanvasHeight; 49 var mainDsHeight = (place == 't_shirt_p_1' ? 80 : 400) + _contentCanvasHeight;
50 // console.log(mainDsWidth, mainDsHeight); 50 // console.log(mainDsWidth, mainDsHeight);
51 diffX = 40; 51 diffX = 40;
52 diffY = (mainDsHeight - _contentCanvasHeight)/2; 52 diffY = (mainDsHeight - _contentCanvasHeight)/2;
53 _coorTrash_x = _contentCanvasWidth + 20; 53 _coorTrash_x = _contentCanvasWidth + 20;
54 _coorTrash_y = _contentCanvasHeight + diffY - 90; 54 _coorTrash_y = _contentCanvasHeight + diffY - 90;
55 console.log(_coorTrash_x, _coorTrash_y); 55 console.log(_coorTrash_x, _coorTrash_y);
56 } 56 }
57 setSizeCanvas(); 57 setSizeCanvas();
58 //Window resize event 58 //Window resize event
59 $(window).resize(function () { 59 $(window).resize(function () {
60 setSizeCanvas(); 60 setSizeCanvas();
61 }); 61 });
62 62
63 //Custom control 63 //Custom control
64 fabric.Object.prototype.transparentCorners = true; 64 fabric.Object.prototype.transparentCorners = true;
65 fabric.Object.prototype.hasRotatingPoint = false; 65 fabric.Object.prototype.hasRotatingPoint = false;
66 66
67 var ctrVisible = {tl: false, ml:false, bl:false, mb: false, br: true, mr: false, tr: true, mt: true, mtr: false}; 67 var ctrVisible = {tl: false, ml:false, bl:false, mb: false, br: true, mr: false, tr: true, mt: true, mtr: false};
68 for(key in ctrVisible) { 68 for(key in ctrVisible) {
69 fabric.Object.prototype.setControlVisible(key,ctrVisible[key]); 69 fabric.Object.prototype.setControlVisible(key,ctrVisible[key]);
70 } 70 }
71 71
72 fabric.Object.prototype.customiseCornerIcons({ 72 fabric.Object.prototype.customiseCornerIcons({
73 settings: { 73 settings: {
74 borderColor: '#0000ff', 74 borderColor: '#0000ff',
75 cornerSize: 25, 75 cornerSize: 25,
76 cornerShape: 'circle', 76 cornerShape: 'circle',
77 cornerBackgroundColor: '#0171b4', 77 cornerBackgroundColor: '#0171b4',
78 cornerPadding: 6 78 cornerPadding: 6
79 }, 79 },
80 mt: { 80 mt: {
81 icon: 'images/control-icon/ok.png' 81 icon: 'images/control-icon/ok.png'
82 }, 82 },
83 br: { 83 br: {
84 icon: 'images/control-icon/resize.png' 84 icon: 'images/control-icon/resize.png'
85 }, 85 },
86 tr: { 86 tr: {
87 icon: 'images/control-icon/rotate.png' 87 icon: 'images/control-icon/rotate.png'
88 } 88 }
89 }); 89 });
90 90
91 fabric.Canvas.prototype.customiseControls({ 91 fabric.Canvas.prototype.customiseControls({
92 mt: { 92 mt: {
93 cursor: 'pointer', 93 cursor: 'pointer',
94 action: function(e, target) { 94 action: function(e, target) {
95 fabric.Object.prototype.selectable = false; 95 fabric.Object.prototype.selectable = false;
96 canvas.deactivateAll(); 96 canvas.deactivateAll();
97 delete currentObj; 97 delete currentObj;
98 $scope.designTextValue = ''; 98 $scope.designTextValue = '';
99 $timeout(function(){ 99 $timeout(function(){
100 fabric.Object.prototype.selectable = true; 100 fabric.Object.prototype.selectable = true;
101 },20); 101 },20);
102 } 102 }
103 }, 103 },
104 br: { 104 br: {
105 105
106 }, 106 },
107 tr: { 107 tr: {
108 action: 'rotate', 108 action: 'rotate',
109 cursor: 'crosshair' 109 cursor: 'crosshair'
110 } 110 }
111 }); 111 });
112 112
113 canvas.on({ 113 canvas.on({
114 'object:added' : onIllustrationAdded, 114 'object:added' : onIllustrationAdded,
115 'object:moving' : onIllustrationMoving, 115 'object:moving' : onIllustrationMoving,
116 'object:scaling' : onIllustrationChange, 116 'object:scaling' : onIllustrationChange,
117 'object:rotating' : onIllustrationChange, 117 'object:rotating' : onIllustrationChange,
118 'object:selected' : onObjectSelected, 118 'object:selected' : onObjectSelected,
119 'object:modified' : onIllustrationModifield, 119 'object:modified' : onIllustrationModifield,
120 'selection:cleared' : onObjectOut, 120 'selection:cleared' : onObjectOut,
121 }); 121 });
122 122
123 var currentObj; 123 var currentObj;
124 var listObj = []; 124 var listObj = [];
125 var stateObj = []; 125 var stateObj = [];
126 var indexCurr = 0; 126 var indexCurr = 0;
127 var indexCurr2 = 0; 127 var indexCurr2 = 0;
128 var actionObj = false; 128 var actionObj = false;
129 var refreshObj = true; 129 var refreshObj = true;
130 var spacingNum = 0; 130 var spacingNum = 0;
131 $scope.itemFont = 0; 131 $scope.itemFont = 0;
132 132
133 $scope.showDesignTab = function(tab){ 133 $scope.showDesignTab = function(tab){
134 canvas.deactivateAll().renderAll(); 134 canvas.deactivateAll().renderAll();
135 $rootScope.isShowLeftPanel = tab; 135 $rootScope.isShowLeftPanel = tab;
136 switch (tab) { 136 switch (tab) {
137 case 'illustration': { 137 case 'illustration': {
138 $scope.IllustrationList = $illustration.getAll(); 138 $scope.IllustrationList = $illustration.getAll();
139 $rootScope.outputImage = false; 139 $rootScope.outputImage = false;
140 $scope.illustrationSelectConfig = { 140 $scope.illustrationSelectConfig = {
141 allowClear:true 141 allowClear:true
142 }; 142 };
143 $timeout(function(){ 143 $timeout(function(){
144 $('.illstration-item').tooltip({ 144 $('.illstration-item').tooltip({
145 animated: 'fade', 145 animated: 'fade',
146 placement: 'bottom', 146 placement: 'bottom',
147 html: true 147 html: true
148 }); 148 });
149 },1000); 149 },1000);
150 break; 150 break;
151 } 151 }
152 case 'text': { 152 case 'text': {
153 break; 153 break;
154 } 154 }
155 } 155 }
156 }; 156 };
157 $scope.showDesignTab('default'); 157 $scope.showDesignTab('default');
158 158
159 159
160 function onIllustrationAdded(options){ 160 function onIllustrationAdded(options){
161 var object = options.target; 161 var object = options.target;
162 162
163 if (actionObj === true) { 163 if (actionObj === true) {
164 stateObj = [stateObj[indexCurr2]]; 164 stateObj = [stateObj[indexCurr2]];
165 listObj = [listObj[indexCurr2]]; 165 listObj = [listObj[indexCurr2]];
166 166
167 actionObj = false; 167 actionObj = false;
168 console.log(stateObj); 168 console.log(stateObj);
169 indexCurr = 1; 169 indexCurr = 1;
170 } 170 }
171 object.saveState(); 171 object.saveState();
172 172
173 // console.log(object.originalState); 173 // console.log(object.originalState);
174 stateObj[indexCurr] = JSON.stringify(object.originalState); 174 stateObj[indexCurr] = JSON.stringify(object.originalState);
175 listObj[indexCurr] = object; 175 listObj[indexCurr] = object;
176 indexCurr++; 176 indexCurr++;
177 indexCurr2 = indexCurr - 1; 177 indexCurr2 = indexCurr - 1;
178 refreshObj = true; 178 refreshObj = true;
179 } 179 }
180 180
181 function onIllustrationModifield(options){ 181 function onIllustrationModifield(options){
182 $('.object-border').hide(); 182 $('.object-border').hide();
183 // 183 //
184 var pointer = canvas.getPointer(options.e); 184 var pointer = canvas.getPointer(options.e);
185 if (pointer.x >= _coorTrash_x && pointer.y >= _coorTrash_y && pointer.x <= _coorTrash_x+50 && pointer.y <= _coorTrash_y+70){ 185 if (pointer.x >= _coorTrash_x && pointer.y >= _coorTrash_y && pointer.x <= _coorTrash_x+50 && pointer.y <= _coorTrash_y+70){
186 canvas.getActiveObject().remove(); 186 canvas.getActiveObject().remove();
187 $('.design-content .trash-design img').attr({'src':'images/trash.png'}); 187 $('.design-content .trash-design img').attr({'src':'images/trash.png'});
188 return; 188 return;
189 } 189 }
190 190
191 // 191 //
192 try{ 192 try{
193 var objOffset = canvas.getActiveObject().getBoundingRect(); 193 var objOffset = canvas.getActiveObject().getBoundingRect();
194 var cH = canvas.height, cW = canvas.width, H0 = 20, W0 = 20; 194 var cH = canvas.height, cW = canvas.width, H0 = 20, W0 = 20;
195 //console.log(objOffset,canvas.height,canvas.width); 195 //console.log(objOffset,canvas.height,canvas.width);
196 if (objOffset.left<W0-objOffset.width || objOffset.left>cW-W0 || objOffset.top<H0-objOffset.height || objOffset.top>cH-H0){ 196 if (objOffset.left<W0-objOffset.width || objOffset.left>cW-W0 || objOffset.top<H0-objOffset.height || objOffset.top>cH-H0){
197 if (confirm('削除してもよろしいですか')){ 197 if (confirm('削除してもよろしいですか')){
198 canvas.getActiveObject().remove(); 198 canvas.getActiveObject().remove();
199 }else{ 199 }else{
200 undoCanvas(); 200 undoCanvas();
201 return; 201 return;
202 } 202 }
203 } 203 }
204 }catch (e){ 204 }catch (e){
205 // 205 //
206 } 206 }
207 207
208 var object = options.target; 208 var object = options.target;
209 if (actionObj === true) { 209 if (actionObj === true) {
210 stateObj = [stateObj[indexCurr2]]; 210 stateObj = [stateObj[indexCurr2]];
211 listObj = [listObj[indexCurr2]]; 211 listObj = [listObj[indexCurr2]];
212 212
213 actionObj = false; 213 actionObj = false;
214 console.log(stateObj); 214 console.log(stateObj);
215 indexCurr = 1; 215 indexCurr = 1;
216 } 216 }
217 217
218 object.saveState(); 218 object.saveState();
219 219
220 stateObj[indexCurr] = JSON.stringify(object.originalState); 220 stateObj[indexCurr] = JSON.stringify(object.originalState);
221 listObj[indexCurr] = object; 221 listObj[indexCurr] = object;
222 indexCurr++; 222 indexCurr++;
223 indexCurr2 = indexCurr - 1; 223 indexCurr2 = indexCurr - 1;
224 refreshObj = true; 224 refreshObj = true;
225 } 225 }
226 226
227 function onIllustrationChange(options) { 227 function onIllustrationChange(options) {
228 228
229 } 229 }
230 230
231 function onIllustrationMoving(options) { 231 function onIllustrationMoving(options) {
232 var object = options.target; 232 var object = options.target;
233 var pointer = canvas.getPointer(options.e); 233 var pointer = canvas.getPointer(options.e);
234 // console.log(pointer.x, pointer.y); 234 // console.log(pointer.x, pointer.y);
235 if (pointer.x >= _coorTrash_x && pointer.y >= _coorTrash_y && pointer.x <= _coorTrash_x+50 && pointer.y <= _coorTrash_y+70){ 235 if (pointer.x >= _coorTrash_x && pointer.y >= _coorTrash_y && pointer.x <= _coorTrash_x+50 && pointer.y <= _coorTrash_y+70){
236 $('.design-content .trash-design img').attr({'src':'images/trash-hover.png'}); 236 $('.design-content .trash-design img').attr({'src':'images/trash-hover.png'});
237 }else{ 237 }else{
238 $('.design-content .trash-design img').attr({'src':'images/trash.png'}); 238 $('.design-content .trash-design img').attr({'src':'images/trash.png'});
239 } 239 }
240 240
241 // console.log(object.oCoords,object.originalState); 241 // console.log(object.oCoords,object.originalState);
242 object.setCoords(); 242 object.setCoords();
243 var Coords = object.oCoords; 243 var Coords = object.oCoords;
244 var xAngle = Math.cos(object.getAngle() * (Math.PI / 180))/2; 244 var xAngle = Math.cos(object.getAngle() * (Math.PI / 180))/2;
245 var yAngle = Math.sin(object.getAngle() * (Math.PI / 180))/2; 245 var yAngle = Math.sin(object.getAngle() * (Math.PI / 180))/2;
246 $('#object-border-left').css({'height':Math.ceil(object.originalState.height*object.scaleY), top: Coords.tl.y+diffY, left: Coords.tl.x+diffX}); 246 $('#object-border-left').css({'height':Math.ceil(object.originalState.height*object.scaleY), top: Coords.tl.y+diffY, left: Coords.tl.x+diffX});
247 $('#object-border-right').css({'height':Math.ceil(object.originalState.height*object.scaleY), top: Coords.tr.y+diffY, left: Coords.tr.x+diffX}); 247 $('#object-border-right').css({'height':Math.ceil(object.originalState.height*object.scaleY), top: Coords.tr.y+diffY, left: Coords.tr.x+diffX});
248 $('#object-border-top').css({'width':Math.ceil(object.originalState.width*object.scaleX), top: Coords.tl.y+diffY, left: Coords.tl.x+diffX}); 248 $('#object-border-top').css({'width':Math.ceil(object.originalState.width*object.scaleX), top: Coords.tl.y+diffY, left: Coords.tl.x+diffX});
249 $('#object-border-bottom').css({'width':Math.ceil(object.originalState.width*object.scaleX), top: Coords.bl.y+diffY, left: Coords.bl.x+diffX}); 249 $('#object-border-bottom').css({'width':Math.ceil(object.originalState.width*object.scaleX), top: Coords.bl.y+diffY, left: Coords.bl.x+diffX});
250 $('.object-border').css({ 250 $('.object-border').css({
251 '-ms-transform': 'rotate('+object.getAngle()+'deg)', /* IE 9 */ 251 '-ms-transform': 'rotate('+object.getAngle()+'deg)', /* IE 9 */
252 '-webkit-transform': 'rotate('+object.getAngle()+'deg)', /* Safari */ 252 '-webkit-transform': 'rotate('+object.getAngle()+'deg)', /* Safari */
253 'transform': 'rotate('+object.getAngle()+'deg)' /* Standard syntax */ 253 'transform': 'rotate('+object.getAngle()+'deg)' /* Standard syntax */
254 }); 254 });
255 $('.object-border').show(); 255 $('.object-border').show();
256 } 256 }
257 257
258 function onObjectOut() { 258 function onObjectOut() {
259 delete currentObj; 259 delete currentObj;
260 $scope.designTextValue = ''; 260 $scope.designTextValue = '';
261 } 261 }
262 262
263 function undoCanvas() { 263 function undoCanvas() {
264 if (indexCurr <= 0) { 264 if (indexCurr <= 0) {
265 indexCurr = 0; 265 indexCurr = 0;
266 return; 266 return;
267 } 267 }
268 268
269 if (refreshObj === true) { 269 if (refreshObj === true) {
270 indexCurr--; 270 indexCurr--;
271 refreshObj = false; 271 refreshObj = false;
272 } 272 }
273 273
274 console.log('undo'); 274 console.log('undo');
275 275
276 indexCurr2 = indexCurr - 1; 276 indexCurr2 = indexCurr - 1;
277 currentObj = listObj[indexCurr2]; 277 currentObj = listObj[indexCurr2];
278 if (currentObj){ 278 if (currentObj){
279 currentObj.setOptions(JSON.parse(indexCurr[indexCurr2])); 279 currentObj.setOptions(JSON.parse(indexCurr[indexCurr2]));
280 } 280 }
281 281
282 indexCurr--; 282 indexCurr--;
283 currentObj.setCoords(); 283 currentObj.setCoords();
284 canvas.renderAll(); 284 canvas.renderAll();
285 actionObj = true; 285 actionObj = true;
286 } 286 }
287 287
288 function redoCanvas() { 288 function redoCanvas() {
289 actionObj = true; 289 actionObj = true;
290 if (indexCurr >= stateObj.length - 1) { 290 if (indexCurr >= stateObj.length - 1) {
291 return; 291 return;
292 } 292 }
293 293
294 console.log('redo'); 294 console.log('redo');
295 295
296 indexCurr2 = indexCurr + 1; 296 indexCurr2 = indexCurr + 1;
297 currentObj = listObj[indexCurr2]; 297 currentObj = listObj[indexCurr2];
298 currentObj.setOptions(JSON.parse(indexCurr[indexCurr2])); 298 currentObj.setOptions(JSON.parse(indexCurr[indexCurr2]));
299 299
300 indexCurr++; 300 indexCurr++;
301 currentObj.setCoords(); 301 currentObj.setCoords();
302 canvas.renderAll(); 302 canvas.renderAll();
303 } 303 }
304 304
305 $scope.canvasClearAll = function(){ 305 $scope.canvasClearAll = function(){
306 if (confirm('配置されたすべての文字や画像を消去します')){ 306 if (confirm('配置されたすべての文字や画像を消去します')){
307 canvas.clear(); 307 canvas.clear();
308 ObjectOrd = 0; 308 ObjectOrd = 0;
309 } 309 }
310 } 310 }
311 311
312 function onObjectSelected(options) { 312 function onObjectSelected(options) {
313 var currentObj = options.target; 313 var currentObj = options.target;
314 if (typeof currentObj.toOrd() != 'number'){ 314 if (typeof currentObj.toOrd != 'function'){
315 var currentObjOrd = ++ObjectOrd; 315 var currentObjOrd = ++ObjectOrd;
316 currentObj.toOrd = function(){ 316 currentObj.toOrd = function(){
317 return currentObjOrd; 317 return currentObjOrd;
318 } 318 }
319 } 319 }
320 console.log(currentObj.toOrd()); 320 console.log(currentObj.toOrd());
321 $scope.typeObject = currentObj.type; 321 $scope.typeObject = currentObj.type;
322 switch ($scope.typeObject) { 322 switch ($scope.typeObject) {
323 case 'i-text' : 323 case 'i-text' :
324 $rootScope.isShowLeftPanel = 'text'; 324 $rootScope.isShowLeftPanel = 'text';
325 var text = currentObj.text; 325 var text = currentObj.text;
326 if(text != '') { 326 if(text != '') {
327 $scope.designText = text; 327 $scope.designText = text;
328 $scope.designTextValue = text; 328 $scope.designTextValue = text;
329 } 329 }
330 break; 330 break;
331 331
332 case 'path-group' : 332 case 'path-group' :
333 $rootScope.isShowLeftPanel = 'illustration'; 333 $rootScope.isShowLeftPanel = 'illustration';
334 break; 334 break;
335 335
336 case 'image': 336 case 'image':
337 $rootScope.isShowLeftPanel = 'image'; 337 $rootScope.isShowLeftPanel = 'image';
338 break; 338 break;
339 339
340 default : 340 default :
341 $rootScope.isShowLeftPanel = 'default'; 341 $rootScope.isShowLeftPanel = 'default';
342 break; 342 break;
343 } 343 }
344 $rootScope.safeApply(); 344 $rootScope.safeApply();
345 } 345 }
346 346
347 // Illustration process 347 // Illustration process
348 $scope.changeIllustrationCategory = function(currentIllustration){ 348 $scope.changeIllustrationCategory = function(currentIllustration){
349 $scope.currentIllustrationCate = $illustration.getList(currentIllustration); 349 $scope.currentIllustrationCate = $illustration.getList(currentIllustration);
350 }; 350 };
351 351
352 var arrSvgOriginal = []; 352 var arrSvgOriginal = [];
353 $scope.insertSvg = function(item){ 353 $scope.insertSvg = function(item){
354 fabric.loadSVGFromURL(item.path, function(objects, options) { 354 fabric.loadSVGFromURL(item.path, function(objects, options) {
355 var shape = fabric.util.groupSVGElements(objects, options); 355 var shape = fabric.util.groupSVGElements(objects, options);
356 var currentObjOrd = ++ObjectOrd; 356 var currentObjOrd = ++ObjectOrd;
357 arrSvgOriginal[currentObjOrd] = item.path; 357 arrSvgOriginal[currentObjOrd] = item.path;
358 shape.toOrd = function(){ 358 shape.toOrd = function(){
359 return currentObjOrd; 359 return currentObjOrd;
360 } 360 }
361 canvas.add(shape.scale(0.6)); 361 canvas.add(shape.scale(0.6));
362 shape.set({ left: 150, top: 100 }).setCoords(); 362 shape.set({ left: 150, top: 100 }).setCoords();
363 canvas.renderAll(); 363 canvas.renderAll();
364 canvas.setActiveObject(shape); 364 canvas.setActiveObject(shape);
365 }); 365 });
366 }; 366 };
367 367
368 // color pattern 368 // color pattern
369 $scope.listColorPatterns = [ 369 $scope.listColorPatterns = [
370 '#000000','#ffff00','#ff6600','#ff0000','#ff6262','#ffa19c','#ff9933','#c45d01','#5d2b03','#ffffcc', 370 '#000000','#ffff00','#ff6600','#ff0000','#ff6262','#ffa19c','#ff9933','#c45d01','#5d2b03','#ffffcc',
371 '#ffff99','#ffd500','#c0db50','#21a52a','#00663f','#abfcab','#36ffaa','#89eaea','#00938c','#005450', 371 '#ffff99','#ffd500','#c0db50','#21a52a','#00663f','#abfcab','#36ffaa','#89eaea','#00938c','#005450',
372 '#0badff','#006cff','#839aff','#0410a0','#ffb2ff','#f93fff','#6600ca','#ff6699','#999999','#666666', 372 '#0badff','#006cff','#839aff','#0410a0','#ffb2ff','#f93fff','#6600ca','#ff6699','#999999','#666666',
373 '#333333' 373 '#333333'
374 ]; 374 ];
375 375
376 $scope.changeColorPattern = function(color){ 376 $scope.changeColorPattern = function(color){
377 var obj = canvas.getActiveObject(); 377 var obj = canvas.getActiveObject();
378 if (!color){ 378 if (!color){
379 color = 'none'; 379 color = 'none';
380 // console.log(obj.toOrd(), arrSvgOriginal[obj.toOrd()]); 380 // console.log(obj.toOrd(), arrSvgOriginal[obj.toOrd()]);
381 if (typeof obj.toOrd() == 'number' && typeof arrSvgOriginal[obj.toOrd()] != 'undefined'){ 381 if (typeof obj.toOrd == 'function' && typeof arrSvgOriginal[obj.toOrd()] != 'undefined'){
382 var currentObjOrd = obj.toOrd(); 382 var currentObjOrd = obj.toOrd();
383 fabric.loadSVGFromURL(arrSvgOriginal[obj.toOrd()], function(objects, options) { 383 fabric.loadSVGFromURL(arrSvgOriginal[obj.toOrd()], function(objects, options) {
384 var shape = fabric.util.groupSVGElements(objects, options); 384 var shape = fabric.util.groupSVGElements(objects, options);
385 shape.toOrd = function(){ 385 shape.toOrd = function(){
386 return currentObjOrd; 386 return currentObjOrd;
387 } 387 }
388 obj.setCoords(); 388 obj.setCoords();
389 shape.setScaleX(obj.getScaleX()); 389 shape.setScaleX(obj.getScaleX());
390 shape.setScaleY(obj.getScaleY()); 390 shape.setScaleY(obj.getScaleY());
391 shape.set('top',obj.getTop()); 391 shape.set('top',obj.getTop());
392 shape.set('left',obj.getLeft()); 392 shape.set('left',obj.getLeft());
393 shape.set('angle',obj.getAngle()); 393 shape.set('angle',obj.getAngle());
394 // shape.set('height',obj.getHeight()); 394 // shape.set('height',obj.getHeight());
395 // shape.set('width',obj.getWidth()); 395 // shape.set('width',obj.getWidth());
396 canvas.add(shape); 396 canvas.add(shape);
397 shape.setCoords(); 397 shape.setCoords();
398 // shape.set({ left: 150, top: 100 }).setCoords(); 398 // shape.set({ left: 150, top: 100 }).setCoords();
399 canvas.renderAll(); 399 canvas.renderAll();
400 canvas.setActiveObject(shape); 400 canvas.setActiveObject(shape);
401 obj.remove(); 401 obj.remove();
402 }); 402 });
403 } 403 }
404 }else{ 404 }else{
405 if (obj instanceof fabric.PathGroup) { 405 if (obj instanceof fabric.PathGroup) {
406 obj.getObjects().forEach(function(o) { 406 obj.getObjects().forEach(function(o) {
407 o.fill = color; 407 o.fill = color;
408 }); 408 });
409 } 409 }
410 else { 410 else {
411 obj.fill = color; 411 obj.fill = color;
412 } 412 }
413 canvas.renderAll(); 413 canvas.renderAll();
414 } 414 }
415 }; 415 };
416 416
417 //Font 417 //Font
418 $scope.listFontFamily = [ 418 $scope.listFontFamily = [
419 { 419 {
420 name : 'GN Aki iro Sesami Cookies', 420 name : 'GN Aki iro Sesami Cookies',
421 slug : 'gn_aki_iro_sesami_cookies', 421 slug : 'gn_aki_iro_sesami_cookies',
422 }, 422 },
423 { 423 {
424 name : 'GN-Fuyu-iro_Script_Bold', 424 name : 'GN-Fuyu-iro_Script_Bold',
425 slug : 'gn_fuyu_iro_script_bold' 425 slug : 'gn_fuyu_iro_script_bold'
426 }, 426 },
427 { 427 {
428 name : 'GN Killgothic U Kanana', 428 name : 'GN Killgothic U Kanana',
429 slug : 'gn_killgothic_u_kanana' 429 slug : 'gn_killgothic_u_kanana'
430 }, 430 },
431 { 431 {
432 name : 'GN-Kin-iro_Alphabet_Cookies', 432 name : 'GN-Kin-iro_Alphabet_Cookies',
433 slug : 'gn_kin_iro_alphabet_cookies' 433 slug : 'gn_kin_iro_alphabet_cookies'
434 434
435 }, 435 },
436 { 436 {
437 name : 'GN-Kin-iro_SansSerif', 437 name : 'GN-Kin-iro_SansSerif',
438 slug : 'gn_kin_iro_sansserif' 438 slug : 'gn_kin_iro_sansserif'
439 439
440 }, 440 },
441 { 441 {
442 name : 'GN-Koharuiro_Sunray', 442 name : 'GN-Koharuiro_Sunray',
443 slug : 'gn_koharuiro_sunray' 443 slug : 'gn_koharuiro_sunray'
444 444
445 }, 445 },
446 { 446 {
447 name : 'GN-Kyu-pin', 447 name : 'GN-Kyu-pin',
448 slug : 'gn_kyu_pin' 448 slug : 'gn_kyu_pin'
449 }, 449 },
450 { 450 {
451 name : 'gn_natsu_iro_schedule', 451 name : 'gn_natsu_iro_schedule',
452 slug : 'gn_natsu_iro_schedule' 452 slug : 'gn_natsu_iro_schedule'
453 453
454 }, 454 },
455 { 455 {
456 name : 'gnkana_kiniro_sansserif_l', 456 name : 'gnkana_kiniro_sansserif_l',
457 slug : 'gnkana_kiniro_sansserif_l' 457 slug : 'gnkana_kiniro_sansserif_l'
458 458
459 }, 459 },
460 { 460 {
461 name : 'gnkana_kiniro_sansserif_st', 461 name : 'gnkana_kiniro_sansserif_st',
462 slug : 'gnkana_kiniro_sansserif_st' 462 slug : 'gnkana_kiniro_sansserif_st'
463 }, 463 },
464 { 464 {
465 name : 'gnkana_kon_iro_nightfall', 465 name : 'gnkana_kon_iro_nightfall',
466 slug : 'gnkana_kon_iro_nightfall' 466 slug : 'gnkana_kon_iro_nightfall'
467 467
468 }, 468 },
469 { 469 {
470 name : 'ms_gothic', 470 name : 'ms_gothic',
471 slug : 'ms_gothic' 471 slug : 'ms_gothic'
472 472
473 }, 473 },
474 { 474 {
475 name : 'msmincho', 475 name : 'msmincho',
476 slug : 'msmincho' 476 slug : 'msmincho'
477 }, 477 },
478 { 478 {
479 name : 'ufonts_com_ms_pgothic', 479 name : 'ufonts_com_ms_pgothic',
480 slug : 'ufonts_com_ms_pgothic' 480 slug : 'ufonts_com_ms_pgothic'
481 } 481 }
482 ]; 482 ];
483 483
484 // layer process 484 // layer process
485 $scope.layerProcess = function(mode) { 485 $scope.layerProcess = function(mode) {
486 // console.log('layerProcess'); 486 // console.log('layerProcess');
487 var activeObject = canvas.getActiveObject(); 487 var activeObject = canvas.getActiveObject();
488 488
489 if (activeObject){ 489 if (activeObject){
490 switch (mode) { 490 switch (mode) {
491 case 1: 491 case 1:
492 activeObject.bringForward(); 492 activeObject.bringForward();
493 break; 493 break;
494 case 2: 494 case 2:
495 activeObject.sendBackwards(); 495 activeObject.sendBackwards();
496 break; 496 break;
497 case 3: 497 case 3:
498 activeObject.bringToFront(); 498 activeObject.bringToFront();
499 break; 499 break;
500 case 4: 500 case 4:
501 activeObject.sendToBack(); 501 activeObject.sendToBack();
502 break; 502 break;
503 } 503 }
504 canvas.deactivateAll().renderAll(); 504 canvas.deactivateAll().renderAll();
505 } 505 }
506 }; 506 };
507 507
508 $scope.focusInputText = function(text) { 508 $scope.focusInputText = function(text) {
509 currentObj = canvas.getActiveObject(); 509 currentObj = canvas.getActiveObject();
510 if(typeof currentObj == 'undefined' || currentObj == null) { 510 if(typeof currentObj == 'undefined' || currentObj == null) {
511 $scope.iText = new fabric.IText('', { 511 $scope.iText = new fabric.IText('', {
512 left: 150, 512 left: 150,
513 top: 200, 513 top: 200,
514 fontFamily: typeof $scope.itemFont != 'undefined' ? $scope.listFontFamily[$scope.itemFont].slug : $scope.listFontFamily[0].slug, 514 fontFamily: typeof $scope.itemFont != 'undefined' ? $scope.listFontFamily[$scope.itemFont].slug : $scope.listFontFamily[0].slug,
515 fontWeight: 'normal', 515 fontWeight: 'normal',
516 textAlign: 'center', 516 textAlign: 'center',
517 fontSize: 28, 517 fontSize: 28,
518 fill: 'black', 518 fill: 'black',
519 editable: false 519 editable: false
520 }); 520 });
521 } else { 521 } else {
522 if(currentObj.type != 'i-text') { 522 if(currentObj.type != 'i-text') {
523 $scope.iText = new fabric.IText('', { 523 $scope.iText = new fabric.IText('', {
524 left: 150, 524 left: 150,
525 top: 200, 525 top: 200,
526 fontFamily: typeof $scope.itemFont != 'undefined' ? $scope.listFontFamily[$scope.itemFont].slug : $scope.listFontFamily[0].slug, 526 fontFamily: typeof $scope.itemFont != 'undefined' ? $scope.listFontFamily[$scope.itemFont].slug : $scope.listFontFamily[0].slug,
527 fontWeight: 'normal', 527 fontWeight: 'normal',
528 textAlign: 'center', 528 textAlign: 'center',
529 fontSize: 28, 529 fontSize: 28,
530 fill: 'black', 530 fill: 'black',
531 editable: false 531 editable: false
532 }); 532 });
533 } else{ 533 } else{
534 $scope.iText = currentObj; 534 $scope.iText = currentObj;
535 } 535 }
536 } 536 }
537 }; 537 };
538 538
539 //Design text 539 //Design text
540 $scope.inputText = function(e) { 540 $scope.inputText = function(e) {
541 if(typeof $scope.iText != "undefined") { 541 if(typeof $scope.iText != "undefined") {
542 var iText = $scope.iText; 542 var iText = $scope.iText;
543 iText.text = e; 543 iText.text = e;
544 canvas.add(iText); 544 canvas.add(iText);
545 canvas.renderAll(); 545 canvas.renderAll();
546 canvas.setActiveObject(iText); 546 canvas.setActiveObject(iText);
547 } 547 }
548 }; 548 };
549 $scope.setFontFamily = function(font,index) { 549 $scope.setFontFamily = function(font,index) {
550 $scope.itemFont = index; 550 $scope.itemFont = index;
551 if(canvas.getActiveObject()) { 551 if(canvas.getActiveObject()) {
552 var currentObj = canvas.getActiveObject(); 552 var currentObj = canvas.getActiveObject();
553 if(currentObj.type == 'i-text') { 553 if(currentObj.type == 'i-text') {
554 currentObj.set('fontFamily', font); 554 currentObj.set('fontFamily', font);
555 canvas.renderAll(); 555 canvas.renderAll();
556 canvas.setActiveObject(currentObj); 556 canvas.setActiveObject(currentObj);
557 } 557 }
558 558
559 } 559 }
560 }; 560 };
561 //Set letter spacing text 561 //Set letter spacing text
562 $scope.setLetterSpacingText = function(e) { 562 $scope.setLetterSpacingText = function(e) {
563 if(canvas.getActiveObject()) { 563 if(canvas.getActiveObject()) {
564 var currentObj = canvas.getActiveObject(); 564 var currentObj = canvas.getActiveObject();
565 if(currentObj.type == 'i-text') { 565 if(currentObj.type == 'i-text') {
566 if(e == 'plus') 566 if(e == 'plus')
567 spacingNum = spacingNum + 30; 567 spacingNum = spacingNum + 30;
568 else if (spacingNum >= -30){ 568 else if (spacingNum >= -30){
569 spacingNum = spacingNum - 30; 569 spacingNum = spacingNum - 30;
570 } 570 }
571 if(e == 'default') 571 if(e == 'default')
572 spacingNum = 0; 572 spacingNum = 0;
573 573
574 currentObj.set('charSpacing', spacingNum); 574 currentObj.set('charSpacing', spacingNum);
575 canvas.renderAll(); 575 canvas.renderAll();
576 canvas.setActiveObject(currentObj); 576 canvas.setActiveObject(currentObj);
577 } 577 }
578 } 578 }
579 }; 579 };
580 580
581 581
582 /**** process insert image */ 582 /**** process insert image */
583 if (typeof($window.localStorage.recentImages) != 'undefined'){ 583 if (typeof($window.localStorage.recentImages) != 'undefined'){
584 $scope.recentImages = JSON.parse($window.localStorage.recentImages); 584 $scope.recentImages = JSON.parse($window.localStorage.recentImages);
585 }else{ 585 }else{
586 $scope.recentImages = {}; 586 $scope.recentImages = {};
587 } 587 }
588 588
589 var addToRecentImage = function(name, data){ 589 var addToRecentImage = function(name, data){
590 if (typeof($window.localStorage.recentImages) != 'undefined'){ 590 if (typeof($window.localStorage.recentImages) != 'undefined'){
591 $scope.recentImages = JSON.parse($window.localStorage.recentImages); 591 $scope.recentImages = JSON.parse($window.localStorage.recentImages);
592 }else{ 592 }else{
593 $scope.recentImages = {}; 593 $scope.recentImages = {};
594 } 594 }
595 595
596 if (typeof($scope.recentImages[name]) == 'undefined'){ 596 if (typeof($scope.recentImages[name]) == 'undefined'){
597 var ii=0; 597 var ii=0;
598 var II = 0; 598 var II = 0;
599 for(var item in $scope.recentImages){ 599 for(var item in $scope.recentImages){
600 if (II==0){ 600 if (II==0){
601 II = item; 601 II = item;
602 } 602 }
603 ii++; 603 ii++;
604 } 604 }
605 if (ii>16 && II!=0){ 605 if (ii>16 && II!=0){
606 delete $scope.recentImages[II]; 606 delete $scope.recentImages[II];
607 } 607 }
608 $scope.recentImages[name] = data; 608 $scope.recentImages[name] = data;
609 $window.localStorage.recentImages = JSON.stringify($scope.recentImages); 609 $window.localStorage.recentImages = JSON.stringify($scope.recentImages);
610 } 610 }
611 } 611 }
612 $scope.chooseImage = function(e){//console.log(e); 612 $scope.chooseImage = function(e){//console.log(e);
613 if (e.target.files[0] && e.target.files[0].size > 5*1024*1024){ 613 if (e.target.files[0] && e.target.files[0].size > 5*1024*1024){
614 alert('アップロードできませんでした'); 614 alert('アップロードできませんでした');
615 return; 615 return;
616 } 616 }
617 var reader = new FileReader(); 617 var reader = new FileReader();
618 reader.onload = function (event) { 618 reader.onload = function (event) {
619 addToRecentImage ($('#imgLoader').val(), event.target.result); 619 addToRecentImage ($('#imgLoader').val(), event.target.result);
620 var imgObj = new Image();//console.log($('#imgLoader').val()); 620 var imgObj = new Image();//console.log($('#imgLoader').val());
621 imgObj.src = event.target.result; 621 imgObj.src = event.target.result;
622 imgObj.onload = function () { 622 imgObj.onload = function () {
623 // start fabricJS stuff 623 // start fabricJS stuff
624 624
625 var image = new fabric.Image(imgObj); 625 var image = new fabric.Image(imgObj);
626 image.set({ 626 image.set({
627 left: 50, 627 left: 50,
628 top: 50 628 top: 50
629 }); 629 });
630 //image.scale(getRandomNum(0.1, 0.25)).setCoords(); 630 //image.scale(getRandomNum(0.1, 0.25)).setCoords();
631 image.scaleToWidth(200); 631 image.scaleToWidth(200);
632 canvas.add(image); 632 canvas.add(image);
633 } 633 }
634 } 634 }
635 reader.readAsDataURL(e.target.files[0]); 635 reader.readAsDataURL(e.target.files[0]);
636 } 636 }
637 637
638 $scope.insertRecentImage = function(data){ 638 $scope.insertRecentImage = function(data){
639 var imgObj = new Image(); 639 var imgObj = new Image();
640 imgObj.src = data; 640 imgObj.src = data;
641 imgObj.onload = function () { 641 imgObj.onload = function () {
642 // start fabricJS stuff 642 // start fabricJS stuff
643 643
644 var image = new fabric.Image(imgObj); 644 var image = new fabric.Image(imgObj);
645 image.set({ 645 image.set({
646 left: 50, 646 left: 50,
647 top: 50 647 top: 50
648 }); 648 });
649 image.scaleToWidth(200); 649 image.scaleToWidth(200);
650 canvas.add(image); 650 canvas.add(image);
651 } 651 }
652 } 652 }
653 653
654 //Traslation text 654 //Traslation text
655 $scope.rotateText = function(style) { 655 $scope.rotateText = function(style) {
656 if(canvas.getActiveObject()) { 656 if(canvas.getActiveObject()) {
657 var currentObj = canvas.getActiveObject(); 657 var currentObj = canvas.getActiveObject();
658 if(currentObj.type == 'i-text') { 658 if(currentObj.type == 'i-text') {
659 currentObj.set('rotate', Math.PI / 4); 659 currentObj.set('rotate', Math.PI / 4);
660 canvas.renderAll(); 660 canvas.renderAll();
661 canvas.setActiveObject(currentObj); 661 canvas.setActiveObject(currentObj);
662 } 662 }
663 } 663 }
664 }; 664 };
665 665
666 666
667 /* Process output */ 667 /* Process output */
668 $scope.outputDesign = function(){ 668 $scope.outputDesign = function(){
669 $rootScope.outputImage = canvas.toDataURL('png'); 669 $rootScope.outputImage = canvas.toDataURL('png');
670 // console.log(); 670 // console.log();
671 $('#tshirt-design').modal('hide'); 671 $('#tshirt-design').modal('hide');
672 } 672 }
673 673
674 $scope.showRecommend = function(){ 674 $scope.showRecommend = function(){
675 $scope.recommendList = $favorite.getAll(); 675 $scope.recommendList = $favorite.getAll();
676 $scope.favoriteList = $favorite.getAll(); 676 $scope.favoriteList = $favorite.getAll();
677 $('#tshirt-design-saved').modal({ 677 $('#tshirt-design-saved').modal({
678 backdrop: 'static', 678 backdrop: 'static',
679 keyboard: false 679 keyboard: false
680 }); 680 });
681 $timeout(function(){ 681 $timeout(function(){
682 $('.saved-item').tooltip({ 682 $('.saved-item').tooltip({
683 animated: 'fade', 683 animated: 'fade',
684 placement: 'bottom', 684 placement: 'bottom',
685 html: true 685 html: true
686 }); 686 });
687 },1000); 687 },1000);
688 } 688 }
689 689
690 $scope.closeSavedModal = function(){ 690 $scope.closeSavedModal = function(){
691 $('#tshirt-design-saved').modal('hide'); 691 $('#tshirt-design-saved').modal('hide');
692 } 692 }
693 693
694 $scope.openSavedTab = function(tab){ 694 $scope.openSavedTab = function(tab){
695 $('#tshirt-design-saved .subframe-design .nav-tabs li').removeClass('active'); 695 $('#tshirt-design-saved .subframe-design .nav-tabs li').removeClass('active');
696 $('#tab-saved-'+tab).addClass('active'); 696 $('#tab-saved-'+tab).addClass('active');
697 $('#tshirt-design-saved .subframe-design .tab-content .tab-pane').removeClass('active'); 697 $('#tshirt-design-saved .subframe-design .tab-content .tab-pane').removeClass('active');
698 $('#content-saved-'+tab).addClass('active'); 698 $('#content-saved-'+tab).addClass('active');
699 699
700 $timeout(function(){ 700 $timeout(function(){
701 $('.saved-item img').tooltip({ 701 $('.saved-item img').tooltip({
702 animated: 'fade', 702 animated: 'fade',
703 placement: 'bottom', 703 placement: 'bottom',
704 html: true 704 html: true
705 }); 705 });
706 },500); 706 },500);
707 } 707 }
708 708
709 $favorite.loadFromRemote(); 709 $favorite.loadFromRemote();
710 $scope.saveFavorite = function(){ 710 $scope.saveFavorite = function(){
711 if (!confirm('Do you want to put current design to your favorite?')){ 711 if (!confirm('Do you want to put current design to your favorite?')){
712 return; 712 return;
713 } 713 }
714 var dataDump = { 714 var dataDump = {
715 thumb: canvas.toDataURL('png'), 715 thumb: canvas.toDataURL('png'),
716 data: JSON.stringify(canvas) 716 data: JSON.stringify(canvas)
717 } 717 }
718 $favorite.addToFavorite({ 718 $favorite.addToFavorite({
719 data: dataDump 719 data: dataDump
720 }) 720 })
721 // console.log(JSON.stringify(dataDump)); 721 // console.log(JSON.stringify(dataDump));
722 alert('saved'); 722 alert('saved');
723 } 723 }
724 724
725 $scope.restoreSaved = function(item){ 725 $scope.restoreSaved = function(item){
726 if (!confirm('this may be clear all current design frame, are you sure ?')){ 726 if (!confirm('this may be clear all current design frame, are you sure ?')){
727 return; 727 return;
728 } 728 }
729 $('#tshirt-design-saved').modal('hide'); 729 $('#tshirt-design-saved').modal('hide');
730 canvas.loadFromJSON(item.data,canvas.renderAll.bind(canvas)); 730 canvas.loadFromJSON(item.data,canvas.renderAll.bind(canvas));
731 ObjectOrd = 0; 731 ObjectOrd = 0;
732 canvas.forEachObject(function(obj){ 732 canvas.forEachObject(function(obj){
733 var currentObjOrd = ++ObjectOrd; 733 var currentObjOrd = ++ObjectOrd;
734 obj.toOrd = function(){ 734 obj.toOrd = function(){
735 return currentObjOrd; 735 return currentObjOrd;
736 } 736 }
737 }); 737 });
738 } 738 }
739 739
740 $scope.deleteFavorite = function(idx){ 740 $scope.deleteFavorite = function(idx){
741 if (confirm('are you sure?')){ 741 if (confirm('are you sure?')){
742 $favorite.removeFromFavorite({ 742 $favorite.removeFromFavorite({
743 idx: idx 743 idx: idx
744 }); 744 });
745 $scope.recommendList = $favorite.getAll(); 745 $scope.recommendList = $favorite.getAll();
746 $scope.favoriteList = $favorite.getAll(); 746 $scope.favoriteList = $favorite.getAll();
747 } 747 }
748 } 748 }
749 }); 749 });
750 }); 750 });
751 751