T-shirt_designer/www/assets/js/desain_2.js

/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */

// Wait for the deviceready event before using any of Cordova's device APIs.
// See https://cordova.apache.org/docs/en/latest/cordova/events/events.html#deviceready
document.addEventListener('deviceready', onDeviceReady, false);

function onDeviceReady() {
  // screen.orientation.lock('potrait');
}

////// get warna baju //////
	function $_GET(param) {
	  var vars = {};
	  window.location.href.replace( location.hash, '' ).replace( 
	    /[?&]+([^=&]+)=?([^&]*)?/gi, // regexp
	    function( m, key, value ) { // callback
	      vars[key] = value !== undefined ? value : '';
	    }
	  );

	  if ( param ) {
	    return vars[param] ? vars[param] : null;  
	  }
	  return vars;
	}

	var color = $_GET('color');


	$("#sini_div_baju_color").attr("style","background-image: url(assets/img/"+color+".JPG); height: 350px; width: 100%;background-size: 100% 100%;");
///// end get warna baju ///////

function toastnya(id,mesej){
  toastr.options = {
    "closeButton": true,
    "debug": false,
    "progressBar": true,
    "positionClass": "toast-top-right",
    "showDuration": "300",
    "hideDuration": "1000",
    "timeOut": "5000",
    "extendedTimeOut": "1000",
    "showEasing": "swing",
    "hideEasing": "linear",
    "showMethod": "fadeIn",
    "hideMethod": "fadeOut"
  };

  toastr.error("<center>"+mesej+"</center>");
  $("#"+id).focus();
}

////// ini icon delete //////
	var deleteIcon = "data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' id='Ebene_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='595.275px' height='595.275px' viewBox='200 215 230 470' xml:space='preserve'%3E%3Ccircle style='fill:%23F44336;' cx='299.76' cy='439.067' r='218.516'/%3E%3Cg%3E%3Crect x='267.162' y='307.978' transform='matrix(0.7071 -0.7071 0.7071 0.7071 -222.6202 340.6915)' style='fill:white;' width='65.545' height='262.18'/%3E%3Crect x='266.988' y='308.153' transform='matrix(0.7071 0.7071 -0.7071 0.7071 398.3889 -83.3116)' style='fill:white;' width='65.544' height='262.179'/%3E%3C/g%3E%3C/svg%3E";

	var img = document.createElement('img');
	img.src = deleteIcon;
//// end icon delete /////

///// responsive canvas /////
	function resizeCanvas() {
	  const outerCanvasContainer = $('#sini_div_canvas')[0];
	  
	  const ratio = canvas.getWidth() / canvas.getHeight();
	  const containerWidth   = outerCanvasContainer.clientWidth;
	  const containerHeight  = outerCanvasContainer.clientHeight;

	  const scale = containerWidth / canvas.getWidth();
	  const zoom  = canvas.getZoom() * scale;
	  canvas.setDimensions({width: containerWidth, height: outerCanvasContainer.clientHeight});
	  canvas.setViewportTransform([zoom, 0, 0, zoom, 0, 0]);
	}

	$("#sini_div_canvas").resize(resizeCanvas);
//// end responsive canvas ///

var canvas = this.__canvas = new fabric.Canvas('c',{width: 900,
          height: 1050});
// var canvas = new fabric.Canvas('c',{backgroundColor : "red"});
// canvas.backgroundColor= color;
canvas.renderTop();

canvas.isDrawingMode = false;



resizeCanvas();

var drawing_width = 1; // ini utk drawing width
var drawing_color = null; // ini utk drawing color

