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

Download as
Browse Code »

Commit dd18c10382544e3c19bc5ad7bb568a5ec26ca2e6

Authored by Dang YoungWorld
1 parent b196bab487
Exists in master and in 1 other branch develop

fix delete

Showing 2 changed files with 20 additions and 16 deletions Inline Diff

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