„src/Madeleine.js“ ändern

Adjustments to have full-width rendering within Gitea

src/Madeleine.js

@@ -2,15 +2,15 @@
  * @author    Junho Jin[junho.jin@kaist.ac.kr] | https://github.com/JinJunho
  * @version   1.0.0
  *
- * [Project] Madeleine.js, Pure JavaScript STL Parser & Renderer. 
+ * [Project] Madeleine.js, Pure JavaScript STL Parser & Renderer.
  *
- * [Description] Madeleine.js constists of three part: DataReader, Madeleine and Lily. 
+ * [Description] Madeleine.js constists of three part: DataReader, Madeleine and Lily.
  * DataReader is a helper function to read binary data, which is a customized version
- * of DataView. Lily is a helper Object that manages created Madeleines and logs 
+ * of DataView. Lily is a helper Object that manages created Madeleines and logs
  * messages to console. Madeleine is the part that deals with actual parsing, rendering
  * and showing your stl files. Customize them however you want. This project is under
  * MIT License (see the LICENSE file for details). You are allowed to do anything with
- * this code, as long as you leave the attribution (MUST!). It will be glad if you 
+ * this code, as long as you leave the attribution (MUST!). It will be glad if you
  * contact me for any bug you found or interesting ideas to do with Madeleine.js.
  * I'm willing to co-work with you!
  */
@@ -27,8 +27,9 @@
 
     var OBJECT_MATERIAL   = "matt";
     var OBJECT_STATUS     = false;
-    var OBJECT_BACKGROUND = "DADADA";
+    //var OBJECT_BACKGROUND = "DADADA";
-    var OBJECT_COLOR      = "FF9900";
+    var OBJECT_BACKGROUND = "2E323E";
+    var OBJECT_COLOR      = "00A0E1";
 
     var CAMERA_SIGHT     = 45;
     var CAMERA_NEARFIELD = 1;
@@ -37,14 +38,14 @@
     var VIEWER_THEME  = "default";
     var VIEWER_PREFIX = "mad-";
     var VIEWER_CREATE = true;
-    var VIEWER_HEIGHT = 400;
+    var VIEWER_HEIGHT = 625; //400
-    var VIEWER_WIDTH  = 640;
+    var VIEWER_WIDTH  = 1000; //640
 
     var USER_ROTATE_SENSITIVITY = 0.005;
     var USER_ZOOM_SENSITIVITY = 100;
     var SCROLL_FACTOR = 10;