///// ini change div editor /////
	function change_editor(e){
		if (e == 'bentuk') {
			canvas.isDrawingMode = false;
			$("#div_upload_image").attr('style','display : none')
			var html= '<div class="pacific form-group">'+
									'<label>Bentuk</label>'+
									'<select class="form-control" onchange="change_persegi(1,value)" id="select_bentuk">'+
										'<option disabled="" selected="">-Pilih Bentuk Persegi</option>'+
										'<option value="rect">Segi Empat</option>'+
										'<option value="tri">Segi Tiga</option>'+
										'<option value="cir">Lingkaran</option>'+
									'</select>'+
								'</div>'+
								'<div class="pacific form-group">'+
									'<label>Fill Color</label>'+
									'<select class="form-control" onchange="change_persegi(2,value)">'+
										'<option disabled="" selected="">-Fill Color</option>'+
										'<option value="no_color">Transparan</option>'+
										'<option value="black">Hitam</option>'+
										'<option value="white">Putih</option>'+
										'<option value="red">Merah</option>'+
										'<option value="blue">Biru</option>'+
										'<option value="yellow">Kuning</option>'+
									'</select>'+
								'</div>'+
								'<div class="pacific form-group">'+
									'<label>Stroke Color</label>'+
									'<select class="form-control" onchange="change_persegi(3,value)">'+
										'<option disabled="" selected="">-Stroke Color</option>'+
										'<option value="black">Hitam</option>'+
										'<option value="white">Putih</option>'+
										'<option value="red">Merah</option>'+
										'<option value="blue">Biru</option>'+
										'<option value="yellow">Kuning</option>'+
									'</select>'+
								'</div>'+
								// '<div class="form-group">'+
								// 	'<label>Stroke Width</label>'+
								// 	'<input class="form-control" type="range" onchange="change_persegi(4,value)" value="1" min="1" max="20" style="display: block">'+
								// '</div>'+
								'<div class="pacific form-group" style="text-align:center">'+
									'<button onclick="add_bentuk()" class="btn btn-info" style="font-weight: bold;">Tambah Bentuk</button>'
								'</div>';
			$("#sini_div_editor").html(html)
			canvas.isDrawingMode = false;
		}
		if (e == 'drawing') {
			canvas.isDrawingMode = false;
			$("#div_upload_image").attr('style','display : none')
			drawing_color = null;
			drawing_width = 1;
			var html= '<div class="pacific form-group">'+
									'<label>Drawing Color</label>'+
									'<select class="form-control" onchange="free_drawing(1,value)" id="select_drawing_color">'+
										'<option disabled="" selected="">-Drawing Color</option>'+
										'<option value="black">Hitam</option>'+
										'<option value="white">Putih</option>'+
										'<option value="red">Merah</option>'+
										'<option value="blue">Biru</option>'+
										'<option value="yellow">Kuning</option>'+
									'</select>'+
								'</div>'+
								'<div class="pacific form-group">'+
									'<label>Drawing Width</label>'+
									'<input class="form-control" type="range" onchange="free_drawing(2,value)" value="1" min="1" max="20" style="display: block">'+
								'</div>'+
								'<div class="pacific form-group" style="text-align:center">'+
									'<button onclick="add_drawing()" class="btn btn-info" style="font-weight: bold;">Tambah Drawing</button>'
								'</div>';
			$("#sini_div_editor").html(html)
			
		}
		if (e == 'teks') {
			canvas.isDrawingMode = false;
			$("#div_upload_image").attr('style','display : none')
			drawing_color = null;
			drawing_width = 1;
			var html= '<div class="pacific form-group">'+
									'<label>Inputan Teks</label>'+
										// '<input class="form-control" type="teks" id="input_teks" oninput="teks_input(1,value)" >'+
										'<textarea class="form-control" id="input_teks" oninput="teks_input(1,value)"></textarea>'+
								'</div>'+
								'<div class="pacific form-group">'+
									'<label>Teks Font</label>'+
									'<select class="form-control" onchange="teks_input(2,value)" id="select_teks_font">'+
										'<option disabled="" selected="">-Pilih Teks Font</option>'+
										'<option value="Times" style="font-family : Times">Times</option>'+
										'<option value="Arial" style="font-family : Arial">Arial</option>'+
										'<option value="Metal Mania" style="font-family : Metal Mania">Metal Mania</option>'+
										'<option value="Pacifico">Pacifico</option>'+
									'</select>'+
								'</div>'+
								'<div class="pacific form-group">'+
									'<label>Teks Color</label>'+
									'<input class="form-control" type="color" onchange="teks_input(3,value)" value="black" >'+
								'</div>'+
								'<div class="pacific form-group" style="text-align:center">'+
									'<button onclick="add_teks()" class="btn btn-info" style="font-weight: bold;">Tambah Teks</button>'
								'</div>';
			$("#sini_div_editor").html(html)
			
		}
		if (e == 'image') {
			canvas.isDrawingMode = false;
			$("#div_upload_image").attr('style','display : block')
			image_base64 = null;
			$("#sini_div_editor").html(null)
			
		}
	}
