/* Were tälking UTF8 */ // GLOBALS var LOG = false; //false; // ENABLE LOGGING var PRLOG = false; //false; /** PRICE LOG - REMOVE COMMENTS **/ var INPUTDELAY = 650; // MilliseconCs var FLOATDELAY = 1300 // Milliseconds for Float Inputs var SCONFIG = ''; var PHPCALC = false; /** ENABLES PHP + JS CALC COMPARE MODE - MUST BE OFF IN LIVE MODE **/ var xhr = ''; var canvas = new Object(); var bgLayer = new Object(); var WORKSPACE = { width: 550, height: 300, color:'#000000', bgcolor:'#ffffff', border: 0, borderDistance: 20, selectorPadding: 0, selectorCornerSize: 10, selectorBorderColor: '#007fe1', selectorCornerColor: '#007fe1', selectorCornerStyle: 'circle', selectorCornerTransparent: false, selectorSerienText : '#673086', selectBorderStrokeWidth: 1.5, selectBorderStrokeColor: '#007fe1', //'rgba(200,0,0,1)', selectBorderStrokeDashWidth: 5, veredelungDefault: 0, // 0=Gravur, 1=Druck scale:'1:1', scaleFac:1, dimMax:600, dimMin:300, //cutFormColor: 'rgba(220,220,220,1)', //'rgba(241,241,241,1)' cornerRadius: 3, // in mmm }; var delay = (function(){ var timer = 0; return function(callback, ms){ clearTimeout (timer); timer = setTimeout(callback, ms); }; })(); $.ajaxSetup({ cache: false }); /** ---------------------------------------------------------------------------*/ /** INIT EVENTS */ /** ---------------------------------------------------------------------------*/ $(document).ready(function() { SCONFIG = $('#JSCONFIG').val(); fabric.Object.NUM_FRACTION_DIGITS = 17; fabric.textureSize = 4096; //if (fabric.isWebglSupported()) fabric.textureSize = 65536; if(document.getElementById('lcWorkSpace')===null) { } else { canvas = this.__canvas = new fabric.Canvas('lcWorkSpace'); // CANVAS EVENTS canvas.on({ //'object:moving': function () { updateObjControls('obj_moving')}, //'object:scaling': function () { updateObjControls('obj_scaling')}, //'object:resizing': function () { updateObjControls('obj_resizing')}, //'object:rotating': function () { updateObjControls('obj_rotating')}, //'object:selected': function () { updateObjControls('obj_selected')}, //'object:modified': function () { updateObjControls('obj_modified')}, 'selection:created': function () { var obj = canvas.getActiveObject(); if(obj) { obj.set({'strokeWidth': WORKSPACE.selectBorderStrokeWidth}); } //updateObjControls('selection:created') }, //'selection:updated': function () { updateObjControls('selection:updated')}, //'selection:cleared': function () { updateObjControls('selection:cleared')}, 'before:selection:cleared': function () { var obj = canvas.getActiveObject(); if(obj) { obj.set({'strokeWidth': 0}); } //hideObjControls }, //'text:editing:entered': function () { LOG && console.log('Event: text_editing_entered'); }, //'text:editing:exited': function () { LOG && console.log('Event: text_editing_exited'); }, //'text:selection:changed': function () { LOG && console.log('Event: text_editing_changed'); }, //'text:changed': function () { LOG && console.log('Event: text_changed'); }, //'mouse:up': function() // { // var obj = canvas.getActiveObject(); // if(obj) { calculateSign('Event: mouse up',0); } // }, 'after:render': function(){ this.calcOffset(); } }); canvas.stateful = false; // Increases speed (if undone function not needed) /** canvas.selection = false; **/ canvas.controlsAboveOverlay = true; //canvas.renderOnAddRemove = false; // better? canvas.setWidth($('#lcWorkSpace').width()); canvas.setHeight($('#lcWorkSpace').height()); } // BEFOREUNLOAD $(window).on('beforeunload', function(){ // SAVE SIGNS IN TMP //if(SIGN.calculateOnUnload==1) //{ // if(window.location.href== '') // { // $.when(calculateSign('fromUnloadEvent()',1)).done(function(ev) { // return true; // }); // } //} console.log('FROM WINDOW UNLOAD: SAVE ENTWURF OR NOT!?!?'); //return 'Are you sure you want to leave?'; }); /** REMOVE OBJ ON DEL KEY **/ $('html').keyup(function(e) { if(e.keyCode == 46) { var hasFocus=0; $("input").each(function() { if($(this).is(':focus')) { hasFocus=1; }}); $("textarea").each(function() { if($(this).is(':focus')) { hasFocus=1; }}); if(hasFocus==0) { removeLastObj('Remove from KeyEvent'); } } }); // INIT IMAGE UPLOADER $('#lcwork').on('change','#image-upload', function() { //var file =this.files[0]; var ext = this.files[0].name.substr((this.files[0].name.lastIndexOf('.') +1)).toLowerCase(); //var ext = file.name.substr((file.name.lastIndexOf('.') +1)); // size check //if(this.files[0].size>8388608) if(this.files[0].size > 16777216) //if(this.files[0].size>2097152) { alert('Die angegebene Datei ist größer als 16MB.\nBitte beachten Sie die maximale Dateigröße.'); //parent.scroll(0,0); //showModalInfoWin("Dateigröß überschritten","Das Bild konnte nicht heraufgeladen werden. Die maximale Dateigröße; beträgt 8MB."); } else if(ext!='svg' && ext!='jpg' && ext!='jpeg' && ext!='png' && ext!='eps') { alert('Derzeit können nur Dateien vom Typ "SVG","JPEG","PNG" und "EPS" heraufgeladen werden.'); //parent.scroll(0,0); //showModalInfoWin("Dateiformat ungültig","Derzeit können nur Dateien vom Typ \"SVG\", \"JPEG\" und \"EPS\" heraufgeladen werden."); } else { uploadWin.open(); uploadImage(this.files[0],1); } // reset upload input $('#image-upload').val(''); }); // IMAGE Remover (AJAX) $('#lcwork').on('click','.imgDBRemove', function() { var id = $(this).data('id'); var parent = $(this).parent().closest('.imgDB'); var active = $(this).next('div.imgDBActive'); $(parent).css({'background-image':'url("https://www.werbekollektion.de/xshop/icons/ajax-loader.gif")','background-size':'20px'}); $.ajax({ url: 'https://www.werbekollektion.de/scripts/shop.warenkorb-io.php', type: 'GET', cache: false, dataType: "text", data: {'com': 'removeUploads', id: id}, error: function(em) { //return true; }, success: function(em) { //alert(em) if($(active).is(':hidden')) { } else { removeLastObj('ImageRemover'); lcWorkFileHide(); } $(parent).remove(); return false; } }); return false; }); // IMAGE Adder $('#lcwork').on('click','.imgDB', function() { $('.uploadLogoArea').each(function() { $('.imgDBActive').hide(); }); $(this).find('.imgDBActive').show(); resetCanvas(); var img = $(this).data('img'); //$.when(addImage(img,1)).done(function(ev) { recalcImageContainer(); showHideContainer(); initWorkspace('',0); }); $.when(addImage(img,1)).done(function(ev) { initWorkspace('',0); }); }); // Remove Entwurf $('#lcremoveDesign').on('click',function() { canvas.clear(); $('.uploadLogoArea').each(function() { $('.imgDBActive').hide(); }); $('#lcWorkSpaceContainer').hide(); // SET LCWORKFILE lcWorkFileHide(); }); // FILTER $('#gravur').on('click',function() { $(this).addClass('active'); $(this).data('active',1); $('#cmyk').removeClass('active'); $('#cmyk').data('active',0); $('#lcremoveBG').addClass('active'); refreshFilter(); }); $('#cmyk').on('click',function() { $(this).addClass('active'); $(this).data('active',1); $('#gravur').removeClass('active'); $('#gravur').data('active',0); refreshFilter(); }); $('#lcscaleBG').on('click',function() { if($('.vsliderContainer').is(':hidden')) { $(this).addClass('active'); $('.vsliderContainer').show(); } else { $(this).removeClass('active'); $('.vsliderContainer').hide(); } }); $('.verticalSlider').on('input',function() { zoomLevel = ($(this).val() / 20) + 1; canvas.zoomToPoint(new fabric.Point(canvas.width / 2, canvas.height / 2), zoomLevel); //canvas.getZoom() / zoom }); $('#lcremoveBG').on('click',function() { var obj = canvas.item(0); if(obj) { obj.filters.push(filterRemoveWhite()); obj.applyFilters() canvas.renderAll(); $(this).addClass('active'); } }); $('#lcreset').on('click',function() { //$('.uploadLogoArea').each(function() { if($('.imgDBActive').is(':visible')) { $(this).trigger('click'); }} ) $('.imgDBActive:visible').trigger('click'); }); }); function recalcImageContainer() { var cWidth = $('.stdShopImageLarge').width(); var cHeight = $('.stdShopImageLarge').height(); //console.log('IMG_REAL_SIZE:' + $('#prodImage').width() + ',' + $('#prodImage').height()); //console.log('CONTAINER_SIZE:' + cWidth + ',' + cHeight); // CHEIGHT ALWAYS = 400 $('#lcWorkSpaceContainer').css({'width':$('.stdShopImageLarge').width()}); } /* RESIZE ACTION */ var resizeIcon = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowQUIwMDRDNkE0ODRFQjExQTQ1Q0ExRUFGNjFCNTVBMyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpDQUNERDBENTg1NjYxMUVCOUZDNEQ3OEUyN0Q3RTQ0NSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpDQUNERDBENDg1NjYxMUVCOUZDNEQ3OEUyN0Q3RTQ0NSIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkI1NEE3NjRCNjQ4NUVCMTE5Rjc2Qzg3QUQ4RTZDMUUyIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjBBQjAwNEM2QTQ4NEVCMTFBNDVDQTFFQUY2MUI1NUEzIi8+IDwvcmRmOkRlc2NyaXB0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"; var imgResize = document.createElement('img'); imgResize.src = resizeIcon; fabric.Object.prototype.controls.mbr = new fabric.Control({ x: 0.5, y: 0.5, offsetY: 0, cursorStyle: 'pointer', actionHandler: fabric.controlsUtils.scalingEqually, actionName: 'scale', render: renderIcon(imgResize), cornerSize: 40, /*padding:200,*/ withConnection: true }); /* ROTATE ICON */ var rotateIcon = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowQUIwMDRDNkE0ODRFQjExQTQ1Q0ExRUFGNjFCNTVBMyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo4RUQ1RjFDRjg1NjQxMUVCQTBFREQzNDQ5RDQ5RDc4MCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo4RUQ1RjFDRTg1NjQxMUVCQTBFREQzNDQ5RDQ5RDc4MCIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkMwRkY2MDk1QjQ4NEVCMTFBNDVDQTFFQUY2MUI1NUEzIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjBBQjAwNEM2QTQ4NEVCMTFBNDVDQTFFQUY2MUI1NUEzIi8+IDwvcmRmOkRlc2NyaXB0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"; var imgRotate = document.createElement('img'); imgRotate.src = rotateIcon; fabric.Object.prototype.controls.mtr = new fabric.Control({ x: 0.5, y: -0.5, offsetY: 0, cursorStyle: 'pointer', actionHandler: fabric.controlsUtils.rotationWithSnapping, actionName: 'rotate', render: renderIcon(imgRotate), cornerSize: 40, withConnection: true }); function deleteObject(eventData, transform) { var target = transform.target; var canvas = target.canvas; canvas.remove(target); canvas.requestRenderAll(); } function skewObject(eventData, transform) { var target = transform.target; var canvas = target.canvas; var pointer = canvas.getPointer(event.e); var posX = pointer.x; var posY = pointer.y; console.log(posX+", "+posY); //console.log(eventData); //canvas.remove(target); canvas.requestRenderAll(); } function renderIcon(icon) { return 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(icon, -size/2, -size/2, size, size); ctx.restore(); } } /** ---------------------------------------------------------------------------*/ /** */ /** INIT WORKSPACE */ /** */ /** ---------------------------------------------------------------------------*/ function initWorkspace(json,reloadFromJS) { LOG && console.log('initWorkspace'); if(reloadFromJS!=1) { canvas.clear(); } $('#lcWorkSpace').hide(); recalcImageContainer(); canvas.setWidth($('#lcWorkSpaceContainer').width()); canvas.setHeight($('#lcWorkSpaceContainer').height()); resetCanvas(); //$('.uploadLogoArea').each(function() { $('.imgDBActive').hide(); }); if(json.length > 0) { json = json.replace(/'/g,"\'"); //json = json.replace(/"/g,'\\"'); json = json.replace(/\n/g, "\\n"); //json=replace json = json.replace(/\r/g, "\\r"); //json=replace LOG && console.log('initSign from JSON (PHP)'); //console.log(json); //var start = timer(0); // canvas.loadFromJSON(json, canvas.renderAll.bind(canvas), function(o, object) { // var start = timer(0); // var tdiff = timer(start); // LOG && console.log(o,object); // 'Object loaded in: ' +tdiff + ', Object:' + fabric.log(o, object)); // }); canvas.loadFromJSON(json, function () { //canvas.forEachObject(function(o) { //console.log('JSON: ObjType: ' + o.type); //console.log(o.type); //if (o.type === 'image' && o.filters.length !== 0) { // o.applyFilters(canvas2.renderAll.bind(canvas2)); //} // }); }); //var tdiff = timer(start); //LOG && console.log('JSON loads in: ' +tdiff); //canvas.loadFromDatalessJSON(json, canvas.renderAll.bind(canvas), function(o, object) { // fabric.log(o, object); //}); } else { LOG && console.log('init from JS'); } delay(function() { // CAUSE IMAGES IN JSON ARE NOT LOADED PROPERLY var startdelay = timer(0); //for(x=2; x 0) { if(toCanvas==1) { addImage(xhr.responseText,0); //showHideContainer(); initWorkspace('',0); } //$.when(addImageFunction()).done(function(ev) { showHideContainer(); }); uploadWin.enable(); uploadWin.close(); if(toCanvas==0) // IMAGE UPLOAD IN WK { return xhr.responseText; } } else { if(xhr.responseText.length > 0) { resultError = xhr.responseText.split('|'); } if(resultError[0]) { errorMessage= 'File/Reason: ' + resultError[0] + '
'; } if(resultError[1]) { errorMessage= errorMessage + 'Error: ' + resultError[1] + ''; } uploadWin.enable(); $('.loaderError').show(); $('.loader2').hide(); $('.loaderError').html('Es ist ein Fehler bei der Übertragung aufgetreten:
' + errorMessage + '

