forked from phcode-dev/staging.phcode.dev
-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathImageViewer.js
More file actions
1 lines (1 loc) · 7.72 KB
/
ImageViewer.js
File metadata and controls
1 lines (1 loc) · 7.72 KB
1
define(function(require,exports,module){var DocumentManager=require("document/DocumentManager"),ImageViewTemplate=require("text!htmlContent/image-view.html"),ProjectManager=require("project/ProjectManager"),LanguageManager=require("language/LanguageManager"),MainViewFactory=require("view/MainViewFactory"),Strings=require("strings"),StringUtils=require("utils/StringUtils"),FileSystem=require("filesystem/FileSystem"),FileUtils=require("file/FileUtils"),_=require("thirdparty/lodash"),Mustache=require("thirdparty/mustache/mustache"),_viewers={};function _imageToDataURI(file,cb){file.read({encoding:window.fs.BYTE_ARRAY_ENCODING},function(err,content,encoding,stat){var base64=window.btoa(new Uint8Array(content).reduce((data,byte)=>data+String.fromCharCode(byte),"")),dataURL;cb(null,"data:image;base64,"+base64)})}function ImageView(file,$container){this.file=file,this.$el=$(Mustache.render(ImageViewTemplate,{fullPath:"",now:""})),$container.append(this.$el),this._naturalWidth=0,this._naturalHeight=0,this._scale=100,this._scaleDivInfo=null,this.relPath=ProjectManager.makeProjectRelativeIfPossible(this.file.fullPath),this.$imagePath=this.$el.find(".image-path"),this.$imagePreview=this.$el.find(".image-preview"),this.$imageData=this.$el.find(".image-data"),this.$image=this.$el.find(".image"),this.$imageTip=this.$el.find(".image-tip"),this.$imageGuides=this.$el.find(".image-guide"),this.$imageScale=this.$el.find(".image-scale"),this.$x_value=this.$el.find(".x-value"),this.$y_value=this.$el.find(".y-value"),this.$horzGuide=this.$el.find(".horz-guide"),this.$vertGuide=this.$el.find(".vert-guide"),this.$imagePath.text(this.relPath).attr("title",this.relPath),this.$imagePreview.on("load",_.bind(this._onImageLoaded,this)),_viewers[file.fullPath]=this;let that=this;_imageToDataURI(file,(err,dataURL)=>{that.$imagePreview[0].src=dataURL})}function _createImageView(file,pane){var view=pane.getViewForPath(file.fullPath);return view?pane.showView(view):(view=new ImageView(file,pane.$content),pane.addView(view,!0)),(new $.Deferred).resolve().promise()}function _handleFileSystemChange(event,entry,added,removed){if(entry&&!entry.isDirectory){var viewer=_viewers[entry.fullPath];viewer&&viewer.refresh()}}ImageView.prototype._onFilenameChange=function(e,oldPath,newPath){this.file.fullPath===newPath&&(this.relPath=ProjectManager.makeProjectRelativeIfPossible(newPath),this.$imagePath.text(this.relPath).attr("title",this.relPath))},ImageView.prototype._onImageLoaded=function(e){this._naturalWidth=e.currentTarget.naturalWidth,this._naturalHeight=e.currentTarget.naturalHeight;var extension=FileUtils.getFileExtension(this.file.fullPath),dimensionString=this._naturalWidth+" × "+this._naturalHeight+" "+Strings.UNIT_PIXELS;"ico"===extension&&(dimensionString+=" ("+Strings.IMAGE_VIEWER_LARGEST_ICON+")");var self=this;this.file.stat(function(err,stat){if(err)self.$imageData.html(dimensionString);else{var sizeString="";stat.size&&(sizeString=" — "+StringUtils.prettyPrintBytes(stat.size,2));var dimensionAndSize=dimensionString+sizeString;self.$imageData.html(dimensionAndSize).attr("title",dimensionAndSize.replace("×","x").replace("—","-"))}}),DocumentManager.on("fileNameChange.ImageView",_.bind(this._onFilenameChange,this)),this.$imageTip.hide(),this.$imageGuides.hide(),this.$image.on("mousemove.ImageView",".image-preview",_.bind(this._showImageTip,this)).on("mouseleave.ImageView",".image-preview",_.bind(this._hideImageTip,this)),this._updateScale()},ImageView.prototype._updateScale=function(){var currentWidth=this.$imagePreview.width();currentWidth&¤tWidth<this._naturalWidth?(this._scale=currentWidth/this._naturalWidth*100,this.$imageScale.text(Math.floor(this._scale)+"%").css("left",this.$imagePreview.position().left+5).show()):(this._scale=100,this._scaleDivInfo=null,this.$imageScale.text("").hide())},ImageView.prototype._showImageTip=function(e){if(0!==Math.floor(this._scale)){var x=Math.round(100*e.offsetX/this._scale),y=Math.round(100*e.offsetY/this._scale),imagePos=this.$imagePreview.position(),left=e.offsetX+imagePos.left,top=e.offsetY+imagePos.top,width=this.$imagePreview.width(),height=this.$imagePreview.height(),windowWidth=$(window).width(),fourDigitImageWidth=4===this._naturalWidth.toString().length,infoWidth1=112,infoWidth2=120,tipOffsetX=10,tipOffsetY=-54,tipMinusOffsetX1=-82,tipMinusOffsetX2=-90;if(x<0||x>=this._naturalWidth||y<0||y>=this._naturalHeight)return this._hideImageTip(e),void this.$imagePreview.css("cursor","auto");this.$imagePreview.css("cursor","none"),this._handleMouseEnterOrExitScaleSticker(left,top),(e.pageX+112>windowWidth||fourDigitImageWidth&&e.pageX+120>windowWidth)&&(tipOffsetX=fourDigitImageWidth?-90:-82),this.$x_value.text(x+"px"),this.$y_value.text(y+"px"),this.$imageTip.css({left:left+tipOffsetX,top:top+-54}).show(),this.$horzGuide.css({left:imagePos.left,top:top,width:width-1}).show(),this.$vertGuide.css({left:left,top:imagePos.top,height:height-1}).show()}},ImageView.prototype._hideImageTip=function(e){var $target,targetPos=$(e.target).position(),imagePos=this.$imagePreview.position(),right=imagePos.left+this.$imagePreview.width(),bottom=imagePos.top+this.$imagePreview.height(),x=targetPos.left+e.offsetX,y=targetPos.top+e.offsetY;(x<imagePos.left||x>=right||y<imagePos.top||y>=bottom)&&(this._hideGuidesAndTip(),this._scaleDivInfo&&(this._scaleDivInfo=null,this.$imageScale.show()))},ImageView.prototype._hideGuidesAndTip=function(){this.$imageTip.hide(),this.$imageGuides.hide()},ImageView.prototype._handleMouseEnterOrExitScaleSticker=function(offsetX,offsetY){var imagePos=this.$imagePreview.position(),scaleDivPos=this.$imageScale.position(),imgWidth=this.$imagePreview.width(),imgHeight=this.$imagePreview.height(),scaleDivLeft,scaleDivTop,scaleDivRight,scaleDivBottom;this._scaleDivInfo?(scaleDivLeft=this._scaleDivInfo.left,scaleDivTop=this._scaleDivInfo.top,scaleDivRight=this._scaleDivInfo.right,scaleDivBottom=this._scaleDivInfo.bottom,imgWidth+imagePos.left<scaleDivRight&&(scaleDivRight=imgWidth+imagePos.left),imgHeight+imagePos.top<scaleDivBottom&&(scaleDivBottom=imgHeight+imagePos.top)):(scaleDivLeft=scaleDivPos.left,scaleDivTop=scaleDivPos.top,scaleDivRight=this.$imageScale.width()+scaleDivLeft,scaleDivBottom=this.$imageScale.height()+scaleDivTop),this._scaleDivInfo?(offsetX<scaleDivLeft||offsetX>scaleDivRight||offsetY<scaleDivTop||offsetY>scaleDivBottom)&&(this._scaleDivInfo=null,this.$imageScale.show()):offsetX>=scaleDivLeft&&offsetX<=scaleDivRight&&offsetY>=scaleDivTop&&offsetY<=scaleDivBottom&&offsetX<imagePos.left+imgWidth&&offsetY<imagePos.top+imgHeight&&(this._scaleDivInfo={left:scaleDivPos.left,top:scaleDivPos.top,right:scaleDivRight,bottom:scaleDivBottom},this.$imageScale.hide())},ImageView.prototype.getFile=function(){return this.file},ImageView.prototype.updateLayout=function(){this._hideGuidesAndTip();var $container=this.$el.parent(),pos=$container.position(),iWidth=$container.innerWidth(),iHeight=$container.innerHeight(),oWidth=$container.outerWidth(),oHeight=$container.outerHeight();this.$el.css({top:pos.top+(oHeight-iHeight)/2,left:pos.left+(oWidth-iWidth)/2,width:iWidth,height:iHeight}),this._updateScale()},ImageView.prototype.destroy=function(){delete _viewers[this.file.fullPath],DocumentManager.off(".ImageView"),this.$image.off(".ImageView"),this.$el.remove()},ImageView.prototype.refresh=function(){var noCacheUrl=this.$imagePreview.attr("src"),now=(new Date).valueOf(),index=noCacheUrl.indexOf("?");index>0&&(noCacheUrl=noCacheUrl.slice(0,index)),noCacheUrl=noCacheUrl+"?ver="+now,this.$imagePreview.attr("src",noCacheUrl)},FileSystem.on("change",_handleFileSystemChange),MainViewFactory.registerViewFactory({canOpenFile:function(fullPath){var lang;return"image"===LanguageManager.getLanguageForPath(fullPath).getId()},openFile:function(file,pane){return _createImageView(file,pane)}}),exports.ImageView=ImageView});