add event

DANG
1 parent f2c2d23dd7
Showing 2 changed files with 76 additions and 42 deletions Side-by-side Diff
app/scripts/controllers/tshirtdesign.js
app/views/design_part/text.html
@@ -6,17 +6,16 @@
 		fabric.Object.prototype.transparentCorners = false;
  
 		canvas.on('after:render', function() {
+			console.log('after render');
 		});
 		canvas.on({
-			'object:added': onIllustrationAdded,
-			'object:moving': onIllustrationChange,
-			'object:scaling': onIllustrationChange,
-			'object:rotating': onIllustrationChange,
-			'object:selected': onIllustrationSelected,
-			'object:modified': onIllustrationModifield,
-			'selected:deselected' : onIllustrationOut,
-			//'selected:out'     : onIllustrationOut,
-			//'mouse:up' : onIllustrationOut,
+			'object:added'      : onIllustrationAdded,
+			'object:moving'     : onIllustrationChange,
+			'object:scaling'    : onIllustrationChange,
+			'object:rotating'   : onIllustrationChange,
+			'object:selected'   : onObjectSelected,
+			'object:modified'   : onIllustrationModifield,
+			'selection:cleared' : onObjectOut,
 		});
  
 		var currentObj;
@@ -26,6 +25,7 @@
 		var indexCurr2 = 0;
 		var actionObj = false;
 		var refreshObj = true;
+		var spacingNum = 0;
  
 		function onIllustrationAdded(options){
 			var object = options.target;
@@ -92,8 +92,9 @@
  
 		}
  