'); //xhr.abort(); } } } var formData = new FormData(); formData.append('file', file); xhr.send(formData); } function setBackgroundImage() { var timestamp = new Date().getTime(); var bgimage = $('.stdShopImageLarge').css('background-image'); bgimage = bgimage.replace('url(','').replace(')','').replace(/\"/gi, ""); var ext = bgimage.substr( (bgimage.lastIndexOf('.') +1) ).toLowerCase(); if(ext=='jpg' || ext=='jpeg' || ext=='png') { fabric.Image.fromURL(bgimage+'?'+timestamp, function(obj) // FORCE BGIMAGE LOADED AGAIN (NOT FROM CACHE -> CHROMIUM BUG) { //fabric.util.loadImage(bgimage+'?'+timestamp, function (img) //{ //var obj = new fabric.Image(img); /* RESIZE TO WORKCONTAINER */ if(obj.width >= canvas.width) { /** CALC NEW RATIO BY WIDTH */ var scaleRatio = canvas.width/obj.width; if((scaleRatio * obj.height) > canvas.height) { scaleRatio= canvas.height/obj.height; } //console.log('scaleRatio:' + scaleRatio); } else { /** CALC NEW RATIO BY HEIGHT */ var scaleRatio = canvas.height/obj.height; if((scaleRatio * obj.width) > canvas.width) { scaleRatio= canvas.width/obj.width; } //console.log('scaleRatio:' + scaleRatio); } canvas.setBackgroundImage(obj, canvas.renderAll.bind(canvas), { scaleX: scaleRatio, scaleY: scaleRatio }); obj.set({centeredScaling: 1, crossOrigin: "anonymous", selectable: false}); //obj.set({lcFilename: image }); //obj.set({centeredScaling: 1, crossOrigin: "anonymous", clipPath: bgLayer, clip_target: 'bgLayer'}); obj.setCoords(); obj.center(); canvas.renderAll.bind(canvas); }, { crossOrigin:'anonymous'}); } else { //alert('not available'); } } function addImage(image,restore) { canvas.clear() setBackgroundImage(); var im = image.split('|'); //console.log('adding image: ' + restore); if(restore==1) { /** NO NEED TO CHECK RESOLUTION */ var resolution = 150; var image=im[0]; } else { tmp = im[0].replace(/\.\.\/\.\.\/.*\/\//,''); image = tmp.replace('..//',''); image = 'https://www.edelstahlbecher.de/' + image; var resolution = parseInt(im[1]); } var timestamp = new Date().getTime(); var ext = image.substr( (image.lastIndexOf('.') +1) ).toLowerCase(); var scaleFactor = 0.8; if(ext=='jpg' || ext=='jpeg' || ext=='png') { fabric.Image.fromURL(image+'?'+timestamp, function(obj) // FORCE IMAGE LOADED AGAIN (NOT FROM CACHE -> CHROMIUM BUG) { //fabric.util.loadImage(image,function (img) //{ //var obj = new fabric.Image(img); formatObjControls(obj,1); removeLastObj('Add Image JPEG/PNG'); if(obj.width >= canvas.width) { /** CALC NEW RATIO BY WIDTH */ var scaleRatio = (canvas.width/obj.width) * scaleFactor; if((scaleRatio * obj.height) > (canvas.height * scaleFactor)) { scaleRatio = (canvas.height/obj.height) * scaleFactor; } //console.log('scaleRatio:' + scaleRatio); } else { /** CALC NEW RATIO BY HEIGHT */ var scaleRatio = (canvas.height/obj.height) * scaleFactor; if((scaleRatio * obj.width) > (canvas.width * scaleFactor)) { scaleRatio= (canvas.width/obj.width) * scaleFactor; } //console.log('scaleRatio:' + scaleRatio); } obj.set({centeredScaling: 1, scaleX: scaleRatio, scaleY: scaleRatio}); obj.set({lcFilename: image }); obj.setCoords(); canvas.add(obj); canvas.renderAll.bind(canvas); canvas.setActiveObject(obj); refreshFilter('jpg'); /* ENABLE REMOVE WHITE FILTER */ $('#lcremoveBG').removeClass('inactive'); $('#lcremoveBG').css('background-image','url(https://www.werbekollektion.de/xshop/icons/lc_removeBg.png)'); /* IS FULL COLOR DIGITALDRUCK FALSE ? */ // if($('#gravur').data('active')==1) { // SET FILTERS // obj.filters.push(filterRemoveWhite()); // obj.filters.push(filterBlendColor(WORKSPACE.color)); // obj.applyFilters() // canvas.renderAll(); // obj.set({ mmkTrueColor: 0 }); } //else //{ obj.set({ mmkTrueColor: 1 }); } //register_mmkTrueColor(obj); centerObjHV(); //if(resolution<150) //{ // alert('inactive for now'); // $('#errorbar').html('Das heraufgeladene Bild ist sehr gering in der Auflösung und kann daher zu Qualitätseinbußen führen.'); // $('#errorbar').show(); //} }, {crossOrigin: 'anonymous'}); } if(ext=='svg') { fabric.loadSVGFromURL(image, function(objects, options) { var obj = fabric.util.groupSVGElements(objects, options); formatObjControls(obj,1); obj.set({ centeredScaling: 1}); obj.set({lcFilename: image }); refreshFilter('svg'); //obj.set({ centeredScaling: 1, clipPath: bgLayer, clip_target: 'bgLayer'}); obj.width>=obj.height ? obj.scaleToWidth(initialWidth) : obj.scaleToWidth(initialHeight); removeLastObj('Add Image SVG'); canvas.add(obj); canvas.renderAll.bind(canvas); canvas.setActiveObject(obj); centerObjHV(); /* DISABLE REMOVE WHITE FILTER */ $('#lcremoveBG').addClass('inactive'); $('#lcremoveBG').css('background-image','url(https://www.werbekollektion.de/xshop/icons/lc_removeBg_inactive.png)'); }); } resetCanvas(); canvas.renderAll(); /** RESTORE IMAGE UPLOAD AREA IF NOT SHOWN ALREADY **/ /** $('.uploadButton').hide(); **/ var uid = guidGenerator(); url = 'http://localhost/eb4/xuser/uploads/test.png?' + '?q=tdiff'; // SET LCWORKFILE $('#lcWorkFile').val(image); $('#userChoiceUploadImage').hide(); $('#userChoiceUploadDesign').show(); $('#userUploadDesignMode').val(1); $('.imgDBAnfrage').css('background-image','url('+url+')'); $('.uploadLogoArea').show(); if(restore==0) { $('.uploadLogoArea').each(function() { $('.imgDBActive').hide(); }); $('.uploadLogoArea').append('
'); } return true; } function formatObjControls(obj,mode) { obj['setControlVisible']('tl',0); //obj['setControlVisible']('mtl',0); //obj['setControlVisible']('mb',0); obj['setControlVisible']('bl',0); //obj['setControlVisible']('mbr',0); // obj['setControlVisible']('mr',0); //obj['setControlVisible']('mt',0); obj['hasBorders']= 0; //WORKSPACE.selectorPadding; //4; obj['padding']= WORKSPACE.selectorPadding; //4; obj['cornerSize']=WORKSPACE.selectorCornerSize; //8 obj['borderColor']=WORKSPACE.selectorBorderColor; obj['cornerColor']=WORKSPACE.selectorCornerColor; obj['cornerStyle']=WORKSPACE.selectorCornerStyle; obj['transparentCorners'] = WORKSPACE.selectorCornerTransparent; obj['stroke'] = WORKSPACE.selectBorderStrokeColor; obj['strokeDashArray'] = [WORKSPACE.selectBorderStrokeDashWidth,WORKSPACE.selectBorderStrokeDashWidth]; obj['strokeWidth'] = WORKSPACE.selectBorderStrokeWidth; obj['strokeUniform'] = true; // RE-REGISTER OWN VARS // OR THEY WILL DISAPEAR //if(typeof obj['mmkObjectID'] !== 'undefined') { obj.set({ mmkObjectID: obj['mmkObjectID'] }); register_mmkObjectID(obj); } //if((obj['mmkLayerFill']) && $('#ENGRAVEFILLABLE').val()==1) //=='layerFillColor' //{ obj.set({ mmkLayerFill: 1 }); register_mmkLayerFill(obj); } // UNREGISTER VARS //if((obj['mmkLayerFill']) && $('#ENGRAVEFILLABLE').val()==0) //=='layerFillColor' //{ obj.set({ mmkLayerFill: '' }); register_mmkLayerFill(obj); } // TRUE COLOR //if((obj['mmkTrueColor'])==1) { obj.set({ mmkTrueColor: 1 }); register_mmkTrueColor(obj); } LOG && console.log('FormatObjControls: Obj: '+obj+ ', Mode: ' +mode); } function resetCanvas() { //canvas.setZoom(1); canvas.zoomToPoint(new fabric.Point(canvas.width / 2, canvas.height / 2), 1); canvas.renderAll(); $('#lcscaleBG').removeClass('active'); $('#lcremoveBG').removeClass('active'); $('.vsliderContainer').hide(); $('.verticalSlider').val(0); } function removeLastObj(from) { /* SKIP BACKGROUND IMAGE */ if(canvas.getObjects().length==2) { var last = canvas.item(canvas.getObjects().length-1); canvas.remove(last); canvas.renderAll(); } //console.log('removing last img obj:' + from + ', Layers: ' + canvas.getObjects().length); if(canvas.getObjects().length==0) // 1 WITH BACKGROUND IMAGE { //$('#lcWorkSpaceContainer').hide(); } } function showHideContainer() { /** CHECK IF AN IMAGE IS SELECTED */ if($('#lcWorkSpaceContainer').is(':hidden')) { $('#lcWorkSpaceContainer').show(); //console.log('restoring spaceContainer'); } } function refreshFilter(filetype) { var obj = canvas.item(0); //canvas.getObjects().length-1); //console.log('refreshing filter...') //console.log(obj); if(obj) { if(filetype===undefined) { var ext = obj.lcFilename.substr( (obj.lcFilename.lastIndexOf('.') +1) ).toLowerCase(); LOG && console.log('Extension restored from Filename:' + ext); } else { var ext=filetype; LOG && console.log('Extension restored by given Filename'); } /** RESTORE FILTER & COLORS **/ if($('#gravur').data('active')==1) { // SET FILTERS if(ext=='jpg' ||ext=='jpeg' || ext=='png') { obj.filters.push(filterRemoveWhite()); obj.filters.push(filterBlendColor(WORKSPACE.color)); obj.applyFilters() canvas.renderAll(); } if(ext=='svg') { if (obj.type == 'group' || obj.type == 'path-group') { var group = obj; for (var i=0; i < group.getObjects().length; i++) { group.item(i).set({'fill': '#000000'}); console.log('filling group'); }} else { obj.fill = '#000000'; console.log('filling single'); } canvas.renderAll(); } // obj.set({ mmkTrueColor: 0 }); } else { if(ext=='jpg' || ext=='jpeg' || ext=='png') { obj.filters = []; obj.applyFilters() canvas.renderAll(); } if(ext=='svg') { /* RESTORE FILL */ // if (obj.type == 'group' || obj.type == 'path-group') { var group = obj; for (var i=0; i < group.getObjects().length; i++) { group.item(i).set({'fill': '#ff0000'}); console.log('filling group'); }} // else { obj.fill = '#ff0000'; console.log('filling single'); } // canvas.renderAll(); } } } } function filterRemoveWhite() { var filter = new fabric.Image.filters.RemoveColor({ color:'#FFFFFF', distance: 0.1 }); return filter; } function filterBlendColor(color) { var filter = new fabric.Image.filters.BlendColor({ color: color, mode: 'tint', alpha: 1 }); return filter; } function centerObjHV () { var obj = canvas.getActiveObject(); obj.center(); obj.setCoords(); canvas.renderAll();} //updateObjControls('func_centerObjHV'); canvas.renderAll(); } function centerObjH () { var obj = canvas.getActiveObject(); obj.centerH(); obj.setCoords(); canvas.renderAll();} //updateObjControls('func_centerObjH'); canvas.renderAll(); } function centerObjV () { var obj = canvas.getActiveObject(); obj.centerV(); obj.setCoords(); canvas.renderAll();} //updateObjControls('func_centerObjV'); canvas.renderAll(); } // * SAVE ENTWURF TO DISK **/ function lcWorkFileHide() { $('#lcWorkFile').val(''); $('#userChoiceUploadImage').show(); $('#userChoiceUploadDesign').hide(); $('#userUploadDesignMode').val(0); $('.imgDBAnfrage').css('background-image',''); $('.imgDBAnfrage').data('fileraw',''); // $('#lcremoveDesign').trigger('click'); } function saveLcDesign() { var jsondata = JSON.stringify(canvas); var svgdata = ''; //saveImageAs('svg'); var pngdata = saveImageAs('png'); var parent = $('.imgDBActive:visible').closest('div'); var uploadfile = $(parent).prev('div').data('id'); $.ajax({type: "POST", url: "https://www.werbekollektion.de/scripts/shop.warenkorb-io.php", data: { com: 'saveLcDesign', uploadfile: uploadfile, pngdata: pngdata, jsondata: jsondata }}).done(function(ex) { //console.log('FILENAME: ' +ex ); data= ex.split('|'); //var previewFile = 'https://www.werbekollektion.de/xuser/uploads/' + ex +'_entwurf.png'; //$('.imgDBAnfrage').css('background-image','url("' + previewFile + '")'); //$('.imgDBAnfrage').data('fileraw',ex); var ts = timer(0); var previewFile = data[0] + 'xuser/uploads/' + data[1] +'_entwurf.png?'+ ts; $('.imgDBAnfrage').css('background-image','url("' + previewFile + '")'); $('.imgDBAnfrage').data('fileraw',data[1]); anfrageWin.open(); $('#create-anfrage').attr('disabled',false); $('.loader3').hide(); $('.anfrageButtonText').show(); }).fail(function(err) { console.log(err); }); } // * WRITE IMAGE DATA *// function saveImageAs(format) { var dataURL=''; //$('#schild').css('visibility','hidden'); // better display // DESELECT ALL OBJECTS //canvas.deactivateAll().renderAll(); // NOT WORKING IN 2.x canvas.discardActiveObject(); var addID = new Array(); var removeID=new Array(); switch(format) { case 'png': dataURL = canvas.toDataURL('image/png'); break; case 'jpeg': dataURL = buffer.toDataURL('image/png'); // PNG OUTPUT var ctx = canvas.getContext("2d"); var myImageData = ctx.getImageData(canvas.item(0).getLeft(), canvas.item(0).getTop(), canvas.item(0).get('width'), canvas.item(0).get('height')); buffer = document.createElement('canvas'); var bufferCtx = buffer.getContext("2d"); buffer.width = canvas.item(0).get('width'); buffer.height = canvas.item(0).get('height'); bufferCtx.putImageData(myImageData, 0, 0); break; case 'json': dataURL = canvas.toJSON(); break; case 'svg': // GROUPS //var engraveGroup = new Array(); //var cutGroup = new Array(); var imageScale = ''; var imageGroup = new Array(); var w,imgScaleFac,i,items,groupX,groupY; // XY CORRECT var objX= canvas.item(0).get('left'); var objY= canvas.item(0).get('top'); // FORMAT OBJECTS TO CSVG LOG && console.log('Create SVG WorkingFile:'); LOG && console.log('------------------------------------------------------------------'); for(x=0; x canvas.item(x).get('height')) // { //xcorrect=0; //ycorrect= $('#HEIGHT').val() - dy; // ty = $('#HEIGHT').val() - ty; // dy = $('#HEIGHT').val() - dy; // } // else // { //xcorrect= $('#WIDTH').val() - dx; //ycorrect= 0; // tx = $('#WIDTH').val() - tx; // dx = $('#WIDTH').val() - dx; // } // console.log('XCORR: '+ canvas.item(x).get('scaleX') +'/'+ sx +', YCORR: '+ canvas.item(x).get('scaleY') + '/' + sy); // BORDER STUFF HERE //if(x==1) //{ // console.log('BORDERID: ' + $('#BORDERID').val()); // alert('hold it'); //} if(x==1) { switch($('#BORDERID').val()) { //case '2': dx=dx - 2; dy = dy - 2; break; //Thin (2mm vom Rand) //case '3': dx=dx - 5; dy = dy - 5; break; //Thick (5mm vom Rand) } //console.log('Layer: ' + x+' Type: '+type+', '+'tx|ty: ' +tx+','+ty+ ' dx|dy: ' +dx+ ',' +dy+ ' sx|sy: ' +sx+ ',' +sy+ ' width/height: ' + obj.get('width')+',' + obj.get('height')+ ' scaleFac: '+SIGN.scaleFac + ' sdx|sdy: ' +sdx+ ',' +sdy); //console.log('DIM: ' +dx+ ',' +dy+ ',' +tx+ ',' +ty); //alert('hold it'); } switch(type) { case 'rect' : obj.set({ width: dx, height: dy, left: tx, top: ty, }); if($('#FORMDATA').val()=='rounded' && x==0) { obj.set({ rx: SIGN.cornerRadius, // * SIGN.scaleFac, ry: SIGN.cornerRadius, // * SIGN.scaleFac, }); } break; case 'ellipse': obj.set({ top: ty, left: tx, rx: canvas.item(x).getRx()/SIGN.scaleFac, ry: canvas.item(x).getRy()/SIGN.scaleFac, //scaleX: sx/2, //scaleY: sy/2, }); break; case 'circle' : obj.set({ left: tx, top: ty, scaleX: sx, scaleY: sy, }); break; case 'image' : w = canvas.item(x).get('width') * canvas.item(x).get('scaleX') / SIGN.scaleFac; imgScaleFac = w/canvas.item(x).get('width'); obj.set({ top: ty, left: tx, scaleX: 1, scaleY: 1, }); // push original file name + imgScaleFac to array(); imageScale=imageScale + "" + imgScaleFac +'|'; imageGroup.push(obj.getSrc()); break; case 'polygon': case 'triangle': case 'path' : case 'path-group': case 'group' : if(obj.mmkLayerType=='layerComponent') { /** HAS 2 Objects Fixation + Overlay **/ i=0; items = obj._objects; var groupX = obj.get('left'); var groupY = obj.get('top'); var groupScaleX = obj.get('scaleX'); var groupScaleY = obj.get('scaleY'); var groupWidth = obj.get('width'); var groupHeight = obj.get('height'); removeID.push(x); while (i < items.length) { LOG && console.log('I: ' + i + ', GROUP Left/Top: ' + obj.left + ',' + obj.top + ', Item Left/Top: ' + items[i].left + ',' + items[i].top + ', Group Width/Height ' + obj.width +',' + obj.height + ', ScaleX/ScaleY ' + obj.scaleX +',' + obj.scaleY +', LAYERDATA: ' + items[i].mmkLayerType + ', OBJECTID: ' + items[i].mmkObjectID); LOG && console.log('WIDTH/HEIGHT: ' + canvas.width + ', ' + canvas.height); varx = obj._objects[i].get('left') * groupScaleX + groupX + (groupWidth/2) * groupScaleX; vary = obj._objects[i].get('top') * groupScaleY + groupY + (groupHeight/2) * groupScaleY; if(i==0) { items[i].set({left: varx, top: vary, scaleX: groupScaleX, scaleY: groupScaleY, fill:'', selectable : true, mmkLayerType: 'layerCompFixation' }); canvas.add(items[i]); canvas.renderAll(); } i++; } } else { obj.set({ top: ty, left: tx, scaleX: sx, scaleY: sy, }); } break; case 'i-text': obj.set({ top: ty, left: tx, scaleX: sx, scaleY: sy, }); break; } // BG LAYER if(x==0 || obj.mmkLayerType=='layerCutForm' || obj.mmkLayerType=='layerFixation' || obj.mmkLayerType=='layerCompFixation') { if(x==0) { obj.set({ shadow:'none' }); } obj.set({strokeWidth: 0.001, stroke: '#ff0000', fill:'', strokeDashArray: []}); //, shadow: 'none' //cutGroup.push(canvas.item(x).clone()); } else if(obj.mmkLayerType=='layerOverlay') { removeID.push(x); } else { if(obj.mmkLayerFill && obj.mmkLayerFill==1) // layerFillColor { //ist ein LayerFill auf dem Obj. -> tue nichts } else { if(obj.get('type')=='image') { if($('#ENGRAVEMETHOD option:selected').val()!=8) { // delay(function() { //alert($('#ENGRAVEMETHOD option:selected').val()); //alert('Image'); //var filter2 = new fabric.Image.filters.BlendColor({ //color: '#000000', //, //'rgba(0,0,0,1)', //mode:'tint', //alpha: 1//opacity: 1 //}); //fabric.util.removeFromArray(obj.filters,'Tint'); obj.filters.push(filterBlendColor('#000000')); //LOG && console.log('FILTERS:'); //LOG && console.log(obj.filters); //obj.set({ fill: '#222222' }); obj.applyFilters(); canvas.renderAll; // }, FLOATDELAY ); // 1350 } } else { fillObjWithColor(obj, 'rgba(0,0,0,1)'); //if($('#ENGRAVEMETHOD option:selected').val()!=8) //{ // obj.set({ fill: 'rgba(0,0,0,1)' }); //} } } } // obj.setCoords(); //canvas.renderAll(); } //alert('Hold it!'); //notAFunction(); // REMOVE BORDER LAYER IF NOT PRESENT if($('#BORDERID').val()>1 && $('#BORDERID').val()<4) { var bw = canvas.item(1).get('width'); var bh = canvas.item(1).get('height'); var bwt = 0; switch($('#BORDERID').val()) { case '2': bwt=2; break; //Thin case '3': bwt=5; break; //Thick } //var bwt = 5; //parseInt(5 * SIGN.scaleFac); canvas.item(1).set({ strokeWidth: bwt, stroke: '#000000', fill:'rgba(255,255,255,0)'}); if($('#FORMDATA').val()=='rounded') { canvas.item(1).set({ rx: SIGN.cornerRadius, // * SIGN.scaleFac, ry: SIGN.cornerRadius, // * SIGN.scaleFac, }); } } else { //canvas.item(1).remove(); removeID.unshift(1); } obj.setCoords(); canvas.renderAll(); // REMOVE OVERLAYS // BORDER // GROUPS LAYERS ETC. for(var x = removeID.length; x--;) { fx=removeID[x]; canvas.remove(canvas.item(fx)); } // ADD COMPONENT FIXATIONS // ADD ORIGINAL IMAGES var fileList=''; var fileObj=''; for (index = 0; index < imageGroup.length; ++index) { fileList = fileList + imageGroup[index] +'\n'; file = imageGroup[index].replace('https://www.werbekollektion.de/xuser/uploads/',''); fileObj = fileObj + file +','; } if(fileList.length>0) { //var text = new fabric.Text('Originaldateien/URL\n' + fileList, { left: 0, top: -80, fontFamily: 'Arial', fontSize: 7 }); //canvas.add(text); //obj.setCoords(); //canvas.renderAll(); } obj.setCoords(); canvas.renderAll(); // WRITE SVG DATA var dim= new Array(); if($('#DIMMODE0').is(':checked')) { dim = $('#DIMSTD').val().split('x'); } if($('#DIMMODE1').is(':checked')) { dim = [$('#WIDTH').val(),$('#HEIGHT').val()]; } dataURL = canvas.toSVG({suppressPreamble: 1, viewBox: { x: 0, y: 0, width: dim[0], height: dim[1]}}); //dataURL = canvas.toSVG(); //alert(dataURL); //alert('Berechne...'); break; } return [dataURL,fileObj,imageScale]; } function guidGenerator() { var S4 = function() { return (((1+Math.random())*0x10000)|0).toString(16).substring(1); }; return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4()); } function timer(time) { var d = new Date(); var now = d.getTime(); if(time==0) { return now; } else { var ntime = now - time +' ms'; return ntime; } }