TRUONG / T-Shats Frontend

Download as
Browse Code »

Commit 057ad34c679e4d4e1403d0d9ee13589780d659a3

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

fix clear color SVG

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