fix clear color SVG

TRUONG
1 parent b3800963f7
Showing 2 changed files with 71 additions and 21 deletions Side-by-side Diff
app/index.html
app/scripts/controllers/tshirtdesign.js
@@ -47,7 +47,7 @@
     <script src="bower_components/json3/lib/json3.min.js"></script>
     <![endif]-->
     <script type="text/javascript">
-        var VERSION = '28-11_01';
+        var VERSION = '28-11_02';
         var require = {
           urlArgs: "ver="+VERSION,
         };
@@ -6,6 +6,7 @@
 		var diffX = 40, diffY = 40;
 		var _coorTrash_x = 567;
 		var _coorTrash_y = 545;
+		var ObjectOrd=0;
 		//Set width and height canvas
 		function setSizeCanvas() {
 			if(typeof $rootScope.placeTshirt.place == 'undefined')
@@ -169,7 +170,7 @@
 		    }
 		    object.saveState();
  
-		    console.log(object.originalState);
+		    // console.log(object.originalState);
 		    stateObj[indexCurr] = JSON.stringify(object.originalState);
 		    listObj[indexCurr] = object;
 		    indexCurr++;
  
@@ -188,16 +189,20 @@
 			}
  
 			//
-			var objOffset = canvas.getActiveObject().getBoundingRect();
-			var cH = canvas.height, cW = canvas.width, H0 = 20, W0 = 20;
-			//console.log(objOffset,canvas.height,canvas.width);
-			if (objOffset.left<W0-objOffset.width || objOffset.left>cW-W0 || objOffset.top<H0-objOffset.height || objOffset.top>cH-H0){
-				if (confirm('削除してもよろしいですか')){
-					canvas.getActiveObject().remove();
-				}else{
-					undoCanvas();
-					return;
+			try{
+				var objOffset = canvas.getActiveObject().getBoundingRect();
+				var cH = canvas.height, cW = canvas.width, H0 = 20, W0 = 20;
+				//console.log(objOffset,canvas.height,canvas.width);
+				if (objOffset.left<W0-objOffset.width || objOffset.left>cW-W0 || objOffset.top<H0-objOffset.height || objOffset.top>cH-H0){
+					if (confirm('削除してもよろしいですか')){
+						canvas.getActiveObject().remove();
+					}else{
+						undoCanvas();
+						return;
+					}
 				}
+			}catch (e){
+				//
 			}
  
 			var object = options.target;
  
@@ -300,12 +305,19 @@
 		$scope.canvasClearAll = function(){
 			if (confirm('配置されたすべての文字や画像を消去します')){
 				canvas.clear();
+				ObjectOrd = 0;
 			}
 		}
  
 		function onObjectSelected(options) {
 			var currentObj = options.target;
-
+			if (typeof currentObj.toOrd() != 'number'){
+				var currentObjOrd = ++ObjectOrd;
+				currentObj.toOrd = function(){
+					return currentObjOrd;
+				}
+			}
+			console.log(currentObj.toOrd());
 			$scope.typeObject = currentObj.type;
 			switch ($scope.typeObject) {
 				case 'i-text' :
  
@@ -337,9 +349,15 @@
 			$scope.currentIllustrationCate = $illustration.getList(currentIllustration);
 		};
  
+		var arrSvgOriginal = [];
 		$scope.insertSvg = function(item){
 			fabric.loadSVGFromURL(item.path, function(objects, options) {
 				var shape = fabric.util.groupSVGElements(objects, options);
+				var currentObjOrd = ++ObjectOrd;
+				arrSvgOriginal[currentObjOrd] = item.path;
+				shape.toOrd = function(){
+					return currentObjOrd;
+				}
 				canvas.add(shape.scale(0.6));
 				shape.set({ left: 150, top: 100 }).setCoords();
 				canvas.renderAll();
  
@@ -359,16 +377,41 @@
 			var obj = canvas.getActiveObject();
 			if (!color){
 				color = 'none';
+				// console.log(obj.toOrd(), arrSvgOriginal[obj.toOrd()]);
+				if (typeof obj.toOrd() == 'number' && typeof arrSvgOriginal[obj.toOrd()] != 'undefined'){
+					var currentObjOrd = obj.toOrd();
+					fabric.loadSVGFromURL(arrSvgOriginal[obj.toOrd()], function(objects, options) {
+						var shape = fabric.util.groupSVGElements(objects, options);
+						shape.toOrd = function(){
+							return currentObjOrd;
+						}
+						obj.setCoords();
+						shape.setScaleX(obj.getScaleX());
+						shape.setScaleY(obj.getScaleY());
+						shape.set('top',obj.getTop());
+						shape.set('left',obj.getLeft());
+						shape.set('angle',obj.getAngle());
+						// shape.set('height',obj.getHeight());
+						// shape.set('width',obj.getWidth());
+						canvas.add(shape);
+						shape.setCoords();
+						// shape.set({ left: 150, top: 100 }).setCoords();
+						canvas.renderAll();
+						canvas.setActiveObject(shape);
+						obj.remove();
+					});
+				}
+			}else{
+				if (obj instanceof fabric.PathGroup) {
+					obj.getObjects().forEach(function(o) {
+						o.fill = color;
+					});
+				}
+				else {
+					obj.fill = color;
+				}
+				canvas.renderAll();
 			}
-			if (obj instanceof fabric.PathGroup) {
-			  obj.getObjects().forEach(function(o) {
-			  	o.fill = color;
-			  });
-			}
-			else {
-			  obj.fill = color;
-			}
-			canvas.renderAll();
 		};
  
 		//Font
@@ -685,6 +728,13 @@
 			}
 			$('#tshirt-design-saved').modal('hide');
 			canvas.loadFromJSON(item.data,canvas.renderAll.bind(canvas));
+			ObjectOrd = 0;
+			canvas.forEachObject(function(obj){
+				var currentObjOrd = ++ObjectOrd;
+			    obj.toOrd = function(){
+			    	return currentObjOrd;
+			    }
+			});
 		}
  
 		$scope.deleteFavorite = function(idx){
...	...	@@ -47,7 +47,7 @@
47	47	<script src="bower_components/json3/lib/json3.min.js"></script>
48	48	<![endif]-->
49	49	<script type="text/javascript">
50		- var VERSION = '28-11_01';
	50	+ var VERSION = '28-11_02';
51	51	var require = {
52	52	urlArgs: "ver="+VERSION,
53	53	};
...	...	@@ -6,6 +6,7 @@
6	6	var diffX = 40, diffY = 40;
7	7	var _coorTrash_x = 567;
8	8	var _coorTrash_y = 545;
	9	+ var ObjectOrd=0;
9	10	//Set width and height canvas
10	11	function setSizeCanvas() {
11	12	if(typeof $rootScope.placeTshirt.place == 'undefined')
...	...	@@ -169,7 +170,7 @@
169	170	}
170	171	object.saveState();
171	172
172		- console.log(object.originalState);
	173	+ // console.log(object.originalState);
173	174	stateObj[indexCurr] = JSON.stringify(object.originalState);
174	175	listObj[indexCurr] = object;
175	176	indexCurr++;
176	177
...	...	@@ -188,16 +189,20 @@
188	189	}
189	190
190	191	//
191		- var objOffset = canvas.getActiveObject().getBoundingRect();
192		- var cH = canvas.height, cW = canvas.width, H0 = 20, W0 = 20;
193		- //console.log(objOffset,canvas.height,canvas.width);
194		- if (objOffset.left<W0-objOffset.width \|\| objOffset.left>cW-W0 \|\| objOffset.top<H0-objOffset.height \|\| objOffset.top>cH-H0){
195		- if (confirm('削除してもよろしいですか')){
196		- canvas.getActiveObject().remove();
197		- }else{
198		- undoCanvas();
199		- return;
	192	+ try{
	193	+ var objOffset = canvas.getActiveObject().getBoundingRect();
	194	+ var cH = canvas.height, cW = canvas.width, H0 = 20, W0 = 20;
	195	+ //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 (confirm('削除してもよろしいですか')){
	198	+ canvas.getActiveObject().remove();
	199	+ }else{
	200	+ undoCanvas();
	201	+ return;
	202	+ }
200	203	}
	204	+ }catch (e){
	205	+ //
201	206	}
202	207
203	208	var object = options.target;
204	209
...	...	@@ -300,12 +305,19 @@
300	305	$scope.canvasClearAll = function(){
301	306	if (confirm('配置されたすべての文字や画像を消去します')){
302	307	canvas.clear();
	308	+ ObjectOrd = 0;
303	309	}
304	310	}
305	311
306	312	function onObjectSelected(options) {
307	313	var currentObj = options.target;
308		-
	314	+ if (typeof currentObj.toOrd() != 'number'){
	315	+ var currentObjOrd = ++ObjectOrd;
	316	+ currentObj.toOrd = function(){
	317	+ return currentObjOrd;
	318	+ }
	319	+ }
	320	+ console.log(currentObj.toOrd());
309	321	$scope.typeObject = currentObj.type;
310	322	switch ($scope.typeObject) {
311	323	case 'i-text' :
312	324
...	...	@@ -337,9 +349,15 @@
337	349	$scope.currentIllustrationCate = $illustration.getList(currentIllustration);
338	350	};
339	351
	352	+ var arrSvgOriginal = [];
340	353	$scope.insertSvg = function(item){
341	354	fabric.loadSVGFromURL(item.path, function(objects, options) {
342	355	var shape = fabric.util.groupSVGElements(objects, options);
	356	+ var currentObjOrd = ++ObjectOrd;
	357	+ arrSvgOriginal[currentObjOrd] = item.path;
	358	+ shape.toOrd = function(){
	359	+ return currentObjOrd;
	360	+ }
343	361	canvas.add(shape.scale(0.6));
344	362	shape.set({ left: 150, top: 100 }).setCoords();
345	363	canvas.renderAll();
346	364
...	...	@@ -359,16 +377,41 @@
359	377	var obj = canvas.getActiveObject();
360	378	if (!color){
361	379	color = 'none';
	380	+ // console.log(obj.toOrd(), arrSvgOriginal[obj.toOrd()]);
	381	+ if (typeof obj.toOrd() == 'number' && typeof arrSvgOriginal[obj.toOrd()] != 'undefined'){
	382	+ var currentObjOrd = obj.toOrd();
	383	+ fabric.loadSVGFromURL(arrSvgOriginal[obj.toOrd()], function(objects, options) {
	384	+ var shape = fabric.util.groupSVGElements(objects, options);
	385	+ shape.toOrd = function(){
	386	+ return currentObjOrd;
	387	+ }
	388	+ obj.setCoords();
	389	+ shape.setScaleX(obj.getScaleX());
	390	+ shape.setScaleY(obj.getScaleY());
	391	+ shape.set('top',obj.getTop());
	392	+ shape.set('left',obj.getLeft());
	393	+ shape.set('angle',obj.getAngle());
	394	+ // shape.set('height',obj.getHeight());
	395	+ // shape.set('width',obj.getWidth());
	396	+ canvas.add(shape);
	397	+ shape.setCoords();
	398	+ // shape.set({ left: 150, top: 100 }).setCoords();
	399	+ canvas.renderAll();
	400	+ canvas.setActiveObject(shape);
	401	+ obj.remove();
	402	+ });
	403	+ }
	404	+ }else{
	405	+ if (obj instanceof fabric.PathGroup) {
	406	+ obj.getObjects().forEach(function(o) {
	407	+ o.fill = color;
	408	+ });
	409	+ }
	410	+ else {
	411	+ obj.fill = color;
	412	+ }
	413	+ canvas.renderAll();
362	414	}
363		- if (obj instanceof fabric.PathGroup) {
364		- obj.getObjects().forEach(function(o) {
365		- o.fill = color;
366		- });
367		- }
368		- else {
369		- obj.fill = color;
370		- }
371		- canvas.renderAll();
372	415	};
373	416
374	417	//Font
...	...	@@ -685,6 +728,13 @@
685	728	}
686	729	$('#tshirt-design-saved').modal('hide');
687	730	canvas.loadFromJSON(item.data,canvas.renderAll.bind(canvas));
	731	+ ObjectOrd = 0;
	732	+ canvas.forEachObject(function(obj){
	733	+ var currentObjOrd = ++ObjectOrd;
	734	+ obj.toOrd = function(){
	735	+ return currentObjOrd;
	736	+ }
	737	+ });
688	738	}
689	739
690	740	$scope.deleteFavorite = function(idx){