TRUONG / T-Shats Frontend

Download as
Browse Code »

Commit 39a1e279b113ce1fbfd708a99fc3f4ae099c91d4

Authored by DANG
1 parent ee675eec19
Exists in master and in 1 other branch develop

update

Showing 2 changed files with 8 additions and 10 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 = '24-11_03'; 50 var VERSION = '24-11_04';
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 @ 39a1e27
1 define(['app'], function (app) { 1 define(['app'], function (app) {
2 //'use strict'; 2 //'use strict';
3 app.controller('TshirtdesignCtrl', function ($scope, $rootScope, $window, $timeout, $illustration) { 3 app.controller('TshirtdesignCtrl', function ($scope, $rootScope, $window, $timeout, $illustration) {
4 4
5 var canvas = new fabric.Canvas('main-design-container'); 5 var canvas = new fabric.Canvas('main-design-container');
6 //Set width and height canvas 6 //Set width and height canvas
7 var _modalWidth = $('.modal-dialog').width(); 7 var _modalWidth = $('.modal-dialog').width();
8 var _windowWidth = window.innerWidth; 8 var _windowWidth = window.innerWidth;
9 if(_windowWidth > 762) { 9 if(_windowWidth > 762) {
10 var _contentCanvasWidth = _modalWidth*8/12 - 100; 10 var _contentCanvasWidth = _modalWidth*8/12 - 100;
11 } else { 11 } else {
12 var _contentCanvasWidth = _windowWidth-70; 12 var _contentCanvasWidth = _windowWidth-70;
13 } 13 }
14 14
15 15 console.log(canvas);
16 canvas.setWidth(_contentCanvasWidth); 16 canvas.setWidth(_contentCanvasWidth);
17 canvas.setHeight(650); 17 canvas.setHeight(650);
18 18 canvas._onMouseDown = function () {
19 alert('in mouse up');
20 };
19 //Custom control 21 //Custom control
20 fabric.Object.prototype.transparentCorners = false; 22 fabric.Object.prototype.transparentCorners = false;
21 fabric.Object.prototype.hasRotatingPoint = false; 23 fabric.Object.prototype.hasRotatingPoint = false;
22 24
23 // fabric.Canvas.prototype.__onMouseDown = function (e) { 25 // fabric.Canvas.prototype.__onMouseDown = function (e) {
24 // // return false; 26 // // return false;
25 // }; 27 // };
26 28
27 var ctrVisible = {tl: false, ml:false, bl:false, mb: false, br: true, mr: false, tr: true, mt: true, mtr: false}; 29 var ctrVisible = {tl: false, ml:false, bl:false, mb: false, br: true, mr: false, tr: true, mt: true, mtr: false};
28 for(key in ctrVisible) { 30 for(key in ctrVisible) {
29 fabric.Object.prototype.setControlVisible(key,ctrVisible[key]); 31 fabric.Object.prototype.setControlVisible(key,ctrVisible[key]);
30 } 32 }
31 33
32 fabric.Object.prototype.customiseCornerIcons({ 34 fabric.Object.prototype.customiseCornerIcons({
33 settings: { 35 settings: {
34 borderColor: '#0000ff', 36 borderColor: '#0000ff',
35 cornerSize: 25, 37 cornerSize: 25,
36 cornerShape: 'circle', 38 cornerShape: 'circle',
37 cornerBackgroundColor: '#0171b4', 39 cornerBackgroundColor: '#0171b4',
38 cornerPadding: 6 40 cornerPadding: 6
39 }, 41 },
40 mt: { 42 mt: {
41 icon: 'images/control-icon/trash.png' 43 icon: 'images/control-icon/ok.png'
42 }, 44 },
43 br: { 45 br: {
44 icon: 'images/control-icon/resize.png' 46 icon: 'images/control-icon/resize.png'
45 }, 47 },
46 tr: { 48 tr: {
47 icon: 'images/control-icon/rotate.png' 49 icon: 'images/control-icon/rotate.png'
48 } 50 }
49 }); 51 });
50 52
51 fabric.Canvas.prototype.customiseControls({ 53 fabric.Canvas.prototype.customiseControls({
52 mt: { 54 mt: {
53 cursor: 'pointer', 55 cursor: 'pointer',
54 action: function(e, target) { 56 action: function(e, target) {
55 if(confirm('削除してもよろしいですか?')) { 57 canvas.deactivateAll().renderAll();
56 if (canvas.getActiveObject()) {
57 canvas.remove(canvas.getActiveObject());
58 }
59 canvas.renderAll();
60 }
61 } 58 }
62 }, 59 },
63 br: { 60 br: {
64 61
65 }, 62 },
66 tr: { 63 tr: {
67 action: 'rotate', 64 action: 'rotate',
68 cursor: 'crosshair' 65 cursor: 'crosshair'
69 } 66 }
70 }); 67 });
71 68
72 canvas.on('after:render', function() { 69 canvas.on('after:render', function() {
73 // console.log('after render'); 70 // console.log('after render');
74 }); 71 });
75 canvas.on({ 72 canvas.on({
76 'object:added' : onIllustrationAdded, 73 'object:added' : onIllustrationAdded,
77 'object:moving' : onIllustrationMoving, 74 'object:moving' : onIllustrationMoving,
78 'object:scaling' : onIllustrationChange, 75 'object:scaling' : onIllustrationChange,
79 'object:rotating' : onIllustrationChange, 76 'object:rotating' : onIllustrationChange,
80 'object:selected' : onObjectSelected, 77 'object:selected' : onObjectSelected,
81 'object:modified' : onIllustrationModifield, 78 'object:modified' : onIllustrationModifield,
82 'selection:cleared' : onObjectOut, 79 'selection:cleared' : onObjectOut,
83 }); 80 });
84 81
85 var currentObj; 82 var currentObj;
86 var listObj = []; 83 var listObj = [];
87 var stateObj = []; 84 var stateObj = [];
88 var indexCurr = 0; 85 var indexCurr = 0;
89 var indexCurr2 = 0; 86 var indexCurr2 = 0;
90 var actionObj = false; 87 var actionObj = false;
91 var refreshObj = true; 88 var refreshObj = true;
92 var spacingNum = 0; 89 var spacingNum = 0;
93 $scope.itemFont = 0; 90 $scope.itemFont = 0;
94 91
95 92
96 $scope.showDesignTab = function(tab){ 93 $scope.showDesignTab = function(tab){
97 canvas.deactivateAll().renderAll(); 94 canvas.deactivateAll().renderAll();
98 $rootScope.isShowLeftPanel = tab; 95 $rootScope.isShowLeftPanel = tab;
99 switch (tab) { 96 switch (tab) {
100 case 'illustration': { 97 case 'illustration': {
101 $scope.IllustrationList = $illustration.getAll(); 98 $scope.IllustrationList = $illustration.getAll();
102 $rootScope.outputImage = false; 99 $rootScope.outputImage = false;
103 $scope.illustrationSelectConfig = { 100 $scope.illustrationSelectConfig = {
104 allowClear:true 101 allowClear:true
105 }; 102 };
106 $timeout(function(){ 103 $timeout(function(){
107 $('.illstration-item').tooltip({ 104 $('.illstration-item').tooltip({
108 animated: 'fade', 105 animated: 'fade',
109 placement: 'bottom', 106 placement: 'bottom',
110 html: true 107 html: true
111 }); 108 });
112 // console.log('here'); 109 // console.log('here');
113 },1000); 110 },1000);
114 break; 111 break;
115 } 112 }
116 case 'text': { 113 case 'text': {
117 break; 114 break;
118 } 115 }
119 } 116 }
120 }; 117 };
121 $scope.showDesignTab('default'); 118 $scope.showDesignTab('default');
122 119
123 120
124 function onIllustrationAdded(options){ 121 function onIllustrationAdded(options){
125 var object = options.target; 122 var object = options.target;
126 // console.log('object:added'); 123 // console.log('object:added');
127 124
128 if (actionObj === true) { 125 if (actionObj === true) {
129 stateObj = [stateObj[indexCurr2]]; 126 stateObj = [stateObj[indexCurr2]];
130 listObj = [listObj[indexCurr2]]; 127 listObj = [listObj[indexCurr2]];
131 128
132 actionObj = false; 129 actionObj = false;
133 console.log(stateObj); 130 console.log(stateObj);
134 indexCurr = 1; 131 indexCurr = 1;
135 } 132 }
136 object.saveState(); 133 object.saveState();
137 134
138 console.log(object.originalState); 135 console.log(object.originalState);
139 stateObj[indexCurr] = JSON.stringify(object.originalState); 136 stateObj[indexCurr] = JSON.stringify(object.originalState);
140 listObj[indexCurr] = object; 137 listObj[indexCurr] = object;
141 indexCurr++; 138 indexCurr++;
142 indexCurr2 = indexCurr - 1; 139 indexCurr2 = indexCurr - 1;
143 refreshObj = true; 140 refreshObj = true;
144 } 141 }
145 142
146 function onIllustrationModifield(options){ 143 function onIllustrationModifield(options){
147 // 144 //
148 var pointer = canvas.getPointer(options.e); 145 var pointer = canvas.getPointer(options.e);
149 if (pointer.x >= 567 && pointer.y >= 620 && pointer.x <= 600 && pointer.y <= 670){ 146 if (pointer.x >= 567 && pointer.y >= 620 && pointer.x <= 600 && pointer.y <= 670){
150 canvas.getActiveObject().remove(); 147 canvas.getActiveObject().remove();
151 $('.design-content .trash-design img').attr({'src':'images/trash.png'}); 148 $('.design-content .trash-design img').attr({'src':'images/trash.png'});
152 return; 149 return;
153 } 150 }
154 151
155 // 152 //
156 var objOffset = canvas.getActiveObject().getBoundingRect(); 153 var objOffset = canvas.getActiveObject().getBoundingRect();
157 var cH = canvas.height, cW = canvas.width, H0 = 20, W0 = 20; 154 var cH = canvas.height, cW = canvas.width, H0 = 20, W0 = 20;
158 //console.log(objOffset,canvas.height,canvas.width); 155 //console.log(objOffset,canvas.height,canvas.width);
159 if (objOffset.left<W0-objOffset.width || objOffset.left>cW-W0 || objOffset.top<H0-objOffset.height || objOffset.top>cH-H0){ 156 if (objOffset.left<W0-objOffset.width || objOffset.left>cW-W0 || objOffset.top<H0-objOffset.height || objOffset.top>cH-H0){
160 if (confirm('削除してもよろしいですか')){ 157 if (confirm('削除してもよろしいですか')){
161 canvas.getActiveObject().remove(); 158 canvas.getActiveObject().remove();
162 }else{ 159 }else{
163 undoCanvas(); 160 undoCanvas();
164 return; 161 return;
165 } 162 }
166 } 163 }
167 164
168 var object = options.target; 165 var object = options.target;
169 // console.log('object:modified'); 166 // console.log('object:modified');
170 if (actionObj === true) { 167 if (actionObj === true) {
171 stateObj = [stateObj[indexCurr2]]; 168 stateObj = [stateObj[indexCurr2]];
172 listObj = [listObj[indexCurr2]]; 169 listObj = [listObj[indexCurr2]];
173 170
174 actionObj = false; 171 actionObj = false;
175 console.log(stateObj); 172 console.log(stateObj);
176 indexCurr = 1; 173 indexCurr = 1;
177 } 174 }
178 175
179 object.saveState(); 176 object.saveState();
180 177
181 stateObj[indexCurr] = JSON.stringify(object.originalState); 178 stateObj[indexCurr] = JSON.stringify(object.originalState);
182 listObj[indexCurr] = object; 179 listObj[indexCurr] = object;
183 indexCurr++; 180 indexCurr++;
184 indexCurr2 = indexCurr - 1; 181 indexCurr2 = indexCurr - 1;
185 // console.log(stateObj); 182 // console.log(stateObj);
186 refreshObj = true; 183 refreshObj = true;
187 } 184 }
188 185
189 function onIllustrationChange(options) { 186 function onIllustrationChange(options) {
190 // options.target.setCoords(); 187 // options.target.setCoords();
191 // canvas.forEachObject(function(obj) { 188 // canvas.forEachObject(function(obj) {
192 // if (obj === options.target) return; 189 // if (obj === options.target) return;
193 // obj.setOpacity(options.target.intersectsWithObject(obj) ? 0.5 : 1); 190 // obj.setOpacity(options.target.intersectsWithObject(obj) ? 0.5 : 1);
194 // }); 191 // });
195 } 192 }
196 193
197 function onIllustrationMoving(options) { 194 function onIllustrationMoving(options) {
198 var pointer = canvas.getPointer(options.e); 195 var pointer = canvas.getPointer(options.e);
199 if (pointer.x >= 567 && pointer.y >= 620 && pointer.x <= 600 && pointer.y <= 670){ 196 if (pointer.x >= 567 && pointer.y >= 620 && pointer.x <= 600 && pointer.y <= 670){
200 $('.design-content .trash-design img').attr({'src':'images/trash-hover.png'}); 197 $('.design-content .trash-design img').attr({'src':'images/trash-hover.png'});
201 }else{ 198 }else{
202 $('.design-content .trash-design img').attr({'src':'images/trash.png'}); 199 $('.design-content .trash-design img').attr({'src':'images/trash.png'});
203 } 200 }
204 } 201 }
205 202
206 function onObjectOut() { 203 function onObjectOut() {
207 delete currentObj; 204 delete currentObj;
208 $scope.designTextValue = ''; 205 $scope.designTextValue = '';
209 } 206 }
210 207
211 function undoCanvas() { 208 function undoCanvas() {
212 if (indexCurr <= 0) { 209 if (indexCurr <= 0) {
213 indexCurr = 0; 210 indexCurr = 0;
214 return; 211 return;
215 } 212 }
216 213
217 if (refreshObj === true) { 214 if (refreshObj === true) {
218 indexCurr--; 215 indexCurr--;
219 refreshObj = false; 216 refreshObj = false;
220 } 217 }
221 218
222 console.log('undo'); 219 console.log('undo');
223 220
224 indexCurr2 = indexCurr - 1; 221 indexCurr2 = indexCurr - 1;
225 currentObj = listObj[indexCurr2]; 222 currentObj = listObj[indexCurr2];
226 if (currentObj){ 223 if (currentObj){
227 currentObj.setOptions(JSON.parse(indexCurr[indexCurr2])); 224 currentObj.setOptions(JSON.parse(indexCurr[indexCurr2]));
228 } 225 }
229 226
230 indexCurr--; 227 indexCurr--;
231 currentObj.setCoords(); 228 currentObj.setCoords();
232 canvas.renderAll(); 229 canvas.renderAll();
233 actionObj = true; 230 actionObj = true;
234 } 231 }
235 232
236 function redoCanvas() { 233 function redoCanvas() {
237 actionObj = true; 234 actionObj = true;
238 if (indexCurr >= stateObj.length - 1) { 235 if (indexCurr >= stateObj.length - 1) {
239 return; 236 return;
240 } 237 }
241 238
242 console.log('redo'); 239 console.log('redo');
243 240
244 indexCurr2 = indexCurr + 1; 241 indexCurr2 = indexCurr + 1;
245 currentObj = listObj[indexCurr2]; 242 currentObj = listObj[indexCurr2];
246 currentObj.setOptions(JSON.parse(indexCurr[indexCurr2])); 243 currentObj.setOptions(JSON.parse(indexCurr[indexCurr2]));
247 244
248 indexCurr++; 245 indexCurr++;
249 currentObj.setCoords(); 246 currentObj.setCoords();
250 canvas.renderAll(); 247 canvas.renderAll();
251 } 248 }
252 249
253 $scope.canvasClearAll = function(){ 250 $scope.canvasClearAll = function(){
254 if (confirm('配置されたすべての文字や画像を消去します')){ 251 if (confirm('配置されたすべての文字や画像を消去します')){
255 canvas.clear(); 252 canvas.clear();
256 } 253 }
257 } 254 }
258 255
259 function onObjectSelected(options) { 256 function onObjectSelected(options) {
260 var currentObj = options.target; 257 var currentObj = options.target;
258
261 259
262 $scope.typeObject = currentObj.type; 260 $scope.typeObject = currentObj.type;
263 switch ($scope.typeObject) { 261 switch ($scope.typeObject) {
264 case 'i-text' : 262 case 'i-text' :
265 $rootScope.isShowLeftPanel = 'text'; 263 $rootScope.isShowLeftPanel = 'text';
266 var text = currentObj.text; 264 var text = currentObj.text;
267 if(text != '') { 265 if(text != '') {
268 $scope.designText = text; 266 $scope.designText = text;
269 $scope.designTextValue = text; 267 $scope.designTextValue = text;
270 } 268 }
271 break; 269 break;
272 270
273 case 'path-group' : 271 case 'path-group' :
274 $rootScope.isShowLeftPanel = 'illustration'; 272 $rootScope.isShowLeftPanel = 'illustration';
275 break; 273 break;
276 274
277 case 'image': 275 case 'image':
278 $rootScope.isShowLeftPanel = 'image'; 276 $rootScope.isShowLeftPanel = 'image';
279 break; 277 break;
280 278
281 default : 279 default :
282 $rootScope.isShowLeftPanel = 'default'; 280 $rootScope.isShowLeftPanel = 'default';
283 break; 281 break;
284 } 282 }
285 $rootScope.safeApply(); 283 $rootScope.safeApply();
286 } 284 }
287 285
288 // Illustration process 286 // Illustration process
289 $scope.changeIllustrationCategory = function(currentIllustration){ 287 $scope.changeIllustrationCategory = function(currentIllustration){
290 $scope.currentIllustrationCate = $illustration.getList(currentIllustration); 288 $scope.currentIllustrationCate = $illustration.getList(currentIllustration);
291 //console.log($scope.currentIllustrationCate); 289 //console.log($scope.currentIllustrationCate);
292 }; 290 };
293 291
294 $scope.insertSvg = function(item){ 292 $scope.insertSvg = function(item){
295 fabric.loadSVGFromURL(item.path, function(objects, options) { 293 fabric.loadSVGFromURL(item.path, function(objects, options) {
296 var shape = fabric.util.groupSVGElements(objects, options); 294 var shape = fabric.util.groupSVGElements(objects, options);
297 //shape.setFill('green'); 295 //shape.setFill('green');
298 canvas.add(shape.scale(0.6)); 296 canvas.add(shape.scale(0.6));
299 shape.set({ left: 150, top: 200 }).setCoords(); 297 shape.set({ left: 150, top: 200 }).setCoords();
300 canvas.renderAll(); 298 canvas.renderAll();
301 canvas.setActiveObject(shape); 299 canvas.setActiveObject(shape);
302 }); 300 });
303 }; 301 };
304 302
305 // color pattern 303 // color pattern
306 $scope.listColorPatterns = [ 304 $scope.listColorPatterns = [
307 '#000000','#ffff00','#ff6600','#ff0000','#ff6262','#ffa19c','#ff9933','#c45d01','#5d2b03','#ffffcc', 305 '#000000','#ffff00','#ff6600','#ff0000','#ff6262','#ffa19c','#ff9933','#c45d01','#5d2b03','#ffffcc',
308 '#ffff99','#ffd500','#c0db50','#21a52a','#00663f','#abfcab','#36ffaa','#89eaea','#00938c','#005450', 306 '#ffff99','#ffd500','#c0db50','#21a52a','#00663f','#abfcab','#36ffaa','#89eaea','#00938c','#005450',
309 '#0badff','#006cff','#839aff','#0410a0','#ffb2ff','#f93fff','#6600ca','#ff6699','#999999','#666666', 307 '#0badff','#006cff','#839aff','#0410a0','#ffb2ff','#f93fff','#6600ca','#ff6699','#999999','#666666',
310 '#333333' 308 '#333333'
311 ]; 309 ];
312 310
313 $scope.changeColorPattern = function(color){ 311 $scope.changeColorPattern = function(color){
314 var obj = canvas.getActiveObject(); 312 var obj = canvas.getActiveObject();
315 if (!color){ 313 if (!color){
316 color = 'none'; 314 color = 'none';
317 } 315 }
318 if (obj instanceof fabric.PathGroup) { 316 if (obj instanceof fabric.PathGroup) {
319 obj.getObjects().forEach(function(o) { 317 obj.getObjects().forEach(function(o) {
320 o.fill = color; 318 o.fill = color;
321 }); 319 });
322 } 320 }
323 else { 321 else {
324 obj.fill = color; 322 obj.fill = color;
325 } 323 }
326 canvas.renderAll(); 324 canvas.renderAll();
327 // if (canvas.getActiveObject()){ 325 // if (canvas.getActiveObject()){
328 // canvas.getActiveObject().set("fill", color); 326 // canvas.getActiveObject().set("fill", color);
329 // canvas.renderAll(); 327 // canvas.renderAll();
330 // } 328 // }
331 }; 329 };
332 330
333 //Font 331 //Font
334 $scope.listFontFamily = [ 332 $scope.listFontFamily = [
335 { 333 {
336 name : 'GN Aki iro Sesami Cookies', 334 name : 'GN Aki iro Sesami Cookies',
337 slug : 'gn_aki_iro_sesami_cookies', 335 slug : 'gn_aki_iro_sesami_cookies',
338 }, 336 },
339 { 337 {
340 name : 'GN-Fuyu-iro_Script_Bold', 338 name : 'GN-Fuyu-iro_Script_Bold',
341 slug : 'gn_fuyu_iro_script_bold' 339 slug : 'gn_fuyu_iro_script_bold'
342 }, 340 },
343 { 341 {
344 name : 'GN Killgothic U Kanana', 342 name : 'GN Killgothic U Kanana',
345 slug : 'gn_killgothic_u_kanana' 343 slug : 'gn_killgothic_u_kanana'
346 }, 344 },
347 { 345 {
348 name : 'GN-Kin-iro_Alphabet_Cookies', 346 name : 'GN-Kin-iro_Alphabet_Cookies',
349 slug : 'gn_kin_iro_alphabet_cookies' 347 slug : 'gn_kin_iro_alphabet_cookies'
350 348
351 }, 349 },
352 { 350 {
353 name : 'GN-Kin-iro_SansSerif', 351 name : 'GN-Kin-iro_SansSerif',
354 slug : 'gn_kin_iro_sansserif' 352 slug : 'gn_kin_iro_sansserif'
355 353
356 }, 354 },
357 { 355 {
358 name : 'GN-Koharuiro_Sunray', 356 name : 'GN-Koharuiro_Sunray',
359 slug : 'gn_koharuiro_sunray' 357 slug : 'gn_koharuiro_sunray'
360 358
361 }, 359 },
362 { 360 {
363 name : 'GN-Kyu-pin', 361 name : 'GN-Kyu-pin',
364 slug : 'gn_kyu_pin' 362 slug : 'gn_kyu_pin'
365 }, 363 },
366 { 364 {
367 name : 'gn_natsu_iro_schedule', 365 name : 'gn_natsu_iro_schedule',
368 slug : 'gn_natsu_iro_schedule' 366 slug : 'gn_natsu_iro_schedule'
369 367
370 }, 368 },
371 { 369 {
372 name : 'gnkana_kiniro_sansserif_l', 370 name : 'gnkana_kiniro_sansserif_l',
373 slug : 'gnkana_kiniro_sansserif_l' 371 slug : 'gnkana_kiniro_sansserif_l'
374 372
375 }, 373 },
376 { 374 {
377 name : 'gnkana_kiniro_sansserif_st', 375 name : 'gnkana_kiniro_sansserif_st',
378 slug : 'gnkana_kiniro_sansserif_st' 376 slug : 'gnkana_kiniro_sansserif_st'
379 }, 377 },
380 { 378 {
381 name : 'gnkana_kon_iro_nightfall', 379 name : 'gnkana_kon_iro_nightfall',
382 slug : 'gnkana_kon_iro_nightfall' 380 slug : 'gnkana_kon_iro_nightfall'
383 381
384 }, 382 },
385 { 383 {
386 name : 'ms_gothic', 384 name : 'ms_gothic',
387 slug : 'ms_gothic' 385 slug : 'ms_gothic'
388 386
389 }, 387 },
390 { 388 {
391 name : 'msmincho', 389 name : 'msmincho',
392 slug : 'msmincho' 390 slug : 'msmincho'
393 }, 391 },
394 { 392 {
395 name : 'ufonts_com_ms_pgothic', 393 name : 'ufonts_com_ms_pgothic',
396 slug : 'ufonts_com_ms_pgothic' 394 slug : 'ufonts_com_ms_pgothic'
397 } 395 }
398 ]; 396 ];
399 397
400 // layer process 398 // layer process
401 $scope.layerProcess = function(mode) { 399 $scope.layerProcess = function(mode) {
402 // console.log('layerProcess'); 400 // console.log('layerProcess');
403 var activeObject = canvas.getActiveObject(); 401 var activeObject = canvas.getActiveObject();
404 402
405 console.log(activeObject); 403 console.log(activeObject);
406 404
407 if (activeObject){ 405 if (activeObject){
408 switch (mode) { 406 switch (mode) {
409 case 1: 407 case 1:
410 // canvas.bringForward(activeObject); 408 // canvas.bringForward(activeObject);
411 activeObject.bringForward(); 409 activeObject.bringForward();
412 break; 410 break;
413 case 2: 411 case 2:
414 // canvas.sendBackwards(activeObject); 412 // canvas.sendBackwards(activeObject);
415 activeObject.sendBackwards(); 413 activeObject.sendBackwards();
416 break; 414 break;
417 case 3: 415 case 3:
418 // canvas.bringToFront(activeObject); 416 // canvas.bringToFront(activeObject);
419 activeObject.bringToFront(); 417 activeObject.bringToFront();
420 break; 418 break;
421 case 4: 419 case 4:
422 // canvas.sendToBack(activeObject); 420 // canvas.sendToBack(activeObject);
423 activeObject.sendToBack(); 421 activeObject.sendToBack();
424 break; 422 break;
425 } 423 }
426 canvas.deactivateAll().renderAll(); 424 canvas.deactivateAll().renderAll();
427 } 425 }
428 }; 426 };
429 427
430 $scope.focusInputText = function(text) { 428 $scope.focusInputText = function(text) {
431 currentObj = canvas.getActiveObject(); 429 currentObj = canvas.getActiveObject();
432 if(typeof currentObj == 'undefined' || currentObj == null) { 430 if(typeof currentObj == 'undefined' || currentObj == null) {
433 $scope.iText = new fabric.IText('', { 431 $scope.iText = new fabric.IText('', {
434 left: 150, 432 left: 150,
435 top: 200, 433 top: 200,
436 fontFamily: typeof $scope.itemFont != 'undefined' ? $scope.listFontFamily[$scope.itemFont].slug : $scope.listFontFamily[0].slug, 434 fontFamily: typeof $scope.itemFont != 'undefined' ? $scope.listFontFamily[$scope.itemFont].slug : $scope.listFontFamily[0].slug,
437 fontWeight: 'normal', 435 fontWeight: 'normal',
438 textAlign: 'center', 436 textAlign: 'center',
439 fontSize: 28, 437 fontSize: 28,
440 fill: 'black' 438 fill: 'black'
441 }); 439 });
442 } else { 440 } else {
443 if(currentObj.type != 'i-text') { 441 if(currentObj.type != 'i-text') {
444 $scope.iText = new fabric.IText('', { 442 $scope.iText = new fabric.IText('', {
445 left: 150, 443 left: 150,
446 top: 200, 444 top: 200,
447 fontFamily: typeof $scope.itemFont != 'undefined' ? $scope.listFontFamily[$scope.itemFont].slug : $scope.listFontFamily[0].slug, 445 fontFamily: typeof $scope.itemFont != 'undefined' ? $scope.listFontFamily[$scope.itemFont].slug : $scope.listFontFamily[0].slug,
448 fontWeight: 'normal', 446 fontWeight: 'normal',
449 textAlign: 'center', 447 textAlign: 'center',
450 fontSize: 28, 448 fontSize: 28,
451 fill: 'black' 449 fill: 'black'
452 }); 450 });
453 } else{ 451 } else{
454 $scope.iText = currentObj; 452 $scope.iText = currentObj;
455 } 453 }
456 } 454 }
457 }; 455 };
458 456
459 //Design text 457 //Design text
460 $scope.inputText = function(e) { 458 $scope.inputText = function(e) {
461 if(typeof $scope.iText != "undefined") { 459 if(typeof $scope.iText != "undefined") {
462 var iText = $scope.iText; 460 var iText = $scope.iText;
463 iText.text = e; 461 iText.text = e;
464 canvas.add(iText); 462 canvas.add(iText);
465 canvas.renderAll(); 463 canvas.renderAll();
466 canvas.setActiveObject(iText); 464 canvas.setActiveObject(iText);
467 } 465 }
468 }; 466 };
469 $scope.setFontFamily = function(font,index) { 467 $scope.setFontFamily = function(font,index) {
470 $scope.itemFont = index; 468 $scope.itemFont = index;
471 if(canvas.getActiveObject()) { 469 if(canvas.getActiveObject()) {
472 var currentObj = canvas.getActiveObject(); 470 var currentObj = canvas.getActiveObject();
473 if(currentObj.type == 'i-text') { 471 if(currentObj.type == 'i-text') {
474 currentObj.set('fontFamily', font); 472 currentObj.set('fontFamily', font);
475 canvas.renderAll(); 473 canvas.renderAll();
476 canvas.setActiveObject(currentObj); 474 canvas.setActiveObject(currentObj);
477 } 475 }
478 476
479 } 477 }
480 }; 478 };
481 //Set letter spacing text 479 //Set letter spacing text
482 $scope.setLetterSpacingText = function(e) { 480 $scope.setLetterSpacingText = function(e) {
483 if(canvas.getActiveObject()) { 481 if(canvas.getActiveObject()) {
484 var currentObj = canvas.getActiveObject(); 482 var currentObj = canvas.getActiveObject();
485 if(currentObj.type == 'i-text') { 483 if(currentObj.type == 'i-text') {
486 if(e == 'plus') 484 if(e == 'plus')
487 spacingNum = spacingNum + 30; 485 spacingNum = spacingNum + 30;
488 else if (spacingNum >= -30){ 486 else if (spacingNum >= -30){
489 spacingNum = spacingNum - 30; 487 spacingNum = spacingNum - 30;
490 } 488 }
491 currentObj.set('charSpacing', spacingNum); 489 currentObj.set('charSpacing', spacingNum);
492 canvas.renderAll(); 490 canvas.renderAll();
493 canvas.setActiveObject(currentObj); 491 canvas.setActiveObject(currentObj);
494 } 492 }
495 } 493 }
496 }; 494 };
497 495
498 $scope.setLetterSpacingTextDefault = function() { 496 $scope.setLetterSpacingTextDefault = function() {
499 if(canvas.getActiveObject()) { 497 if(canvas.getActiveObject()) {
500 var currentObj = canvas.getActiveObject(); 498 var currentObj = canvas.getActiveObject();
501 if(currentObj.type == 'i-text') { 499 if(currentObj.type == 'i-text') {
502 spacingNum = 0; 500 spacingNum = 0;
503 currentObj.set('charSpacing', spacingNum); 501 currentObj.set('charSpacing', spacingNum);
504 canvas.renderAll(); 502 canvas.renderAll();
505 canvas.setActiveObject(currentObj); 503 canvas.setActiveObject(currentObj);
506 } 504 }
507 } 505 }
508 }; 506 };
509 507
510 508
511 /**** process insert image */ 509 /**** process insert image */
512 if (typeof($window.localStorage.recentImages) != 'undefined'){ 510 if (typeof($window.localStorage.recentImages) != 'undefined'){
513 $scope.recentImages = JSON.parse($window.localStorage.recentImages); 511 $scope.recentImages = JSON.parse($window.localStorage.recentImages);
514 }else{ 512 }else{
515 $scope.recentImages = {}; 513 $scope.recentImages = {};
516 } 514 }
517 515
518 var addToRecentImage = function(name, data){ 516 var addToRecentImage = function(name, data){
519 if (typeof($window.localStorage.recentImages) != 'undefined'){ 517 if (typeof($window.localStorage.recentImages) != 'undefined'){
520 $scope.recentImages = JSON.parse($window.localStorage.recentImages); 518 $scope.recentImages = JSON.parse($window.localStorage.recentImages);
521 }else{ 519 }else{
522 $scope.recentImages = {}; 520 $scope.recentImages = {};
523 } 521 }
524 522
525 if (typeof($scope.recentImages[name]) == 'undefined'){ 523 if (typeof($scope.recentImages[name]) == 'undefined'){
526 var ii=0; 524 var ii=0;
527 var II = 0; 525 var II = 0;
528 for(var item in $scope.recentImages){ 526 for(var item in $scope.recentImages){
529 if (II==0){ 527 if (II==0){
530 II = item; 528 II = item;
531 } 529 }
532 ii++; 530 ii++;
533 } 531 }
534 if (ii>16 && II!=0){ 532 if (ii>16 && II!=0){
535 delete $scope.recentImages[II]; 533 delete $scope.recentImages[II];
536 } 534 }
537 $scope.recentImages[name] = data; 535 $scope.recentImages[name] = data;
538 $window.localStorage.recentImages = JSON.stringify($scope.recentImages); 536 $window.localStorage.recentImages = JSON.stringify($scope.recentImages);
539 } 537 }
540 } 538 }
541 $scope.chooseImage = function(e){//console.log(e); 539 $scope.chooseImage = function(e){//console.log(e);
542 if (e.target.files[0] && e.target.files[0].size > 5*1024*1024){ 540 if (e.target.files[0] && e.target.files[0].size > 5*1024*1024){
543 alert('アップロードできませんでした'); 541 alert('アップロードできませんでした');
544 return; 542 return;
545 } 543 }
546 var reader = new FileReader(); 544 var reader = new FileReader();
547 reader.onload = function (event) { 545 reader.onload = function (event) {
548 addToRecentImage ($('#imgLoader').val(), event.target.result); 546 addToRecentImage ($('#imgLoader').val(), event.target.result);
549 var imgObj = new Image();//console.log($('#imgLoader').val()); 547 var imgObj = new Image();//console.log($('#imgLoader').val());
550 imgObj.src = event.target.result; 548 imgObj.src = event.target.result;
551 imgObj.onload = function () { 549 imgObj.onload = function () {
552 // start fabricJS stuff 550 // start fabricJS stuff
553 551
554 var image = new fabric.Image(imgObj); 552 var image = new fabric.Image(imgObj);
555 image.set({ 553 image.set({
556 left: 50, 554 left: 50,
557 top: 50 555 top: 50
558 }); 556 });
559 //image.scale(getRandomNum(0.1, 0.25)).setCoords(); 557 //image.scale(getRandomNum(0.1, 0.25)).setCoords();
560 image.scaleToWidth(200); 558 image.scaleToWidth(200);
561 canvas.add(image); 559 canvas.add(image);
562 } 560 }
563 } 561 }
564 reader.readAsDataURL(e.target.files[0]); 562 reader.readAsDataURL(e.target.files[0]);
565 } 563 }
566 564
567 $scope.insertRecentImage = function(data){ 565 $scope.insertRecentImage = function(data){
568 var imgObj = new Image(); 566 var imgObj = new Image();
569 imgObj.src = data; 567 imgObj.src = data;
570 imgObj.onload = function () { 568 imgObj.onload = function () {
571 // start fabricJS stuff 569 // start fabricJS stuff
572 570
573 var image = new fabric.Image(imgObj); 571 var image = new fabric.Image(imgObj);
574 image.set({ 572 image.set({
575 left: 50, 573 left: 50,
576 top: 50 574 top: 50
577 }); 575 });
578 image.scaleToWidth(200); 576 image.scaleToWidth(200);
579 canvas.add(image); 577 canvas.add(image);
580 } 578 }
581 } 579 }
582 580
583 //Traslation text 581 //Traslation text
584 $scope.rotateText = function(style) { 582 $scope.rotateText = function(style) {
585 if(canvas.getActiveObject()) { 583 if(canvas.getActiveObject()) {
586 var currentObj = canvas.getActiveObject(); 584 var currentObj = canvas.getActiveObject();
587 if(currentObj.type == 'i-text') { 585 if(currentObj.type == 'i-text') {
588 currentObj.set('rotate', Math.PI / 4); 586 currentObj.set('rotate', Math.PI / 4);
589 canvas.renderAll(); 587 canvas.renderAll();
590 canvas.setActiveObject(currentObj); 588 canvas.setActiveObject(currentObj);
591 } 589 }
592 } 590 }
593 }; 591 };
594 592
595 593
596 /* Process output */ 594 /* Process output */
597 $scope.outputDesign = function(){ 595 $scope.outputDesign = function(){
598 $rootScope.outputImage = canvas.toDataURL('png'); 596 $rootScope.outputImage = canvas.toDataURL('png');
599 // console.log(); 597 // console.log();
600 $('#tshirt-design').modal('hide'); 598 $('#tshirt-design').modal('hide');
601 } 599 }