@lumiscaphe/viewer
Advanced tools
Comparing version 0.0.2 to 0.0.3
177
index.js
@@ -1,176 +0,1 @@ | ||
(function (global, factory) { | ||
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : | ||
typeof define === 'function' && define.amd ? define(factory) : | ||
(global.viewer = factory()); | ||
}(this, (function () { 'use strict'; | ||
"use strict"; | ||
var _createClass$1 = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | ||
function _classCallCheck$1(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | ||
var ResolutionHelper = function () { | ||
function ResolutionHelper() { | ||
_classCallCheck$1(this, ResolutionHelper); | ||
} | ||
_createClass$1(ResolutionHelper, null, [{ | ||
key: "getAutoResolution", | ||
value: function getAutoResolution(container) { | ||
var width = container.offsetWidth; | ||
var height = container.offsetHeight; | ||
if (width === 0 || height === 0) return { | ||
width: 0, | ||
height: 0 | ||
}; | ||
var aspectRatio = ResolutionHelper.getStandardAspectRatio(width, height); | ||
if (width > height) { | ||
var w = null; | ||
if (width <= 240 * aspectRatio) w = 240 * aspectRatio;else if (width <= 360 * aspectRatio) w = 360 * aspectRatio;else if (width <= 480 * aspectRatio) w = 480 * aspectRatio;else if (width <= 720 * aspectRatio) w = 720 * aspectRatio;else w = 1080 * aspectRatio; | ||
return { | ||
width: Math.round(w), | ||
height: Math.round(w / aspectRatio) | ||
}; | ||
} else { | ||
var h = null; | ||
if (height <= 240) h = 240;else if (height <= 360) h = 360;else if (height <= 480) h = 480;else if (height <= 720) h = 720;else h = 1080; | ||
return { | ||
width: Math.round(h * aspectRatio), | ||
height: Math.round(h) | ||
}; | ||
} | ||
} | ||
}, { | ||
key: "getStandardAspectRatio", | ||
value: function getStandardAspectRatio(width, height) { | ||
var aspectRatio = width / height; | ||
if (aspectRatio > 4 / 3) aspectRatio = 16 / 9;else if (aspectRatio <= 4 / 3) aspectRatio = 4 / 3; | ||
return aspectRatio; | ||
} | ||
}]); | ||
return ResolutionHelper; | ||
}(); | ||
"use strict"; | ||
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | ||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | ||
var LSViewer = function () { | ||
function LSViewer(container, options) { | ||
var _this = this; | ||
_classCallCheck(this, LSViewer); | ||
this.container = container; | ||
this.container.style.display = 'flex'; | ||
this.container.style.overflow = 'hidden'; | ||
this.canvas = document.createElement('canvas'); | ||
this.canvas.style.flex = 1; | ||
this.canvas.style['object-fit'] = 'cover'; | ||
this.canvas.style.width = '100%'; | ||
this.canvas.style.height = '100%'; | ||
this.container.appendChild(this.canvas); | ||
this.context = this.canvas.getContext('2d'); | ||
this.options = options; | ||
this.params = null; | ||
this.requestAnimationId = null; | ||
window.addEventListener('resize', function () { | ||
_this.resize(); | ||
}); | ||
this.resize(); | ||
} | ||
_createClass(LSViewer, [{ | ||
key: 'resize', | ||
value: function resize() { | ||
this.resolution = ResolutionHelper.getAutoResolution(this.container); | ||
this.canvas.width = this.resolution.width; | ||
this.canvas.height = this.resolution.height; | ||
this.load(this.params); | ||
} | ||
}, { | ||
key: 'load', | ||
value: function load(params) { | ||
var _this2 = this; | ||
if (params === null || this.resolution.width === 0 || this.resolution.height === 0) return; | ||
this.params = params; | ||
params.width = this.resolution.width; | ||
params.height = this.resolution.height; | ||
var query = Object.keys(params).map(function (k) { | ||
return k + '=' + params[k]; | ||
}).join('&'); | ||
var src = this.options.webrender + '/ImageFromBookmark?' + query; | ||
var img = new Image(); | ||
img.addEventListener('load', function () { | ||
_this2.fadein(img); | ||
}); | ||
img.src = src; | ||
} | ||
}, { | ||
key: 'fadein', | ||
value: function fadein(img) { | ||
if (this.requestAnimationId) { | ||
cancelAnimationFrame(this.requestAnimationId); | ||
this.requestAnimationId = null; | ||
} | ||
this.context.globalAlpha = 0.0; | ||
this.fadeloop(img); | ||
} | ||
}, { | ||
key: 'fadeloop', | ||
value: function fadeloop(img) { | ||
var _this3 = this; | ||
if (this.context.globalAlpha > 1) { | ||
this.requestAnimationId = null; | ||
return; | ||
} | ||
this.context.globalAlpha += 0.010; | ||
this.context.drawImage(img, 0, 0, this.canvas.width, this.canvas.height); | ||
this.requestAnimationId = requestAnimationFrame(function () { | ||
_this3.fadeloop(img); | ||
}); | ||
} | ||
}]); | ||
return LSViewer; | ||
}(); | ||
return LSViewer; | ||
}))); | ||
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.viewer=e()}(this,function(){"use strict";!function(){function t(t){this.value=t}function e(e){function n(t,e){return new Promise(function(n,o){var s={key:t,arg:e,resolve:n,reject:o,next:null};a?a=a.next=s:(r=a=s,i(t,e))})}function i(n,r){try{var a=e[n](r),s=a.value;s instanceof t?Promise.resolve(s.value).then(function(t){i("next",t)},function(t){i("throw",t)}):o(a.done?"return":"normal",a.value)}catch(t){o("throw",t)}}function o(t,e){switch(t){case"return":r.resolve({value:e,done:!0});break;case"throw":r.reject(e);break;default:r.resolve({value:e,done:!1})}(r=r.next)?i(r.key,r.arg):a=null}var r,a;this._invoke=n,"function"!=typeof e.return&&(this.return=void 0)}"function"==typeof Symbol&&Symbol.asyncIterator&&(e.prototype[Symbol.asyncIterator]=function(){return this}),e.prototype.next=function(t){return this._invoke("next",t)},e.prototype.throw=function(t){return this._invoke("throw",t)},e.prototype.return=function(t){return this._invoke("return",t)}}();var t=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")},e=function(){function t(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}return function(e,n,i){return n&&t(e.prototype,n),i&&t(e,i),e}}(),n=function(){function n(){t(this,n)}return e(n,null,[{key:"getAutoResolution",value:function(t){var e=t.offsetWidth,i=t.offsetHeight;if(0===e||0===i)return{width:0,height:0};var o=n.getStandardAspectRatio(e,i);if(e>i){var r=null;return r=e<=240*o?240*o:e<=360*o?360*o:e<=480*o?480*o:e<=720*o?720*o:1080*o,{width:Math.round(r),height:Math.round(r/o)}}var a=null;return a=i<=240?240:i<=360?360:i<=480?480:i<=720?720:1080,{width:Math.round(a*o),height:Math.round(a)}}},{key:"getStandardAspectRatio",value:function(t,e){var n=t/e;return n>4/3?n=16/9:n<=4/3&&(n=4/3),n}}]),n}();return function(){function i(e,n){var o=this;t(this,i),this.container=e,this.container.style.display="flex",this.container.style.overflow="hidden",this.canvas=document.createElement("canvas"),this.canvas.style.flex=1,this.canvas.style["object-fit"]="cover",this.canvas.style.width="100%",this.canvas.style.height="100%",this.container.appendChild(this.canvas),this.context=this.canvas.getContext("2d"),this.options=n,this.params=null,this.requestAnimationId=null,window.addEventListener("resize",function(){o.resize()}),this.resize()}return e(i,[{key:"resize",value:function(){this.resolution=n.getAutoResolution(this.container),this.canvas.width=this.resolution.width,this.canvas.height=this.resolution.height,this.load(this.params)}},{key:"load",value:function(t){var e=this;if(null!==t&&0!==this.resolution.width&&0!==this.resolution.height){this.params=t,t.width=this.resolution.width,t.height=this.resolution.height;var n=Object.keys(t).map(function(e){return e+"="+t[e]}).join("&"),i=this.options.webrender+"/ImageFromBookmark?"+n,o=new Image;o.addEventListener("load",function(){e.fadein(o)}),o.src=i}}},{key:"fadein",value:function(t){this.requestAnimationId&&(cancelAnimationFrame(this.requestAnimationId),this.requestAnimationId=null),this.context.globalAlpha=0,this.fadeloop(t)}},{key:"fadeloop",value:function(t){var e=this;if(this.context.globalAlpha>1)return void(this.requestAnimationId=null);this.context.globalAlpha+=.01,this.context.drawImage(t,0,0,this.canvas.width,this.canvas.height),this.requestAnimationId=requestAnimationFrame(function(){e.fadeloop(t)})}}]),i}()}); |
{ | ||
"name": "@lumiscaphe/viewer", | ||
"version": "0.0.2", | ||
"version": "0.0.3", | ||
"description": "Lumiscaphe 3D Viewer", | ||
@@ -9,3 +9,3 @@ "main": "index.js", | ||
"build": "rollup -c rollup.config.js", | ||
"dist": "set NODE_ENV=production && npm run build" | ||
"dist": "set NODE_ENV=production&&npm run build" | ||
}, | ||
@@ -17,9 +17,8 @@ "devDependencies": { | ||
"babel-preset-stage-3": "^6.24.1", | ||
"rollup": "0.50.0", | ||
"rollup": "^0.50.0", | ||
"rollup-plugin-babel": "^3.0.2", | ||
"rollup-plugin-commonjs": "^8.2.0", | ||
"rollup-plugin-eslint": "^4.0.0", | ||
"rollup-plugin-commonjs": "^8.2.4", | ||
"rollup-plugin-node-resolve": "^3.0.0", | ||
"rollup-plugin-uglify-es": "0.0.1" | ||
"rollup-plugin-uglify-es": "^0.0.1" | ||
} | ||
} |
No README
QualityPackage does not have a README. This may indicate a failed publish or a low quality package.
Found 1 instance in 1 package
9
3
1
17
4440
14