TRUONG / T-Shats Frontend

Download as
Browse Code »

Commit 92271fd7c0bd66301033c89ad87be49bb2d19697

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

add event

Showing 2 changed files with 76 additions and 42 deletions Inline Diff

app/scripts/controllers/tshirtdesign.js
Diff comments   View file @ 92271fd
1 define(['app'], function (app) { 1 define(['app'], function (app) {
2 //'use strict'; 2 //'use strict';
3 3
4 app.controller('TshirtdesignCtrl', function ($scope, $rootScope, $illustration) { 4 app.controller('TshirtdesignCtrl', function ($scope, $rootScope, $illustration) {
5 var canvas = new fabric.Canvas('main-design-container'); 5 var canvas = new fabric.Canvas('main-design-container');
6 fabric.Object.prototype.transparentCorners = false; 6 fabric.Object.prototype.transparentCorners = false;
7 7
8 canvas.on('after:render', function() { 8 canvas.on('after:render', function() {
9 console.log('after render');
9 }); 10 });
10 canvas.on({ 11 canvas.on({
11 'object:added': onIllustrationAdded, 12 'object:added' : onIllustrationAdded,
12 'object:moving': onIllustrationChange, 13 'object:moving' : onIllustrationChange,
13 'object:scaling': onIllustrationChange, 14 'object:scaling' : onIllustrationChange,
14 'object:rotating': onIllustrationChange, 15 'object:rotating' : onIllustrationChange,
15 'object:selected': onIllustrationSelected, 16 'object:selected' : onObjectSelected,
16 'object:modified': onIllustrationModifield, 17 'object:modified' : onIllustrationModifield,
17 'selected:deselected' : onIllustrationOut, 18 'selection:cleared' : onObjectOut,
18 //'selected:out' : onIllustrationOut,
19 //'mouse:up' : onIllustrationOut,
20 }); 19 });
21 20
22 var currentObj; 21 var currentObj;
23 var listObj = []; 22 var listObj = [];
24 var stateObj = []; 23 var stateObj = [];
25 var indexCurr = 0; 24 var indexCurr = 0;
26 var indexCurr2 = 0; 25 var indexCurr2 = 0;
27 var actionObj = false; 26 var actionObj = false;
28 var refreshObj = true; 27 var refreshObj = true;
28 var spacingNum = 0;
29 29
30 function onIllustrationAdded(options){ 30 function onIllustrationAdded(options){
31 var object = options.target; 31 var object = options.target;
32 console.log('object:added'); 32 console.log('object:added');
33 33
34 if (actionObj === true) { 34 if (actionObj === true) {
35 stateObj = [stateObj[indexCurr2]]; 35 stateObj = [stateObj[indexCurr2]];
36 listObj = [listObj[indexCurr2]]; 36 listObj = [listObj[indexCurr2]];
37 37
38 actionObj = false; 38 actionObj = false;
39 console.log(stateObj); 39 console.log(stateObj);
40 indexCurr = 1; 40 indexCurr = 1;
41 } 41 }
42 object.saveState(); 42 object.saveState();
43 43
44 console.log(object.originalState); 44 console.log(object.originalState);
45 stateObj[indexCurr] = JSON.stringify(object.originalState); 45 stateObj[indexCurr] = JSON.stringify(object.originalState);
46 listObj[indexCurr] = object; 46 listObj[indexCurr] = object;
47 indexCurr++; 47 indexCurr++;
48 indexCurr2 = indexCurr - 1; 48 indexCurr2 = indexCurr - 1;
49 refreshObj = true; 49 refreshObj = true;
50 } 50 }
51 51
52 function onIllustrationModifield(options){ 52 function onIllustrationModifield(options){
53 var objOffset = canvas.getActiveObject().getBoundingRect(); 53 var objOffset = canvas.getActiveObject().getBoundingRect();
54 var cH = canvas.height, cW = canvas.width, H0 = 50, W0 = 50; 54 var cH = canvas.height, cW = canvas.width, H0 = 50, W0 = 50;
55 //console.log(objOffset,canvas.height,canvas.width); 55 //console.log(objOffset,canvas.height,canvas.width);
56 if (objOffset.left<W0-objOffset.width || objOffset.left>cW-W0 || objOffset.top<H0-objOffset.height || objOffset.top>cH-H0){ 56 if (objOffset.left<W0-objOffset.width || objOffset.left>cW-W0 || objOffset.top<H0-objOffset.height || objOffset.top>cH-H0){
57 if (confirm('削除してもよろしいですか')){ 57 if (confirm('削除してもよろしいですか')){
58 canvas.getActiveObject().remove(); 58 canvas.getActiveObject().remove();
59 }else{ 59 }else{
60 undoCanvas(); 60 undoCanvas();
61 return; 61 return;
62 } 62 }
63 } 63 }
64 64
65 var object = options.target; 65 var object = options.target;
66 console.log('object:modified'); 66 console.log('object:modified');
67 if (actionObj === true) { 67 if (actionObj === true) {
68 stateObj = [stateObj[indexCurr2]]; 68 stateObj = [stateObj[indexCurr2]];
69 listObj = [listObj[indexCurr2]]; 69 listObj = [listObj[indexCurr2]];
70 70
71 actionObj = false; 71 actionObj = false;
72 console.log(stateObj); 72 console.log(stateObj);
73 indexCurr = 1; 73 indexCurr = 1;
74 } 74 }
75 75
76 object.saveState(); 76 object.saveState();
77 77
78 stateObj[indexCurr] = JSON.stringify(object.originalState); 78 stateObj[indexCurr] = JSON.stringify(object.originalState);
79 listObj[indexCurr] = object; 79 listObj[indexCurr] = object;
80 indexCurr++; 80 indexCurr++;
81 indexCurr2 = indexCurr - 1; 81 indexCurr2 = indexCurr - 1;
82 console.log(stateObj); 82 console.log(stateObj);
83 refreshObj = true; 83 refreshObj = true;
84 } 84 }
85 85
86 function onIllustrationChange(options) { 86 function onIllustrationChange(options) {
87 // options.target.setCoords(); 87 // options.target.setCoords();
88 // canvas.forEachObject(function(obj) { 88 // canvas.forEachObject(function(obj) {
89 // if (obj === options.target) return; 89 // if (obj === options.target) return;
90 // obj.setOpacity(options.target.intersectsWithObject(obj) ? 0.5 : 1); 90 // obj.setOpacity(options.target.intersectsWithObject(obj) ? 0.5 : 1);
91 // }); 91 // });
92 92
93 } 93 }
94 94
95 function onIllustrationOut() { 95 function onObjectOut() {
96 console.log('out object'); 96 delete currentObj;
97 $scope.designTextValue = '';
97 } 98 }
98 99
99 function undoCanvas() { 100 function undoCanvas() {
100 if (indexCurr <= 0) { 101 if (indexCurr <= 0) {
101 indexCurr = 0; 102 indexCurr = 0;
102 return; 103 return;
103 } 104 }
104 105
105 if (refreshObj === true) { 106 if (refreshObj === true) {
106 indexCurr--; 107 indexCurr--;
107 refreshObj = false; 108 refreshObj = false;
108 } 109 }
109 110
110 console.log('undo'); 111 console.log('undo');
111 112
112 indexCurr2 = indexCurr - 1; 113 indexCurr2 = indexCurr - 1;
113 currentObj = listObj[indexCurr2]; 114 currentObj = listObj[indexCurr2];
114 if (currentObj){ 115 if (currentObj){
115 currentObj.setOptions(JSON.parse(indexCurr[indexCurr2])); 116 currentObj.setOptions(JSON.parse(indexCurr[indexCurr2]));
116 } 117 }
117 118
118 indexCurr--; 119 indexCurr--;
119 currentObj.setCoords(); 120 currentObj.setCoords();
120 canvas.renderAll(); 121 canvas.renderAll();
121 actionObj = true; 122 actionObj = true;
122 } 123 }
123 124
124 function redoCanvas() { 125 function redoCanvas() {
125 actionObj = true; 126 actionObj = true;
126 if (indexCurr >= stateObj.length - 1) { 127 if (indexCurr >= stateObj.length - 1) {
127 return; 128 return;
128 } 129 }
129 130
130 console.log('redo'); 131 console.log('redo');
131 132
132 indexCurr2 = indexCurr + 1; 133 indexCurr2 = indexCurr + 1;
133 currentObj = listObj[indexCurr2]; 134 currentObj = listObj[indexCurr2];
134 currentObj.setOptions(JSON.parse(indexCurr[indexCurr2])); 135 currentObj.setOptions(JSON.parse(indexCurr[indexCurr2]));
135 136
136 indexCurr++; 137 indexCurr++;
137 currentObj.setCoords(); 138 currentObj.setCoords();
138 canvas.renderAll(); 139 canvas.renderAll();
139 } 140 }
140 141
141 $scope.currentObject = null; 142 function onObjectSelected(options) {
142 function onIllustrationSelected(options) { 143 var currentObj = options.target;
143 var object = options.target; 144 console.log(currentObj.text);
144 $scope.typeObject = object.type; 145 $scope.typeObject = currentObj.type;
145 switch ($scope.typeObject) { 146 switch ($scope.typeObject) {
146 case 'i-text' : 147 case 'i-text' :
147 $rootScope.isShowLeftPanel = 'text'; 148 $rootScope.isShowLeftPanel = 'text';
148 $('#input-design-text').focus(function() { 149 var text = currentObj.text;
149 150 if(text != '') {
150 }); 151 $scope.designText = text;
152 $scope.designTextValue = text;
153 }
151 break; 154 break;
152 155
153 case 'path-group' : 156 case 'path-group' :
154 $rootScope.isShowLeftPanel = 'illustration'; 157 $rootScope.isShowLeftPanel = 'illustration';
155 break; 158 break;
156 159
157 default : 160 default :
158 $rootScope.isShowLeftPanel = 'default'; 161 $rootScope.isShowLeftPanel = 'default';
159 break; 162 break;
160 } 163 }
161 $rootScope.safeApply(); 164 $rootScope.safeApply();
162 } 165 }
163 166
164 // Illustration process 167 // Illustration process
165 $scope.changeIllustrationCategory = function(currentIllustration){ 168 $scope.changeIllustrationCategory = function(currentIllustration){
166 $scope.currentIllustrationCate = $illustration.getList(currentIllustration); 169 $scope.currentIllustrationCate = $illustration.getList(currentIllustration);
167 //console.log($scope.currentIllustrationCate); 170 //console.log($scope.currentIllustrationCate);
168 }; 171 };
169 172
170 $scope.insertSvg = function(item){ 173 $scope.insertSvg = function(item){
171 fabric.loadSVGFromURL(item.path, function(objects, options) { 174 fabric.loadSVGFromURL(item.path, function(objects, options) {
172 var shape = fabric.util.groupSVGElements(objects, options); 175 var shape = fabric.util.groupSVGElements(objects, options);
173 // shape.setFill('green'); 176 // shape.setFill('green');
174 canvas.add(shape.scale(0.6)); 177 canvas.add(shape.scale(0.6));
175 shape.set({ left: 150, top: 200 }).setCoords(); 178 shape.set({ left: 150, top: 200 }).setCoords();
176 canvas.renderAll(); 179 canvas.renderAll();
177 canvas.setActiveObject(shape); 180 canvas.setActiveObject(shape);
178 }); 181 });
179 }; 182 };
180 183
181 // color pattern 184 // color pattern
182 $scope.listColorPatterns = [ 185 $scope.listColorPatterns = [
183 '#000000','#ffff00','#ff6600','#ff0000','#ff6262','#ffa19c','#ff9933','#c45d01','#5d2b03','#ffffcc', 186 '#000000','#ffff00','#ff6600','#ff0000','#ff6262','#ffa19c','#ff9933','#c45d01','#5d2b03','#ffffcc',
184 '#ffff99','#ffd500','#c0db50','#21a52a','#00663f','#abfcab','#36ffaa','#89eaea','#00938c','#005450', 187 '#ffff99','#ffd500','#c0db50','#21a52a','#00663f','#abfcab','#36ffaa','#89eaea','#00938c','#005450',
185 '#0badff','#006cff','#839aff','#0410a0','#ffb2ff','#f93fff','#6600ca','#ff6699','#999999','#666666', 188 '#0badff','#006cff','#839aff','#0410a0','#ffb2ff','#f93fff','#6600ca','#ff6699','#999999','#666666',
186 '#333333' 189 '#333333'
187 ]; 190 ];
188 //Font 191 //Font
189 $scope.listFontFamily = [ 192 $scope.listFontFamily = [
190 { 193 {
191 name : 'GN Aki iro Sesami Cookies', 194 name : 'GN Aki iro Sesami Cookies',
192 slug : 'gn_aki_iro_sesami_cookies', 195 slug : 'gn_aki_iro_sesami_cookies',
193 }, 196 },
194 { 197 {
195 name : 'GN-Fuyu-iro_Script_Bold', 198 name : 'GN-Fuyu-iro_Script_Bold',
196 slug : 'gn_fuyu_iro_script_bold' 199 slug : 'gn_fuyu_iro_script_bold'
197 }, 200 },
198 { 201 {
199 name : 'GN Killgothic U Kanana', 202 name : 'GN Killgothic U Kanana',
200 slug : 'gn_killgothic_u_kanana' 203 slug : 'gn_killgothic_u_kanana'
201 }, 204 },
202 { 205 {
203 name : 'GN-Kin-iro_Alphabet_Cookies', 206 name : 'GN-Kin-iro_Alphabet_Cookies',
204 slug : 'gn_kin_iro_alphabet_cookies' 207 slug : 'gn_kin_iro_alphabet_cookies'
205 208
206 }, 209 },
207 { 210 {
208 name : 'GN-Kin-iro_SansSerif', 211 name : 'GN-Kin-iro_SansSerif',
209 slug : 'gn_kin_iro_sansserif' 212 slug : 'gn_kin_iro_sansserif'
210 213
211 }, 214 },
212 { 215 {
213 name : 'GN-Koharuiro_Sunray', 216 name : 'GN-Koharuiro_Sunray',
214 slug : 'gn_koharuiro_sunray' 217 slug : 'gn_koharuiro_sunray'
215 218
216 }, 219 },
217 { 220 {
218 name : 'GN-Kyu-pin', 221 name : 'GN-Kyu-pin',
219 slug : 'gn_kyu_pin' 222 slug : 'gn_kyu_pin'
220 }, 223 },
221 { 224 {
222 name : 'gn_natsu_iro_schedule', 225 name : 'gn_natsu_iro_schedule',
223 slug : 'gn_natsu_iro_schedule' 226 slug : 'gn_natsu_iro_schedule'
224 227
225 }, 228 },
226 { 229 {
227 name : 'gnkana_kiniro_sansserif_l', 230 name : 'gnkana_kiniro_sansserif_l',
228 slug : 'gnkana_kiniro_sansserif_l' 231 slug : 'gnkana_kiniro_sansserif_l'
229 232
230 }, 233 },
231 { 234 {
232 name : 'gnkana_kiniro_sansserif_st', 235 name : 'gnkana_kiniro_sansserif_st',
233 slug : 'gnkana_kiniro_sansserif_st' 236 slug : 'gnkana_kiniro_sansserif_st'
234 }, 237 },
235 { 238 {
236 name : 'gnkana_kon_iro_nightfall', 239 name : 'gnkana_kon_iro_nightfall',
237 slug : 'gnkana_kon_iro_nightfall' 240 slug : 'gnkana_kon_iro_nightfall'
238 241
239 }, 242 },
240 { 243 {
241 name : 'ms_gothic', 244 name : 'ms_gothic',
242 slug : 'ms_gothic' 245 slug : 'ms_gothic'
243 246
244 }, 247 },
245 { 248 {
246 name : 'msmincho', 249 name : 'msmincho',
247 slug : 'msmincho' 250 slug : 'msmincho'
248 }, 251 },
249 { 252 {
250 name : 'ufonts_com_ms_pgothic', 253 name : 'ufonts_com_ms_pgothic',
251 slug : 'ufonts_com_ms_pgothic' 254 slug : 'ufonts_com_ms_pgothic'
252 } 255 }
253 ]; 256 ];
254 257
255 $scope.changeColorPattern = function(color){ 258 $scope.changeColorPattern = function(color){
256 if (canvas.getActiveObject()){ 259 if (canvas.getActiveObject()){
257 canvas.getActiveObject().set("fill", color); 260 canvas.getActiveObject().set("fill", color);
258 canvas.renderAll(); 261 canvas.renderAll();
259 } 262 }
260 }; 263 };
261 264
262 // layer process 265 // layer process
263 $scope.layerProcess = function(mode){ 266 $scope.layerProcess = function(mode) {
264 var activeObject = canvas.getActiveObject() 267 // console.log('layerProcess');
268 var activeObject = canvas.getActiveObject();
269
270 console.log(activeObject);
271
265 if (activeObject){ 272 if (activeObject){
266 switch (mode) { 273 switch (mode) {
267 case 1: 274 case 1:
275 // canvas.bringForward(activeObject);
268 activeObject.bringForward(); 276 activeObject.bringForward();
269 break; 277 break;
270 case 2: 278 case 2:
279 // canvas.sendBackwards(activeObject);
271 activeObject.sendBackwards(); 280 activeObject.sendBackwards();
272 break; 281 break;
273 case 3: 282 case 3:
283 // canvas.bringToFront(activeObject);
274 activeObject.bringToFront(); 284 activeObject.bringToFront();
275 break; 285 break;
276 case 4: 286 case 4:
287 // canvas.sendToBack(activeObject);
277 activeObject.sendToBack(); 288 activeObject.sendToBack();
278 break; 289 break;
279 } 290 }
280 canvas.renderAll(); 291 canvas.renderAll();
281 } 292 }
282 }; 293 };
283
284 294
285 295 $scope.focusInputText = function(text) {
286 $scope.focusInputText = function() { 296 currentObj = canvas.getActiveObject();
287 if($scope.typeObject != 'i-text') 297 if(typeof currentObj == 'undefined' || currentObj == null) {
288 $scope.iText = new fabric.IText('', { 298 $scope.iText = new fabric.IText('', {
289 left: 150, 299 left: 150,
290 top: 200, 300 top: 200,
291 fontFamily: 'Arial', 301 fontFamily: 'Arial',
292 fontWeight: 'normal', 302 fontWeight: 'normal',
303 textAlign: 'center',
293 fontSize: 28, 304 fontSize: 28,
294 fill: 'black' 305 fill: 'black'
295 }); 306 });
307 } else {
308 if(currentObj.type != 'i-text') {
309 $scope.iText = new fabric.IText('', {
310 left: 150,
311 top: 200,
312 fontFamily: 'Arial',
313 fontWeight: 'normal',
314 textAlign: 'center',
315 fontSize: 28,
316 fill: 'black'
317 });
318 } else{
319 $scope.iText = currentObj;
320 }
321 }
296 }; 322 };
297 323
298 //Design text 324 //Design text
299 $scope.inputText = function(e) { 325 $scope.inputText = function(e) {
300 var iText = $scope.iText; 326 if(typeof $scope.iText != "undefined") {
301 if(e != '') { 327 var iText = $scope.iText;
302 iText.text = e; 328 iText.text = e;
303 iText.set().setCoords();
304 canvas.add(iText); 329 canvas.add(iText);
305 canvas.renderAll(); 330 canvas.renderAll();
306 canvas.setActiveObject(iText); 331 canvas.setActiveObject(iText);
307 } 332 }
308 }; 333 };
309 $scope.setFontFamily = function(font) { 334 $scope.setFontFamily = function(font) {
310 if(canvas.getActiveObject()) { 335 if(canvas.getActiveObject()) {
311 var currentObject = canvas.getActiveObject(); 336 var currentObj = canvas.getActiveObject();
312 if(currentObject.type == 'i-text') { 337 if(currentObj.type == 'i-text') {
313 currentObject.set('fontFamily', font); 338 currentObj.set('fontFamily', font);
314 canvas.renderAll(); 339 canvas.renderAll();
315 canvas.setActiveObject(currentObject); 340 canvas.setActiveObject(currentObj);
316 } 341 }
317 342
318 } 343 }
319 }; 344 };
320 //Set letter spacing text 345 //Set letter spacing text
321 var spacingNum = 0;
322 $scope.setLetterSpacingText = function(e) { 346 $scope.setLetterSpacingText = function(e) {
323 if(canvas.getActiveObject()) { 347 if(canvas.getActiveObject()) {
324 var currentObject = canvas.getActiveObject(); 348 var currentObj = canvas.getActiveObject();
325 if(currentObject.type == 'i-text') { 349 if(currentObj.type == 'i-text') {
326 if(e == 'plus') 350 if(e == 'plus')
327 spacingNum = spacingNum + 30; 351 spacingNum = spacingNum + 30;
328 else if (spacingNum>=30){ 352 else if (spacingNum >= 30){
329 spacingNum = spacingNum - 30; 353 spacingNum = spacingNum - 30;
330 } 354 }
331 currentObject.set('charSpacing', spacingNum); 355 currentObj.set('charSpacing', spacingNum);
332 canvas.renderAll(); 356 canvas.renderAll();
333 canvas.setActiveObject(currentObject); 357 canvas.setActiveObject(currentObj);
334 } 358 }
335
336 } 359 }
337 } 360 };
361 //Traslation text
362 $scope.rotateText = function(style) {
363 if(canvas.getActiveObject()) {
364 var currentObj = canvas.getActiveObject();
365 if(currentObj.type == 'i-text') {
366 currentObj.set('rotate', Math.PI / 4);
367 canvas.renderAll();
368 canvas.setActiveObject(currentObj);
app/views/design_part/text.html
Diff comments   View file @ 92271fd
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()" ng-change="inputText(design_text)" ng-model="design_text"> 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">
9 </div> 9 </div>
10 <div> 10 <div>
11 <ul class="font-family-box"> 11 <ul class="font-family-box">
12 <li ng-repeat="item in listFontFamily" ng-click="setFontFamily(item.slug)" ng-style="{'font-family' : item.slug}">{{ item.name }}</li> 12 <li ng-repeat="item in listFontFamily" ng-click="setFontFamily(item.slug)" ng-style="{'font-family' : item.slug}">{{ item.name }}</li>
13 </ul> 13 </ul>
14 </div> 14 </div>
15 <div> 15 <div>
16 <div>文字を変形する</div> 16 <div ng-click="rotateText('1')">文字を変形する</div>
17 </div> 17 </div>
18 <div class="clearfix spacing-letter "> 18 <div class="clearfix spacing-letter ">
19 <div class="pull-left text-label"> 19 <div class="pull-left text-label">
20 文字間隔 : 20 文字間隔 :
21 </div> 21 </div>
22 <div class="pull-right"> 22 <div class="pull-right">
23 <div class="box clearfix"> 23 <div class="box clearfix">
24 <div class="item item-plus" ng-click="setLetterSpacingText('plus')"> 24 <div class="item item-plus" ng-click="setLetterSpacingText('plus')">
25 <i class="fa fa-plus-square-o" aria-hidden="true"></i> 25 <i class="fa fa-plus-square-o" aria-hidden="true"></i>
26 </div> 26 </div>
27 <div class="item item-text"> 27 <div class="item item-text">
28 リセット 28 リセット
29 </div> 29 </div>
30 <div class="item item-minus" ng-click="setLetterSpacingText('minus')"> 30 <div class="item item-minus" ng-click="setLetterSpacingText('minus')">
31 <i class="fa fa-minus-square-o" aria-hidden="true"></i> 31 <i class="fa fa-minus-square-o" aria-hidden="true"></i>
32 </div> 32 </div>
33 </div> 33 </div>
34 </div> 34 </div>
35 </div> 35 </div>
36 </div> 36 </div>
37 </li> 37 </li>
38 <li> 38 <li>
39 <div class="title"> 39 <div class="title">
40 <!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>--> 40 <!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>-->
41 カラー変更 41 カラー変更
42 <!--<div class="pull-right">元の色に戻す</div>--> 42 <!--<div class="pull-right">元の色に戻す</div>-->
43 </div> 43 </div>
44 <div class="content clearfix"> 44 <div class="content clearfix">
45 <div class="color-patterns"> 45 <div class="color-patterns">
46 <div class="color-pattern-item" ng-repeat="color in listColorPatterns track by $index" ng-click="changeColorPattern(color)" ng-style="{'background-color': color}"> 46 <div class="color-pattern-item" ng-repeat="color in listColorPatterns track by $index" ng-click="changeColorPattern(color)" ng-style="{'background-color': color}">
47 </div> 47 </div>
48 <div class="clearfix"></div> 48 <div class="clearfix"></div>
49 </div> 49 </div>
50 </div> 50 </div>
51 </li> 51 </li>
52 52
53 <li> 53 <li>
54 <div class="title"> 54 <div class="title">
55 <!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>--> 55 <!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>-->
56 重ね順変更 56 重ね順変更
57 </div> 57 </div>
58 <div class="content clearfix"> 58 <div class="content clearfix">
59 <div class="col-xs-3 layer-item" ng-click="layerProcess(1)"> 59 <div class="col-xs-3 layer-item" ng-click="layerProcess(1)">
60 <img src="images/layer-icon-1.png"/> 60 <img src="images/layer-icon-1.png"/>
61 <div>前面へ</div> 61 <div>前面へ</div>
62 </div> 62 </div>
63 <div class="col-xs-3 layer-item" ng-click="layerProcess(2)"> 63 <div class="col-xs-3 layer-item" ng-click="layerProcess(2)">
64 <img src="images/layer-icon-2.png"/> 64 <img src="images/layer-icon-2.png"/>
65 <div>背面へ</div> 65 <div>背面へ</div>
66 </div> 66 </div>
67 <div class="col-xs-3 layer-item" ng-click="layerProcess(3)"> 67 <div class="col-xs-3 layer-item" ng-click="layerProcess(3)">
68 <img src="images/layer-icon-3.png"/> 68 <img src="images/layer-icon-3.png"/>
69 <div>最前面へ</div> 69 <div>最前面へ</div>
70 </div> 70 </div>
71 <div class="col-xs-3 layer-item" ng-click="layerProcess(4)"> 71 <div class="col-xs-3 layer-item" ng-click="layerProcess(4)">
72 <img src="images/layer-icon-4.png"/> 72 <img src="images/layer-icon-4.png"/>
73 <div>最前面へ</div> 73 <div>最前面へ</div>
74 </div> 74 </div>
75 </div> 75 </div>
76 </li> 76 </li>
77 77