//// end change div editor ////


var idnya = 1; // ini id tiap object
var save_data = null; // ini data editor

////// render icon delete supaya bole delete //////
	fabric.Object.prototype.controls.deleteControl = new fabric.Control({
	  x: 0.5,
	  y: -0.5,
	  offsetY: 16,
	  cursorStyle: 'pointer',
	  mouseUpHandler: deleteObject,
	  render: renderIcon,
	  cornerSize: 24
	});


	function deleteObject(eventData, target) {

		var datanya = JSON.parse(save_data);
		console.log(target);
		// datanya.filter(function(item){ console.log(item) }) 
		var myNewArray = datanya.filter(function(item){ return item['id'] != target['id'] }) 
		myNewArray = JSON.stringify(myNewArray)
		if (myNewArray == "[]") {
			myNewArray = null;
		}
		save_data = myNewArray
		console.log(JSON.parse(save_data));

		if (save_data == null) {
			$("#save_datanya11").attr('disabled','');
		}

	  var canvas = target.canvas;
	  canvas.remove(target);
	  canvas.requestRenderAll();
	}

	function renderIcon(ctx, left, top, styleOverride, fabricObject) {
	  var size = this.cornerSize;
	  ctx.save();
	  ctx.translate(left, top);
	  ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle));
	  ctx.drawImage(img, -size/2, -size/2, size, size);
	  ctx.restore();
	}
////// end render icon delete //////

