Merge pull request #182 from remcoder/fix/stats-counter-position

Fix/stats counter position

Author: remcoder

demo/index.html

@@ -27,10 +27,10 @@
 
   <div class="dnd">☝️ Drop a gcode file here to view it</div>
   <div class="version-box">
-
     <script type="text/javascript" src="https://cdnjs.buymeacoffee.com/1.0.0/button.prod.min.js" data-name="bmc-button" data-slug="remcoder" data-color="#303030" data-emoji=""  data-font="Lato" data-text="Buy me a coffee" data-outline-color="#ffffff" data-font-color="#ffffff" data-coffee-color="#FFDD00" ></script>
-</div>
+  </div>
   <div class="sidebar">
+   <div class="scroll-container">
     <div>
       <h1>GCode Preview</h1>
       Presets:
@@ -214,6 +214,7 @@ <h1>GCode Preview</h1>
           </a>
       </section>
     </div>
+   </div>
   </div>
 
   <!-- <script src="js/canvas2image.js"></script> -->

demo/js/demo.js

@@ -160,7 +160,14 @@ export function initDemo() {
     initialCameraPosition: [180, 150, 300],
     backgroundColor: initialBackgroundColor,
     lineHeight: 0.3,
-    devMode: true
+    devMode: {
+      camera: true,
+      renderer: true,
+      parser: true,
+      buildVolume: true,
+      devHelpers: true,
+      statsContainer: document.querySelector('.sidebar')
+    }
   }));
 
   backgroundColor.value = initialBackgroundColor;

demo/style.css

@@ -33,15 +33,20 @@ body {
   left: 0;
   top: 0;
   bottom: 0;
-  padding: 10px;
   line-height: 25px;
   transform: translateZ(0);
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   transform: translateZ(0);
+}
+
+.scroll-container {
+  padding: 10px;
+
   overflow-y: scroll;
   overflow-x: hidden;
+  height: 100%;
 }
 
 .description {
@@ -183,3 +188,9 @@ output {
   position: relative;
   bottom: 2px;
 }
+
+.stats {
+  position: absolute !important;
+  right: -80px !important;
+  left: unset !important;
+}

src/dev-gui.ts

@@ -6,6 +6,7 @@ export type DevModeOptions = {
   parser?: boolean | false;
   buildVolume?: boolean | false;
   devHelpers?: boolean | false;
+  statsContainer?: HTMLElement | undefined;
 };
 
 class DevGUI {
@@ -56,7 +57,6 @@ class DevGUI {
 
   loadOpenFolders(): void {
     this.openFolders = JSON.parse(localStorage.getItem('dev-gui-open') || '{}').open || [];
-    console.log(this.openFolders);
   }
 
   saveOpenFolders(): void {

src/webgl-preview.ts

@@ -153,10 +153,11 @@ export class WebGLPreview {
   private _toolColors: Record<number, Color> = {};
 
   // debug
-  private devMode?: boolean | DevModeOptions = true;
+  private devMode?: boolean | DevModeOptions = false;
   private _lastRenderTime = 0;
   private _wireframe = false;
-  private stats: Stats = new Stats();
+  private stats?: Stats;
+  private statsContainer?: HTMLElement;
   private devGui?: DevGUI;
 
   constructor(opts: GCodePreviewOptions) {
@@ -181,6 +182,7 @@ export class WebGLPreview {
     this.renderTubes = opts.renderTubes ?? this.renderTubes;
     this.extrusionWidth = opts.extrusionWidth ?? this.extrusionWidth;
     this.devMode = opts.devMode ?? this.devMode;
+    this.stats = this.devMode ? new Stats() : undefined;
 
     if (opts.extrusionColor !== undefined) {
       this.extrusionColor = opts.extrusionColor;
@@ -245,10 +247,7 @@ export class WebGLPreview {
 
     if (opts.allowDragNDrop) this._enableDropHandler();
 
-    if (this.devMode) {
-      document.body.appendChild(this.stats.dom);
-      this.initGui();
-    }
+    this.initStats();
   }
 
   get extrusionColor(): Color | Color[] {
@@ -857,6 +856,17 @@ export class WebGLPreview {
       this.devGui = new DevGUI(this, this.devMode);
     }
   }
+
+  private initStats() {
+    if (this.stats) {
+      if (typeof this.devMode === 'object') {
+        this.statsContainer = this.devMode.statsContainer;
+      }
+      (this.statsContainer ?? document.body).appendChild(this.stats.dom);
+      this.stats.dom.classList.add('stats');
+      this.initGui();
+    }
+  }
 }
 
 function decode(uint8array: Uint8Array) {