-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathUI.min.js
2 lines (2 loc) · 10.4 KB
/
UI.min.js
1
2
UI={},UI.Three=function(t,e,i){this.materials,this.ctrl,this.rndr,this.scene,this.camera,this.init(t,e,i),$(window).resize(function(){var e=$("#"+t).width(),i=$("#"+t).height();this.rndr.setSize(e,i),this.camera.aspect=e/i,this.camera.updateProjectionMatrix()}.bind(this))},UI.Three.prototype.constructor=UI.Three,UI.Three.prototype.initControl=function(t){this.ctrl=new THREE.TrackballControls(this.camera,$("#"+t).get(0)),this.ctrl.rotateSpeed=1,this.ctrl.zoomSpeed=1.2,this.ctrl.panSpeed=.8,this.ctrl.noZoom=!1,this.ctrl.noPan=!1,this.ctrl.staticMoving=!1,this.ctrl.dynamicDampingFactor=.3},UI.Three.prototype.resetControl=function(){new TWEEN.Tween(camera.position).to({x:0,y:0,z:200},600).easing(TWEEN.Easing.Sinusoidal.EaseInOut).start()},UI.Three.prototype.initRenderer=function(t,e,i){this.rndr=new THREE.WebGLRenderer({alpha:!0,antialias:!0}),$("#"+t).get(0).appendChild(this.rndr.domElement),this.rndr.setPixelRatio(window.devicePixelRatio),this.rndr.setSize(e,i),this.rndr.setClearColor(16448250,1)},UI.Three.prototype.initScene=function(t,e){this.camera=new THREE.PerspectiveCamera(20,t/e,10,1e3),this.camera.position.set(0,0,200);var i=new THREE.AmbientLight(2105376),a=new THREE.DirectionalLight(14737632,1);a.position=this.camera.position,this.camera.add(a),this.scene=new THREE.Scene,this.scene.add(this.camera),this.scene.add(i)},UI.Three.prototype.render=function(){this.rndr.render(this.scene,this.camera)},UI.Three.prototype.animate=function(){var t=this;requestAnimationFrame(function(){t.animate(),t.ctrl.update(),t.render()})},UI.Three.prototype.init=function(t,e,i){if(e)this.initScene(e,i),this.initRenderer(t,e,i),this.initControl(t,e,i);else{var e=$("#"+t).width(),i=$("#"+t).height();this.initScene(e,i),this.initRenderer(t,e,i),this.initControl(t,e,i)}this.render(),this.animate()},UI.Three.prototype.resize=function(t){var e=$("#"+t).width(),i=$("#"+t).height();this.rndr.setSize(e,i)},UI.Three.prototype.update=function(){},UI.Two=function(t,e,i){if(this.patterns={},this.mapRange=new fabric.Rect,e)this.canvas=new fabric.Canvas(t,{width:e,height:i}),this.resize(e,i);else{var e=$("#"+t).width(),i=$("#"+t).height();this.canvas=new fabric.Canvas(t,{width:e,height:i}),this.resize(e,i)}$(".canvas-container").ruler({showCrosshair:!1}),$(window).resize(function(){$("#"+t).width(),$("#"+t).height()}.bind(this))},UI.Two.prototype.constructor=UI.Two,UI.Two.prototype.setBackgroundColor=function(){},UI.Two.prototype.resize=function(t,e){this.canvas.setWidth(t),this.canvas.setHeight(e);var i=this.canvas.getElement();i.setAttribute("width",t*window.devicePixelRatio),i.setAttribute("height",e*window.devicePixelRatio),i.getContext("2d").scale(window.devicePixelRatio,window.devicePixelRatio),this.canvas.backgroundColor="rgba(255,255,255, 1)",this.canvas.renderAll()},UI.Two.prototype.addImage=function(t){console.log(t),fabric.Image.fromURL(t,function(t){console.log(t),t._element.crossOrigin="Anonymous",this.canvas.add(t)}.bind(this))},UI.Two.prototype.addText=function(t,e,a,n){var o=e.split(" ");if(0!=t.length){var s=t.split("").map(function(t){return new fabric.Text(t,{left:0,top:100,fontFamily:o[0],fontWeight:o[1],fontSize:a})});for(i=1;i<t.length;i++)s[i].left+=s[i-1].left+s[i-1].getWidth()+n;this.canvas.add(new fabric.Group(s,{left:100})),this.canvas.renderAll()}},UI.Two.prototype.makePatterns=function(){for(var t=[],e=0;e<Math.floor($("#viewContainer").width()/50);e++)for(var i=0;i<Math.floor($("#viewContainer").height()/50);i++)t.push(new fabric.Circle({radius:10,fill:"#000",left:50*e,top:50*i})),t.push(new fabric.Circle({radius:10,fill:"#000",left:50*e+25,top:50*i+25}));this.patterns.dots=new fabric.Group(t,{left:0,top:0,label:"pattern",selectable:!1});for(var a=[],e=0;e<Math.floor($("#viewContainer").width()/40)+50;e++)a.push(new fabric.Rect({fill:"#000",width:32,height:1e3,left:80*e-400,top:0,angle:45}));this.patterns.stripes=new fabric.Group(a,{left:-540,top:-140,label:"pattern",selectable:!1})},UI.Two.prototype.updatePattern=function(t){this.canvas.add(this.patterns[t])},UI.Two.prototype.removeSelectedObject=function(){null==this.canvas.getActiveObject()?(this.canvas.getActiveGroup().forEachObject(function(t){this.canvas.remove(t)}),this.canvas.discardActiveGroup().renderAll()):null!=this.canvas.getActiveObject()&&(this.canvas.remove(this.canvas.getActiveObject()),this.canvas.discardActiveObject().renderAll())},UI.Two.prototype.removeAll=function(){this.canvas.clear()},UI.Controller=function(t,e){this.models=t,this.material=e,this.two=new UI.Two("two-viewport"),this.three=new UI.Three("three-viewport"),this.modelManager=new Tautology.ModelManager(this.models,this.material,this.two.canvas),this.modelManager.select(Object.keys(this.models)[0],this.three.scene),this.modelSelector("type-list","parameters"),this.canvasEditor("tools",this.two)},UI.Controller.prototype.constructor=UI.Controller,UI.Controller.prototype.modelSelector=function(t,e){$("<li>").appendTo($("#"+t)).append($('<div id="model-selector" class="btn-group" data-toggle="buttons"></div>')),Object.keys(this.models).forEach(function(t){$("<label id="+t+' class="btn btn-default">').appendTo($("#model-selector")).append($('<input type="radio" autocomplete="off">')).append($("<span>"+models[t].name+"</span>")),$("#"+t).on("click",function(){this.modelManager.select(t,this.three.scene),$("#"+e).empty(),this.addModifiers(e,this.models[t].model.param,this.modelManager.models[t].geom),this.addModifiers(e,this.material,this.modelManager.material)}.bind(this))}.bind(this))},UI.Controller.prototype.picker=function(t,e,i){$("<li>").appendTo($("#"+e)).append($("<button id="+t+'-color href=# class="btn btn-default">'+t+"</button>")),$("#"+t+"-color").colorPicker({colorformat:"rgba",alignment:"br",onSelect:i})},UI.Controller.prototype.modal=function(t){$("<li>").appendTo("#"+t.container).append($('<button type="button" class="btn btn-default" data-toggle="modal" data-target="#'+t.id+'">').text(t.buttonText)),$("body").append($('<div id="'+t.id+'" class="modal fade" tabindex="-1" role="dialog">').append($('<div class="modal-dialog modal-lg">').append('<div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button><h4 class="modal-title" id="myLargeModalLabel">'+t.title+'</h4></div><div id="'+t.id+'" class="modal-body"></div></div>'))),$("#"+t.id+".modal-body").append(t.content)},UI.Controller.prototype.slider=function(t,e){$("<li>").appendTo($("#"+e)).append('<div id="'+t.name+'" class="input-group input-group-html5"><span class="input-group-addon">'+t.name+'</span><span class="input-group-addon addon-range"><input type="range" id="'+t.name+'-range" name="'+t.name+'-range" min="'+2e3*t.min+'" max="'+2e3*t.max+'" value="'+2e3*t.val+'"></span><input type="text" id="'+t.name+'-text" class="form-control" name="'+t.name+'-text" value="'+t.val+'""></div>'),$("#"+t.name+"-text").on("change",function(){$("#"+t.name+"-range").val(2e3*this.value)}),$("#"+t.name+"-range").on("input change",function(){$("#"+t.name+"-text").val(this.value/2e3)})},UI.Controller.prototype.paramSlider=function(t,e,i){this.slider(e,t),$("#"+e.name+"-text").val($("#"+e.name+"-range").val()/2e3),$("#"+e.name+"-text").on("change",function(){e.val=this.value,i.update()}),$("#"+e.name+"-range").on("input change",function(){e.val=this.value/2e3,i.update()})},UI.Controller.prototype.addModifiers=function(t,e,i){Object.keys(e).forEach(function(a){e[a].type&&this.paramSlider(t,e[a],i)}.bind(this))},UI.Controller.prototype.insertImage=function(t){this.modal({container:t,id:"gallery",buttonText:"插點图片？",title:"图片都在这儿了",content:$('<a href=# class="select"><img src="./images/126543l.jpg"></a><a href=# class="select"><img src="./images/128618l.jpg"></a><a href=# class="select"><img src="./images/136024l.jpg"></a><a href=# class="select"><img src="./images/127745l.jpg"></a><a href=# class="select"><img src="./images/132919l.jpg"></a><a href=# class="select"><img src="./images/133976l.jpg"></a><a href=# class="select"><img src="./images/126347l.jpg"></a><a href=# class="select"><img src="./images/128638l.jpg"></a><a href=# class="select"><img src="./images/130091l.jpg"></a><a href=# class="select"><img src="./images/132687l.jpg"></a><a href=# class="select"><img src="./images/128665l.jpg"></a><a href=# class="select"><img src="./images/132899l.jpg"></a><a href=# class="select"><img src="./images/132882l.jpg"></a><a href=# class="select"><img src="./images/132729l.jpg"></a><a href=# class="select"><img src="./images/132852l.jpg"></a><a href=# class="select"><img src="./images/129980l.jpg"></a><a href=# class="select"><img src="./images/129542l.jpg"></a><a href=# class="select"><img src="./images/137747l.jpg"></a><a href=# class="select"><img src="./images/129859l.jpg"></a><a href=# class="select"><img src="./images/131406l.jpg"></a>')}),$(".select").on("click",function(t){this.two.addImage(t.target.getAttribute("src")),$("#gallery").modal("toggle")}.bind(this))},UI.Controller.prototype.insertText=function(t){var e=$('<form><div class="form-group"><textarea id="text" class="form-control"></textarea></div></form>');this.modal({container:t,id:"text",buttonText:"插點文字？",title:"想個合適的廣告語吧",content:e}),this.slider({name:"字号",min:10,max:30,val:20},"text.modal-body"),this.slider({name:"字符间距",min:-5,max:5,val:0},"text.modal-body"),$("#字号").unwrap().wrap('<div class="form-group">'),$("#字符间距").unwrap().wrap('<div class="form-group">'),$("#text.modal-body").append('<button id="confirm-text" href=# class="btn btn-primary">插入文字</button>'),$("#confirm-text").on("click",function(){this.two.addText($("textarea#text").val(),"Helvetica normal",parseFloat($("#字号-text").val()),parseFloat($("#字符间距-text").val())),$("#text").modal("toggle")}.bind(this))},UI.Controller.prototype.insertPattern=function(t){this.modal({container:t,id:"pattern",buttonText:"插點图案？",title:"花花绿绿的多好看～"})},UI.Controller.prototype.deleteButton=function(t){$("<li>").appendTo($("#"+t)).append($('<button id="deleteButton" href=# class="btn btn-primary">删掉点选的文字或图片</button>')),$("#deleteButton").on("click",function(){console.log("here"),this.two.removeSelectedObject(),this.two.canvas.renderAll()}.bind(this))},UI.Controller.prototype.canvasEditor=function(t){this.picker("吸管儿底色",t,function(t,e){this.two.canvas.backgroundColor=e,this.two.canvas.renderAll()}.bind(this)),this.insertImage(t),this.insertText(t),this.insertPattern(t),this.deleteButton(t)};
//# sourceMappingURL=UI.min.js.map