//// ini untuk bentuk persegi ////
	var variable_segi = null;
	function change_persegi(kat,nilai){
		var segi;
		if (variable_segi == null) {
			if (kat == 1) {
				segi = [{"segi" : nilai ,"fill" : '' , 'stroke' :  '' }];
			}
			else if (kat == 2) {
				segi = [{"segi" : '' ,"fill" : nilai , 'stroke' :  '' }];
			}

			else if (kat == 3) {
				segi = [{"segi" : '' ,"fill" : '' , 'stroke' :  nilai }];
			}

			

			variable_segi = JSON.stringify(segi)
		}
		else
		{
			// console.log(variable_segi)
			variable_segi = JSON.parse(variable_segi);
			// console.log(variable_segi)
			if (kat == 1) {
				variable_segi[0].segi = nilai;
			}
			else if (kat == 2) {
				variable_segi[0].fill = nilai;
			}
			else if (kat == 3) {
				variable_segi[0].stroke = nilai;
			}
			
			variable_segi = JSON.stringify(variable_segi)
			// console.log(variable_segi)
			
		}
	}

	function add_bentuk(){
		if (variable_segi == null) {
			toastnya('select_bentuk','Bentuk Harus Terpilih');
		}
		else
		{
			var segi = JSON.parse(variable_segi);
			if (segi[0].segi == '' || segi[0].segi == null || segi[0].fill == '' || segi[0].fill == null || segi[0].stroke == '' || segi[0].stroke == null ) {
				toastnya('select_bentuk','Semua Pilihan Harus DIpilih');
			}
			else
			{
				var fillnya;
				if (segi[0].fill == 'no_color') {
					fillnya = 'rgba(0,0,0,0)'
				}
				else
				{
					fillnya = segi[0].fill
				}

				if (segi[0].segi == 'rect') {
					segi_empat(fillnya,segi[0].stroke,'segi_empat');
					// console.log(segi[0].stroke_width)
				}
				else if (segi[0].segi == 'tri') {
					segi_tiga(fillnya,segi[0].stroke,'segi_tiga');
					// console.log(segi[0].stroke_width)
				}
				else if (segi[0].segi == 'cir') {
					segi_lingkaran(fillnya,segi[0].stroke,'lingkaran');
					// console.log(segi[0].stroke_width)
					
				}

				// variable_segi = null;
				// $("#sini_div_editor").html(null)
				document.getElementById("back_to_top").click();
				// $("#editor_select").val($("#editor_select option:first").val());

			}

		}
	}

	function segi_empat(fillnya,stroke,bentuk) {
	  var rect = new fabric.Rect({
	    id : idnya, 
	    kategori : bentuk,   
	    angle:0,
	    left: 400,
	    top: 350,
	    fill: fillnya,
	    width: 200,
	    height: 200,
	    // objectCaching: true,
	    stroke: stroke,
	    strokeWidth: 10,
	    // padding : 5
	  });
	  
	  
		var datanya = [{"id" : idnya ,"kategori" : bentuk, "left" :  400 , "top" :  350, "width" : 200 , "height" : 200 , "angle" :0 , "fill" : fillnya , "stroke" : stroke }];  

		if (save_data == null) {
	  	datanya = JSON.stringify(datanya);
	  	save_data = datanya;
	  	// console.log(JSON.parse(save_data))
	  }
	  else
	  {
	  	save_data = JSON.parse(save_data);
	  	save_data = save_data.concat(datanya)
	  	save_data = JSON.stringify(save_data);
	  	// console.log(JSON.parse(save_data))
	  	// console.log(save_data)
	  }


	  canvas.add(rect);
	  canvas.setActiveObject(rect);
	  idnya = idnya + 1;
	  $("#save_datanya11").removeAttr('disabled');
	}

	function segi_tiga(fillnya,stroke,bentuk) {
	  var tri = new fabric.Triangle({
	    id : idnya,    
	    kategori : bentuk,
	    angle:0,
	    left: 400,
	    top: 350,
	    fill: fillnya,
	    width: 200,
	    height: 200,
	    // objectCaching: true,
	    stroke: stroke,
	    strokeWidth: 10,
	    // padding : 5
	  });
	  
	  var datanya = [{"id" : idnya ,"kategori" : bentuk, "left" :  400 , "top" :  350, "width" : 200 , "height" : 200 , "angle" :0 , "fill" : fillnya , "stroke" : stroke }]; 

	  if (save_data == null) {
	  	datanya = JSON.stringify(datanya);
	  	save_data = datanya;
	  	// console.log(JSON.parse(save_data))
	  }
	  else
	  {
	  	save_data = JSON.parse(save_data);
	  	save_data = save_data.concat(datanya)
	  	save_data = JSON.stringify(save_data);
	  	// console.log(JSON.parse(save_data))
	  	// console.log(save_data)
	  }

	  canvas.add(tri);
	  canvas.setActiveObject(tri);
	  idnya = idnya + 1;
	  $("#save_datanya11").removeAttr('disabled');
	}

	function segi_lingkaran(fillnya,stroke,bentuk) {
	  var cir = new fabric.Circle({
	    id : idnya,  
	    kategori : bentuk,  
	    angle:0,
	    left: 400,
	    top: 350,
	    fill: fillnya,
	    radius : 200,
	    // objectCaching: true,
	    stroke: stroke,
	    strokeWidth: 10,
	    // padding : 5
	  });

		var datanya = [{"id" : idnya ,"kategori" : bentuk, "left" :  400 , "top" :  350, "radius" : 200 , "angle" :0 , "fill" : fillnya , "stroke" : stroke , "scaleX" : 1, "scaleY" : 1}]; 

	  if (save_data == null) {
	  	datanya = JSON.stringify(datanya);
	  	save_data = datanya;
	  	// console.log(JSON.parse(save_data))
	  }
	  else
	  {
	  	save_data = JSON.parse(save_data);
	  	save_data = save_data.concat(datanya)
	  	save_data = JSON.stringify(save_data);
	  	// console.log(JSON.parse(save_data))
	  	// console.log(save_data)
	  }

	  console.log(cir);
	  canvas.add(cir);
	  canvas.setActiveObject(cir);
	  idnya = idnya + 1;
	  $("#save_datanya11").removeAttr('disabled');
	}