-    
+
-    // Necessary option check 
+    // Necessary option check
     if (!document.getElementById(options.target)) {
       console.log("MADELEINE[ERR] Target must be a valid DOM Element.");
       return null;
@@ -97,7 +98,7 @@
       this.type       = options.type ? options.type : 'file';
       this.container  = document.getElementById(this.__containerID);
       this.relPath    = options.path ? options.path + (options.path[options.path.length-1] == "/" ? "" : "/") : "./";
-      // User configuration 
+      // User configuration
       this.options = Lily.extend(true, {}, { // Default option
         material        : OBJECT_MATERIAL,
         showStatus      : OBJECT_STATUS,
@@ -148,7 +149,7 @@
           // Top-left corner is (0, 0)
           // e.clientX grows as mouse goes down
           // e.clientY grows as mouse goes right
-          
+
           //IMPROVED move object on wheel drag and rotate with left mouse drag
           if (e.which == 1) {//left button mouse
               scope.rotateObjectZ(scope.mouseX - e.clientX);
@@ -220,19 +221,20 @@
 
     // Initialize rendering
     Madeleine.prototype.init = function() {
-      
+
       //IMPROVE callbackstart process i.e.: show another loader in other scope
       if (this.options.callbackstart) this.options.callbackstart();
-      
+
-      // Get file name 
+      // Get file name
       this.__info.name = (typeof this.data == "string") ? this.data.split("/").slice(-1)[0] : this.data.name;
 
       // If create new viewer, set canvas size to the viewer.
-      if (this.options.viewer.create) {
+        if (this.options.viewer.create) {
-        this.__height = this.options.viewer.height;
+          this.__height = this.options.viewer.height;
-        this.__width  = this.options.viewer.width;
+          this.__width  = this.options.viewer.width;
-      // Get target width and height, otherwise.
+        // Get target width and height, otherwise.
-      } else if (document.defaultView && document.defaultView.getComputedStyle) {
+      } else
+      if (document.defaultView && document.defaultView.getComputedStyle) {
         this.__height = parseFloat(document.defaultView.getComputedStyle(this.container,null).getPropertyValue('height'));
         this.__width  = parseFloat(document.defaultView.getComputedStyle(this.container,null).getPropertyValue('width'));
       } else {
@@ -251,7 +253,7 @@
         this.__sizeRatio,
         this.options.camera.near,
         this.options.camera.far
-      ); 
+      );
 
       // Set user's point-of-view and default camera position
       this.__camera.position.set(0, 0, 0);
@@ -280,7 +282,7 @@
       // Wait until data is fully loaded
       var queued = (function(scope) {
         return function() {
-          // When data ready, parse and render it. 
+          // When data ready, parse and render it.
           scope.run(scope.relPath + "lib/MadeleineLoader.js", {
             arrbuf: scope.__arrayBuffer,
             rawtext: scope.__rawText
@@ -327,12 +329,12 @@
 
             //IMPROVED callback end i.e: hide loading of another scope
             if (scope.options.callbackend) scope.options.callbackend();
-            
+
           });
         };
       })(this);
 
-      // Check input type and get STL Binary data 
+      // Check input type and get STL Binary data
       switch (this.type) {
         case "upload":
           this.getDataFromBlob(this.data, queued);break;
@@ -376,7 +378,7 @@
       }
     };
 
-    // Get arrayBuffer from external file 
+    // Get arrayBuffer from external file
     Madeleine.prototype.getDataFromUrl = function(url, queuedWork, type) {
       var scope = this;
       var getArrayBuffer = function() {
@@ -495,7 +497,7 @@
         new THREE.WebGLRenderer({
           preserveDrawingBuffer: true,
           alpha: true
-        }) : new THREE.CanvasRenderer(); 
+        }) : new THREE.CanvasRenderer();
       // attach canvas to viewer
       this.__canvas = this.__renderer.domElement;
       this.__viewer.appendChild(this.__canvas);
@@ -517,12 +519,14 @@
         this.__viewer.id = this.options.viewer.prefix + this.__uniqueID;
 
         // Force viewer size
-        this.container.style["max-height"] = this.__height+"px";
+        //this.container.style["max-height"] = this.__height+"px";
-        this.container.style["min-height"] = this.__height+"px";
+        //this.container.style["min-height"] = this.__height+"px";
-        this.__viewer.style["max-height"] = this.__height+"px";
+        //this.__viewer.style["max-height"] = this.__height+"px";
-        this.__viewer.style["min-height"] = this.__height+"px";
+        //this.__viewer.style["min-height"] = this.__height+"px";
-        this.__viewer.style["max-width"] = this.__width+"px";
+        //this.__viewer.style["max-width"] = this.__width+"px";
-        this.__viewer.style["min-width"] = this.__width+"px";
+        this.__viewer.style["max-width"] = "100%";
+        //this.__viewer.style["min-width"] = this.__width+"px";
+        this.__viewer.style["min-width"] = "50%";
         this.__viewer.style.height = this.__height;
         this.__viewer.style.width = this.__width;
 
@@ -550,7 +554,8 @@
         // Viewer iconGrid
         var iconGrid = document.createElement("div");
         iconGrid.style.cssText += "background:transparent;position:absolute;padding:15px 10px;";
-        iconGrid.style.cssText += "height:50px;width:"+this.__width+"px;top:0;overflow:hidden;";
+        //iconGrid.style.cssText += "height:50px;width:"+this.__width+"px;top:0;overflow:hidden;";
+        iconGrid.style.cssText += "height:50px;width:100%;top:0;overflow:hidden;";
         iconGrid.className += "box";
 
         var logo = document.createElement("div");
@@ -579,7 +584,8 @@
         var player = document.createElement("div");
 
         rotator.style.cssText += "background:transparent;position:absolute;padding:15px 10px;right:0;";
-        rotator.style.cssText += "height:50px;width:"+this.__width+"px;top:0;overflow:hidden;";
+        //rotator.style.cssText += "height:50px;width:"+this.__width+"px;top:0;overflow:hidden;";
+        rotator.style.cssText += "height:50px;width:100%;top:0;overflow:hidden;";
         rotator.style.cssText += "margin-top:"+(this.__height-30)+"px;";
 
         player.className += "icon-clickable pull-right icon-mad-stop";
@@ -596,7 +602,7 @@
         var left = document.createElement("div");
         var down = document.createElement("div");
         var up = document.createElement("div");
-        
+
         iconGrid.appendChild(fullscreen);
         //iconGrid.appendChild(download);
         iconGrid.appendChild(capture);
@@ -626,7 +632,7 @@
       // Adapt theme
       switch (theme) {
         case "dark":
-          this.__viewer.style.background  = "#000000"; 
+          this.__viewer.style.background  = "#000000";
           this.options.objectColor = "FFD300";
           break;
         case "lime":
@@ -691,7 +697,7 @@
                 "background: -o-radial-gradient(center, ellipse cover, BRIGHT POS1%, DARK POS2%);" +
                 "background: -ms-radial-gradient(center, ellipse cover, BRIGHT POS1%, DARK POS2%);" +
                 "background: radial-gradient(ellipse at center, BRIGHT POS1%, DARK POS2%);" +
-                "filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='BRIGHT', endColorstr='DARK',GradientType=1)"; 
+                "filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='BRIGHT', endColorstr='DARK',GradientType=1)";
 
       if (colors.dark) {
         darker = this.getHexString(colors.dark);
@@ -711,7 +717,7 @@
     Madeleine.prototype.getHexColor = function() {
       var code = arguments.length == 3 ? [arguments[0], arguments[1], arguments[2]] : arguments[0];
       var color = this.getHexString(code);
-      return parseInt(color.replace(/\#/g, ''), 16); 
+      return parseInt(color.replace(/\#/g, ''), 16);
     };
 
     // Get Hex-style string (#XXXXXX format)
@@ -777,7 +783,7 @@
              (adjustedB.toString(16)).substr(1);
     };
 
-    // Add new background worker 
+    // Add new background worker
     Madeleine.prototype.run = function(path, luggage, onload) {
       var progressBar = document.getElementById("progressBar-"+this.__uniqueID);
       var worker = new WorkerFacade(path);
@@ -794,7 +800,8 @@
             if (CONVERT_TO_BINARY) scope.run(scope.relPath + "lib/MadeleineConverter.js", result.data, function(result) { scope.__converted = result });
             break;
           case "progress":
-            progressBar.style.width = (scope.__width * result.data / 100) + "px";
+            //progressBar.style.width = (scope.__width * result.data / 100) + "px";
+            progressBar.style.width = (result.data) + "%";
             if (result.data == 100) {
               progressBar.style["-webkit-opacity"] = 0;
               progressBar.style["-moz-opacity"] = 0;
@@ -862,7 +869,7 @@
       this.__rotating && this.rotateObjectZ(-1);
       this.__renderer.render(this.__scene, this.__camera);
     };
-    
+
     // Move object in xy //IMPROVED
     let oldX = 0, oldY = 0;
     Madeleine.prototype.moveObject = function ($event, delta) {
@@ -938,9 +945,9 @@
       Lily.bind(this.container, "mousewheel", this.scrollHandler);
       Lily.bind(this.container, "DOMMouseScroll", this.scrollHandler);
       Lily.bind(this.container, "gesturechange", this.gestureHandler);
-    }; 
+    };
 
-    // Enable Madeline Viewer to be controlled by mouse movement 
+    // Enable Madeline Viewer to be controlled by mouse movement
     Madeleine.prototype.enableUserInteraction = function() {
       // block right click action
       Lily.bind(this.container, "contextmenu", this.rightClickHandler);
@@ -953,9 +960,9 @@
       Lily.bind(this.container, "touchstart", this.touchStartHandler);
       Lily.bind(this.container, "touchmove", this.touchMoveHandler);
       Lily.bind(this.container, "touchend", this.touchEndHandler);
-    }; 
+    };
 
-    // Disable Madeline Viewer to be controlled by mouse movement 
+    // Disable Madeline Viewer to be controlled by mouse movement
     Madeleine.prototype.disableUserInteraction = function() {
       if (!this.__movable) return;
       // attach event handler
@@ -966,9 +973,9 @@
       Lily.remove(this.container, "touchstart", this.touchStartHandler);
       Lily.remove(this.container, "touchmove", this.touchMoveHandler);
       Lily.remove(this.container, "touchend", this.touchEndHandler);
-    }; 
+    };
 
-    // Enable first-person viewer mode 
+    // Enable first-person viewer mode
     Madeleine.prototype.enableFirstPersonViewerMode = function() {
       this.disableUserInteraction();
       Lily.bind(document, "keypress", this.firstPersonHandler);
@@ -977,18 +984,18 @@
       this.__rotating = false;
       this.__zoomable = false;
       this.__movable = false;
-    }; 
+    };
 
-    // Disable first-person viewer mode 
+    // Disable first-person viewer mode
     Madeleine.prototype.disableFirstPersonViewerMode = function() {
       this.enableUserInteraction();
       this.__firstPerson = false;
       this.__rotating = true;
       this.__zoomable = true;
       this.__movable = true;
-    }; 
+    };
 
-    // Adjust camera zoom in/out 
+    // Adjust camera zoom in/out
     Madeleine.prototype.cameraZoom = function() {
       if (!this.__zoomable) return;
       else {
@@ -1026,7 +1033,7 @@
       this.__status = null;
     };
 
-    // Adjust material, camera settings and sensitivities to have proper values 
+    // Adjust material, camera settings and sensitivities to have proper values
     Madeleine.prototype.adjustUserConfiguration = function() {
       this.adjustRotateSensitivity();
       this.adjustZoomSensitivity();
@@ -1034,14 +1041,14 @@
       this.checkMaterial();
     };
 
-    // Check material 
+    // Check material
     Madeleine.prototype.checkMaterial = function() {
       if (this.options.material !== "skin" || this.options.material !== "wire") {
         this.options.material !== "skin";
       }
     };
 
-    // Adjust camera settings to fit into proper range 
+    // Adjust camera settings to fit into proper range
     Madeleine.prototype.adjustFocalPoint = function() {
       var sight = this.options.camera.sight;
       var near = this.options.camera.near;
@@ -1055,7 +1062,7 @@
       else this.options.camera.far = CAMERA_FARFIELD;
     };
 
-    // Adjust zoom sensitivity to fit into proper range 
+    // Adjust zoom sensitivity to fit into proper range
     Madeleine.prototype.adjustZoomSensitivity = function() {
       var intensity = this.options.zoomSensitivity;
       var visibleField = this.options.camera.far - this.options.camera.near;
@@ -1064,7 +1071,7 @@
       else this.options.zoomSensitivity = visibleField/1000;
     };
 
-    // Adjust rotate sensitivity to fit into proper range 
+    // Adjust rotate sensitivity to fit into proper range
     Madeleine.prototype.adjustRotateSensitivity = function(intensity) {
       var intensity = this.options.rotateSensitivity;
 
@@ -1096,7 +1103,7 @@
       directionalLight.shadowBias = -0.005;
       directionalLight.shadowDarkness = 0.15;
     };
-    
+
     //Set position
     Madeleine.prototype.setXY = function (X, Y) {//IMPROVED
         this.__object.position.setY(Y);
@@ -1188,7 +1195,7 @@
         hasOwn = Object.prototype.hasOwnProperty,
         push = Array.prototype.push,
         slice = Array.prototype.slice,
-        trim = String.prototype.trim, 
+        trim = String.prototype.trim,
         indexOf = Array.prototype.indexOf,
         class2type = {"[object Boolean]": "boolean","[object Number]": "number","[object String]": "string","[object Function]": "function",
                       "[object Array]": "array","[object Date]": "date","[object RegExp]": "regexp","[object Object]": "object"},
@@ -1284,13 +1291,13 @@
       return this.sisters[index];
     };
 
-    return new Lily(); 
+    return new Lily();
 
   })();
 
 })();
 
-/* A facade for the Web Worker API that fakes it in case it's missing. 
+/* A facade for the Web Worker API that fakes it in case it's missing.
  * Good when web workers aren't supported in the browser, but it's still fast enough,
  * so execution doesn't hang too badly (e.g. Opera 10.5).
  * By Stefan Wehrmeyer, licensed under MIT
@@ -1333,12 +1340,12 @@ if(!!window.Worker){
         }
       };
       document.body.appendChild(scr);
-      
+
       var binaryscr = document.createElement("SCRIPT");
       binaryscr.src = thingiurlbase + '/binaryReader.js';
       binaryscr.type = "text/javascript";
       document.body.appendChild(binaryscr);
-      
+
       return theworker;
     };
     that.fake = true;