-		function onIllustrationOut() {
-			console.log('out object');
+		function onObjectOut() {
+			delete currentObj;
+			$scope.designTextValue = '';
 		}
  
 		function undoCanvas() {
  
@@ -137,17 +138,19 @@
 		    currentObj.setCoords();
 		    canvas.renderAll();
 		}
-		
-		$scope.currentObject = null;
-		function onIllustrationSelected(options) {
-			var object = options.target;
-			$scope.typeObject = object.type;
+
+		function onObjectSelected(options) {
+			var currentObj = options.target;
+			console.log(currentObj.text);
+			$scope.typeObject = currentObj.type;
 			switch ($scope.typeObject) {
 				case 'i-text' :
 					$rootScope.isShowLeftPanel = 'text';
-					$('#input-design-text').focus(function() {
-
-					});
+					var text = currentObj.text;
+					if(text != '') {
+						$scope.designText = text;
+						$scope.designTextValue = text;
+					}
 					break;
  
 				case 'path-group' :
  
  
  
  
  
  
  
  
  
  
@@ -260,47 +263,69 @@
 		};
  
 		// layer process
-		$scope.layerProcess = function(mode){
-			var activeObject = canvas.getActiveObject()
+		$scope.layerProcess = function(mode) {
+			// console.log('layerProcess');
+			var activeObject = canvas.getActiveObject();
+
+			console.log(activeObject);
+
 			if (activeObject){
 				switch (mode) {
 					case 1:
+						// canvas.bringForward(activeObject);
 						activeObject.bringForward();
 						break;
 					case 2:
+						// canvas.sendBackwards(activeObject);
 						activeObject.sendBackwards();
 						break;
 					case 3:
+						// canvas.bringToFront(activeObject);
 						activeObject.bringToFront();
 						break;
 					case 4:
+						// canvas.sendToBack(activeObject);
 						activeObject.sendToBack();
 						break;
 				}
     	        canvas.renderAll();
 			}
 		};
-		
  
-
-		$scope.focusInputText = function() {
-			if($scope.typeObject != 'i-text')
+		$scope.focusInputText = function(text) {
+			currentObj = canvas.getActiveObject();
+			if(typeof currentObj == 'undefined' || currentObj == null) {
 				$scope.iText = new fabric.IText('', {
 					left: 150,
 					top: 200,
 					fontFamily: 'Arial',
 					fontWeight: 'normal',
+					textAlign:  'center',
 					fontSize: 28,
 					fill: 'black'
 				});
+			} else {
+				if(currentObj.type != 'i-text') {
+					$scope.iText = new fabric.IText('', {
+						left: 150,
+						top: 200,
+						fontFamily: 'Arial',
+						fontWeight: 'normal',
+						textAlign:  'center',
+						fontSize: 28,
+						fill: 'black'
+					});
+				} else{
+					$scope.iText = currentObj;
+				}
+			}
 		};
  
 		//Design text
 		$scope.inputText = function(e) {
-			var iText = $scope.iText;
-			if(e != '') {
+			if(typeof $scope.iText != "undefined") {
+				var iText = $scope.iText;
 				iText.text = e;
-				iText.set().setCoords();
 				canvas.add(iText);
 				canvas.renderAll();
 				canvas.setActiveObject(iText);
  
  
  
  
  
  
  
  
@@ -308,33 +333,42 @@
 		};
 		$scope.setFontFamily = function(font) {
 			if(canvas.getActiveObject()) {
-				var currentObject = canvas.getActiveObject();
-				if(currentObject.type == 'i-text') {
-					currentObject.set('fontFamily', font);
+				var currentObj = canvas.getActiveObject();
+				if(currentObj.type == 'i-text') {
+					currentObj.set('fontFamily', font);
 					canvas.renderAll();
-					canvas.setActiveObject(currentObject);
+					canvas.setActiveObject(currentObj);
 				}
  
 			}
 		};
 		//Set letter spacing text
-		var spacingNum = 0;
 		$scope.setLetterSpacingText = function(e) {
 			if(canvas.getActiveObject()) {
-				var currentObject = canvas.getActiveObject();
-				if(currentObject.type == 'i-text') {
+				var currentObj = canvas.getActiveObject();
+				if(currentObj.type == 'i-text') {
 					if(e == 'plus')
 						spacingNum = spacingNum + 30;
-					else if (spacingNum>=30){
+					else if (spacingNum >= 30){
 						spacingNum = spacingNum - 30;
 					}
-					currentObject.set('charSpacing', spacingNum);
+					currentObj.set('charSpacing', spacingNum);
 					canvas.renderAll();
-					canvas.setActiveObject(currentObject);
+					canvas.setActiveObject(currentObj);
 				}
-
 			}
-		}
+		};
+		//Traslation text
+		$scope.rotateText =  function(style) {
+			if(canvas.getActiveObject()) {
+				var currentObj = canvas.getActiveObject();
+				if(currentObj.type == 'i-text') {
+					currentObj.set('rotate', Math.PI / 4);
+					canvas.renderAll();
+					canvas.setActiveObject(currentObj);
+				}
+			}
+		};
 	});
 });
@@ -5,7 +5,7 @@
     </div>
     <div class="content clearfix">
         <div>
-            <input type="text" class="form-control" placeholder="ここに入力してください。" id="input-design-text" ng-focus="focusInputText()" ng-change="inputText(design_text)" ng-model="design_text">
+            <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">
         </div>
         <div>
             <ul class="font-family-box">
@@ -13,7 +13,7 @@
             </ul>
         </div>
         <div>
-            <div>文字を変形する</div>
+            <div ng-click="rotateText('1')">文字を変形する</div>
         </div>
         <div class="clearfix spacing-letter ">
             <div class="pull-left text-label">
...	...	@@ -6,17 +6,16 @@
6	6	fabric.Object.prototype.transparentCorners = false;
7	7
8	8	canvas.on('after:render', function() {
	9	+ console.log('after render');
9	10	});
10	11	canvas.on({
11		- 'object:added': onIllustrationAdded,
12		- 'object:moving': onIllustrationChange,
13		- 'object:scaling': onIllustrationChange,
14		- 'object:rotating': onIllustrationChange,
15		- 'object:selected': onIllustrationSelected,
16		- 'object:modified': onIllustrationModifield,
17		- 'selected:deselected' : onIllustrationOut,
18		- //'selected:out' : onIllustrationOut,
19		- //'mouse:up' : onIllustrationOut,
	12	+ 'object:added' : onIllustrationAdded,
	13	+ 'object:moving' : onIllustrationChange,
	14	+ 'object:scaling' : onIllustrationChange,
	15	+ 'object:rotating' : onIllustrationChange,
	16	+ 'object:selected' : onObjectSelected,
	17	+ 'object:modified' : onIllustrationModifield,
	18	+ 'selection:cleared' : onObjectOut,
20	19	});
21	20
22	21	var currentObj;
...	...	@@ -26,6 +25,7 @@
26	25	var indexCurr2 = 0;
27	26	var actionObj = false;
28	27	var refreshObj = true;
	28	+ var spacingNum = 0;
29	29
30	30	function onIllustrationAdded(options){
31	31	var object = options.target;
...	...	@@ -92,8 +92,9 @@
92	92
93	93	}
94	94
95		- function onIllustrationOut() {
96		- console.log('out object');
	95	+ function onObjectOut() {
	96	+ delete currentObj;
	97	+ $scope.designTextValue = '';
97	98	}
98	99
99	100	function undoCanvas() {
100	101
...	...	@@ -137,17 +138,19 @@
137	138	currentObj.setCoords();
138	139	canvas.renderAll();
139	140	}
140		-
141		- $scope.currentObject = null;
142		- function onIllustrationSelected(options) {
143		- var object = options.target;
144		- $scope.typeObject = object.type;
	141	+
	142	+ function onObjectSelected(options) {
	143	+ var currentObj = options.target;
	144	+ console.log(currentObj.text);
	145	+ $scope.typeObject = currentObj.type;
145	146	switch ($scope.typeObject) {
146	147	case 'i-text' :
147	148	$rootScope.isShowLeftPanel = 'text';
148		- $('#input-design-text').focus(function() {
149		-
150		- });
	149	+ var text = currentObj.text;
	150	+ if(text != '') {
	151	+ $scope.designText = text;
	152	+ $scope.designTextValue = text;
	153	+ }
151	154	break;
152	155
153	156	case 'path-group' :
154	157
155	158
156	159
157	160
158	161
159	162
160	163
161	164
162	165
163	166
...	...	@@ -260,47 +263,69 @@
260	263	};
261	264
262	265	// layer process
263		- $scope.layerProcess = function(mode){
264		- var activeObject = canvas.getActiveObject()
	266	+ $scope.layerProcess = function(mode) {
	267	+ // console.log('layerProcess');
	268	+ var activeObject = canvas.getActiveObject();
	269	+
	270	+ console.log(activeObject);
	271	+
265	272	if (activeObject){
266	273	switch (mode) {
267	274	case 1:
	275	+ // canvas.bringForward(activeObject);
268	276	activeObject.bringForward();
269	277	break;
270	278	case 2:
	279	+ // canvas.sendBackwards(activeObject);
271	280	activeObject.sendBackwards();
272	281	break;
273	282	case 3:
	283	+ // canvas.bringToFront(activeObject);
274	284	activeObject.bringToFront();
275	285	break;
276	286	case 4:
	287	+ // canvas.sendToBack(activeObject);
277	288	activeObject.sendToBack();
278	289	break;
279	290	}
280	291	canvas.renderAll();
281	292	}
282	293	};
283		-
284	294
285		-
286		- $scope.focusInputText = function() {
287		- if($scope.typeObject != 'i-text')
	295	+ $scope.focusInputText = function(text) {
	296	+ currentObj = canvas.getActiveObject();
	297	+ if(typeof currentObj == 'undefined' \|\| currentObj == null) {
288	298	$scope.iText = new fabric.IText('', {
289	299	left: 150,
290	300	top: 200,
291	301	fontFamily: 'Arial',
292	302	fontWeight: 'normal',
	303	+ textAlign: 'center',
293	304	fontSize: 28,
294	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	324	//Design text
299	325	$scope.inputText = function(e) {
300		- var iText = $scope.iText;
301		- if(e != '') {
	326	+ if(typeof $scope.iText != "undefined") {
	327	+ var iText = $scope.iText;
302	328	iText.text = e;
303		- iText.set().setCoords();
304	329	canvas.add(iText);
305	330	canvas.renderAll();
306	331	canvas.setActiveObject(iText);
307	332
308	333
309	334
310	335
311	336
312	337
313	338
314	339
...	...	@@ -308,33 +333,42 @@
308	333	};
309	334	$scope.setFontFamily = function(font) {
310	335	if(canvas.getActiveObject()) {
311		- var currentObject = canvas.getActiveObject();
312		- if(currentObject.type == 'i-text') {
313		- currentObject.set('fontFamily', font);
	336	+ var currentObj = canvas.getActiveObject();
	337	+ if(currentObj.type == 'i-text') {
	338	+ currentObj.set('fontFamily', font);
314	339	canvas.renderAll();
315		- canvas.setActiveObject(currentObject);
	340	+ canvas.setActiveObject(currentObj);
316	341	}
317	342
318	343	}
319	344	};
320	345	//Set letter spacing text
321		- var spacingNum = 0;
322	346	$scope.setLetterSpacingText = function(e) {
323	347	if(canvas.getActiveObject()) {
324		- var currentObject = canvas.getActiveObject();
325		- if(currentObject.type == 'i-text') {
	348	+ var currentObj = canvas.getActiveObject();
	349	+ if(currentObj.type == 'i-text') {
326	350	if(e == 'plus')
327	351	spacingNum = spacingNum + 30;
328		- else if (spacingNum>=30){
	352	+ else if (spacingNum >= 30){
329	353	spacingNum = spacingNum - 30;
330	354	}
331		- currentObject.set('charSpacing', spacingNum);
	355	+ currentObj.set('charSpacing', spacingNum);
332	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);
	369	+ }
	370	+ }
	371	+ };
338	372	});
339	373	});
...	...	@@ -5,7 +5,7 @@
5	5	</div>
6	6	<div class="content clearfix">
7	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	9	</div>
10	10	<div>
11	11	<ul class="font-family-box">
...	...	@@ -13,7 +13,7 @@
13	13	</ul>
14	14	</div>
15	15	<div>
16		- <div>文字を変形する</div>
	16	+ <div ng-click="rotateText('1')">文字を変形する</div>
17	17	</div>
18	18	<div class="clearfix spacing-letter ">
19	19	<div class="pull-left text-label">