//// end untuk bentuk persegi ////

//// ini untuk free drawing ////
	function free_drawing(kat,nilai){
		// console.log(kat,nilai)
		var draw;
		if (kat == 1) {
			drawing_color = nilai;
		}
		else if (kat == 2) {
			drawing_width = nilai;
		}
	}

	function add_drawing(){
		// console.log(variable_free_drawing)
		if (drawing_color == null) {
			toastnya('select_drawing_color','Warna Harus Dipilih');
		}
		else
		{
			// console.log("jalankan")
			// drawing = JSON.parse(variable_free_drawing)
			canvas.isDrawingMode = true;
			canvas.freeDrawingBrush.width = drawing_width;
			canvas.freeDrawingBrush.color = drawing_color;
			// variable_segi = null;
			var html = '<div class="pacific form-group" style="text-align:center">'+
									'<button onclick="stop_drawing()" class="btn btn-warning" style="font-weight: bold;">Stop Drawing</button>'
								'</div>';
			$("#sini_div_editor").html(html)
			document.getElementById("back_to_top").click();
			$("#editor_select").val($("#editor_select option:first").val());

			
		}
	}

	canvas.on('path:created', function(opt) {
	  // opt.path is a fabric.Path ready to use and already on the canvas
	  // console.log(opt.path instanceof fabric.Path)
	  // this is the path data
	  // console.log(opt.path);
	  // console.log(JSON.stringify(opt.path.path));
	  var path = opt.path.path.map(chunk => {return chunk.join(' ');}).join(' ');
	  // console.log(opt.path.height)
	  console.log(opt.path)
	  var datanya = [{"id" : idnya ,"kategori" : 'free_drawing', "path" : path , "left" :  opt.path.left , "top" :  opt.path.top, "width" : opt.path.width , "height" : opt.path.height , "stroke_width" : opt.path.strokeWidth , "stroke" : opt.path.stroke }];  
	  console.log(datanya)
	  opt.path.idnya = fabric.Object.__uid++
	  opt.path.id = idnya

		if (save_data == null) {
	  	datanya = JSON.stringify(datanya);
	  	save_data = datanya;
	  	// console.log(JSON.parse(save_data))
	  	console.log(save_data)
	  }
	  else
	  {
	  	save_data = JSON.parse(save_data);
	  	save_data = save_data.concat(datanya)
	  	save_data = JSON.stringify(save_data);
	  	// console.log(JSON.parse(save_data))
	  	console.log(save_data)
	  }
	  idnya = idnya + 1;
	  $("#save_datanya11").removeAttr('disabled');

	});

	function stop_drawing(){
		canvas.isDrawingMode = false;
		$("#sini_div_editor").html(null)
		document.getElementById("back_to_top").click();
	}

	// function hapus_path() {
	// 	canvas.getObjects('path').forEach((path) => {
	// 	  // if(path.senderId === client.id){
	// 	    canvas.remove(path);
	// 	  // }
	// 	});
	// }
		
//// end utk free drawing ////

//// ini utk input teks ////
	var teks_inputan = null;
	var teks_font = null;
	var teks_color = "black";

	function teks_input(kat,nilai){
		// console.log(kat,nilai)
		if (kat == 1) {
			teks_inputan = nilai;
		}
		else if (kat == 2) {
			teks_font = nilai;
			// console.log(teks_font)
		}
		else if (kat == 3) {
			teks_color = nilai;
		}
	}

	function add_teks(){
		// console.log(variable_free_drawing)
		if (teks_inputan == null) {
			toastnya('input_teks','Inputan Harus Terisi');
		}
		else if (teks_font == null) {
			toastnya('select_teks_font','Font Harus Terpilih');
		}
		else
		{
			tambah_teks(teks_inputan,teks_color,teks_font)
			document.getElementById("back_to_top").click();
		}
	}

	function tambah_teks(input,fill,family){
		var text = new fabric.Text(input, { 
			id : idnya,
		  fill: fill ,
		  fontSize: 100,
		  left: 400,
	    top: 350,
		  fontFamily: family,
		}); 

		var datanya = [{"id" : idnya ,"kategori" : "teks", "input_teks" : input,  "left" :  400 , "top" :  350, "width" : "" , "height" : "200" , "angle" :0 , "fill" : fill , "fontFamily" : family  , "angle" : 0 , "scaleX" : 1, "scaleY" : 1}];  

		if (save_data == null) {
	  	datanya = JSON.stringify(datanya);
	  	save_data = datanya;
	  	// console.log(JSON.parse(save_data))
	  }
	  else
	  {
	  	save_data = JSON.parse(save_data);
	  	save_data = save_data.concat(datanya)
	  	save_data = JSON.stringify(save_data);
	  	// console.log(JSON.parse(save_data))
	  	// console.log(save_data)
	  }

	  // text
		// Render the Text on Canvas 
		// console.log(text.kategori);
		text.kategori = "teks"
		console.log(text)
		canvas.add(text); 
		canvas.setActiveObject(text);
		idnya = idnya + 1;
		$("#save_datanya11").removeAttr('disabled');
	}
