ngohungcuong.windy@gmail.com / T-Shats Frontend

Download as
Browse Code »

Commit e6cd2bf542ea0cae80ac989091e4b5421f80c4f3

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

update version

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