//// end utk input teks //// 

//// ini utk upload image ////
	var image_base64 = null;

	$("#input_upload_image").change(function(){
	    readImage( this );
	    // console.log("berubah")
	    // console.log(image_base64)
	});

	function readImage(input) {
    if ( input.files && input.files[0] ) {
      var FR= new FileReader();
      var size = input.files[0].size / 1024
      var type = input.files[0].type;
      

      // console.log(size)
      console.log(type)
      if (size > 1500) {
      	toastnya("input_upload_image","Image yang diupload maksimal 1,4 MB")
      	$("#input_upload_image").val(null)
      	image_base64 = null
      }

      else if (type != 'image/jpeg' && type != 'image/png') {
      	toastnya("input_upload_image","File yang diupload harus berekstensi foto")
      	$("#input_upload_image").val(null)
      	image_base64 = null
      }
      else
      {
      	FR.onload = function(e) {
					// $('#img').attr( "src", e.target.result );
					// $('#base').text( e.target.result );
					// console.log(e.target.result)
					// simpan_image(e.target.result)
					image_base64 = e.target.result
					
	      };       
	      FR.readAsDataURL( input.files[0] );
      }
    }
	}

	function sleep(ms) {
	  return new Promise(resolve => setTimeout(resolve, ms));
	}


	function add_image(){

		var x = document.createElement("IMG");
  	x.setAttribute("src", image_base64);
  	x.setAttribute("id", 'img_yg_terupload_'+idnya);
  	x.async = true; 
  	document.getElementById("sini_tampung_image").appendChild(x);
  	// await sleep(500);
  	setTimeout(function(){
		  console.log("heheheh dulu")
		  var imgElement = document.getElementById('img_yg_terupload_'+idnya);
			var imgInstance = new fabric.Image(imgElement, {
				id : idnya,
			  left: 400,
			  top: 350,
			  angle: 0,
			  opacity: 1
			});
			imgInstance.kategori = "foto"
			canvas.add(imgInstance);
			canvas.setActiveObject(imgInstance);
			var datanya = [{"id" : idnya ,"kategori" : "foto", "detail" : image_base64, "scaleX" : 1 , "scaleY" : 1 ,  "left" :  400 , "top" :  350, "angle" :0  }];  
			if (save_data == null) {
		  	datanya = JSON.stringify(datanya);
		  	save_data = datanya;
		  	// console.log(JSON.parse(save_data))
		  }
		  else
		  {
		  	save_data = JSON.parse(save_data);
		  	save_data = save_data.concat(datanya)
		  	save_data = JSON.stringify(save_data);
		  	// console.log(JSON.parse(save_data))
		  	// console.log(save_data)
		  }
			idnya = idnya + 1;
			document.getElementById("back_to_top").click();
			$("#save_datanya11").removeAttr('disabled');
		}, 200);

		
	}

	// function try_remove(){
	// 	document.getElementById("img_yg_terupload_1").remove();
	// 	 // var elem = document.getElementById(id);
	// }
//// end utk upload image ////

//// sini canvas event /////
	canvas.on('object:moved', function(options) {
	  // console.log(options)
	  var obj = canvas.getActiveObject();
	  var datanya = JSON.parse(save_data);
	  var id;

	  for (var i = 0; i < datanya.length; ++i) {
	    if (datanya[i].id == options['target']['id']) {
	      id = i;
	      break;
	    }   
	  }


	  if (options['target']['kategori'] == 'segi_empat' || options['target']['kategori'] == 'segi_tiga' ) {
	  	datanya[id].angle = options['target']['angle'];
	  	datanya[id].height = Math.floor(obj.getScaledHeight());
	  	datanya[id].left = options['target']['left'];
	  	datanya[id].top = options['target']['top'];
	  	datanya[id].width = Math.floor(obj.getScaledWidth());
	  }

	  if (options['target']['kategori'] == 'foto' || options['target']['kategori'] == 'teks' || options['target']['kategori'] == 'lingkaran' ) {
	  	// console.log(options['target'])
	  	datanya[id].angle = options['target']['angle'];
	  	datanya[id].height = Math.floor(obj.getScaledHeight());
	  	datanya[id].left = options['target']['left'];
	  	datanya[id].top = options['target']['top'];
	  	datanya[id].scaleY = options['target']['scaleY'];
	  	datanya[id].scaleX = options['target']['scaleX'];
	  	datanya[id].width = Math.floor(obj.getScaledWidth());
	  }


	  save_data = JSON.stringify(datanya);
	  // console.log(JSON.parse(save_data) )
	  // console.log(save_data)
	  // console.log(options['target']['kategori'])
	  // simpan(datanya,'update',kategori,id);
	});

	canvas.on('object:rotated', function(options) {
		// console.log(options)
	  var obj = canvas.getActiveObject();
	  var datanya = JSON.parse(save_data);
	  var id;

	  for (var i = 0; i < datanya.length; ++i) {
	    if (datanya[i].id == options['target']['id']) {
	      id = i;
	      break;
	    }   
	  }


	  if (options['target']['kategori'] == 'segi_empat' || options['target']['kategori'] == 'segi_tiga' ) {
	  	datanya[id].angle = options['target']['angle'];
	  	datanya[id].height = Math.floor(obj.getScaledHeight());
	  	datanya[id].left = options['target']['left'];
	  	datanya[id].top = options['target']['top'];
	  	datanya[id].width = Math.floor(obj.getScaledWidth());
	  }

	  if (options['target']['kategori'] == 'foto' || options['target']['kategori'] == 'teks' || options['target']['kategori'] == 'lingkaran' ) {
	  	// console.log(options['target'])
	  	datanya[id].angle = options['target']['angle'];
	  	datanya[id].height = Math.floor(obj.getScaledHeight());
	  	datanya[id].left = options['target']['left'];
	  	datanya[id].top = options['target']['top'];
	  	datanya[id].scaleY = options['target']['scaleY'];
	  	datanya[id].scaleX = options['target']['scaleX'];
	  	datanya[id].width = Math.floor(obj.getScaledWidth());
	  }


	  save_data = JSON.stringify(datanya);
	  // console.log(JSON.parse(save_data) )
	  console.log(save_data)
	});

	canvas.on('object:scaled', function(options) {
		console.log(options)
	  var obj = canvas.getActiveObject();
	  var datanya = JSON.parse(save_data);
	  var id;

	  for (var i = 0; i < datanya.length; ++i) {
	    if (datanya[i].id == options['target']['id']) {
	      id = i;
	      break;
	    }   
	  }


	  if (options['target']['kategori'] == 'segi_empat' || options['target']['kategori'] == 'segi_tiga' ) {
	  	datanya[id].angle = options['target']['angle'];
	  	datanya[id].height = Math.floor(obj.getScaledHeight());
	  	datanya[id].left = options['target']['left'];
	  	datanya[id].top = options['target']['top'];
	  	datanya[id].width = Math.floor(obj.getScaledWidth());
	  }

	  if (options['target']['kategori'] == 'foto' || options['target']['kategori'] == 'teks' || options['target']['kategori'] == 'lingkaran' ) {
	  	// console.log(options['target'])
	  	datanya[id].angle = options['target']['angle'];
	  	datanya[id].height = Math.floor(obj.getScaledHeight());
	  	datanya[id].left = options['target']['left'];
	  	datanya[id].top = options['target']['top'];
	  	datanya[id].scaleY = options['target']['scaleY'];
	  	datanya[id].scaleX = options['target']['scaleX'];
	  	datanya[id].width = Math.floor(obj.getScaledWidth());
	  }

	  // console.log(save_data)
	  save_data = JSON.stringify(datanya);
	  // console.log(JSON.parse(save_data) )
	  console.log(save_data)

	});

	canvas.on('selection:created', function(options) {
		// console.log(options['target'])
		
		if (options['target']['strokeLineCap'] == 'round' && options['target']['strokeLineJoin'] == 'round') {
			// console.log('ini free drawing')
			var id = options['target']['idnya']
			// console.log("ini idnya : "+id)
			var ini_array;
			// console.log(canvas['_objects'])
			var object_canvas = canvas['_objects'];
			for (var i = 0; i < object_canvas.length; i++) {
				// console.log(object_canvas[i].idnya)
				if (object_canvas[i].idnya == options['target']['idnya']) {
					ini_array = i;
					break;
				}
			}
			// console.log("ini id array nya : "+ini_array)
			canvas['_objects'][ini_array].lockScalingX = true;
			canvas['_objects'][ini_array].lockScalingY = true;
			canvas['_objects'][ini_array].lockRotation  = true;
			canvas['_objects'][ini_array].lockMovementX   = true;
			canvas['_objects'][ini_array].lockMovementY  = true;
			// this.__canvases.push(canvas);
		}
	});

	canvas.on('selection:updated', function(options) {
		// console.log(options['target'])
		
		// console.log(options)
		if (options['target']['strokeLineCap'] == 'round' && options['target']['strokeLineJoin'] == 'round') {
			// console.log('ini free drawing')
			var id = options['target']['idnya']
			// console.log("ini idnya : "+id)
			var ini_array;
			// console.log(canvas['_objects'])
			var object_canvas = canvas['_objects'];
			for (var i = 0; i < object_canvas.length; i++) {
				// console.log(object_canvas[i].idnya)
				if (object_canvas[i].idnya == options['target']['idnya']) {
					ini_array = i;
					break;
				}
			}
			// console.log("ini id array nya : "+ini_array)
			canvas['_objects'][ini_array].lockScalingX = true;
			canvas['_objects'][ini_array].lockScalingY = true;
			canvas['_objects'][ini_array].lockRotation  = true;
			canvas['_objects'][ini_array].lockMovementX   = true;
			canvas['_objects'][ini_array].lockMovementY  = true;
			// this.__canvases.push(canvas);
		}
	});
//// end canvas event /////

function save_desain() {
	var penyimpanan = localStorage.getItem('simpanan')
  var a =  JSON.parse(save_data);
  var id = 1;
	color = color.slice(0,-1);
  if (penyimpanan == null) {
  	var ini = [{"id" : id ,"canvas" : color ,"isi_depan" : a, "isi_belakang" : null}];
  	// localStorage.setItem('coba2', JSON.stringify(ini));
  }
  else
  {
  	id = JSON.parse(penyimpanan);
  	id = id[id.length-1].id + 1
  	var ini = [{"id" : id ,"canvas" : color ,"isi_depan" : a, "isi_belakang" : null}];
  	penyimpanan = JSON.parse(penyimpanan)
  	ini  = penyimpanan.concat(ini);
  	// localStorage.setItem('coba2', JSON.stringify(ini));
  }
  localStorage.setItem('simpanan', JSON.stringify(ini));
	
  // window.location.replace("desain_complete.html?id="+id);
  window.location.replace("desain_belakang.html?color="+color+"2&id="+id);
}

function cek_simpanan(){
	// localStorage.removeItem('simpanan')
	// alert(localStorage.getItem('coba2'))
	console.log(JSON.parse(localStorage.getItem('simpanan')))
}