Parametrizaciones de opciones para el visor 3D, regex de parseo line3D

Frontend Angular 4/src/app/layout/plotter/graph3D/graph3D.component.html

@@ -175,8 +175,12 @@
 
 					<input 
 						type="number" 
-						style="width: 55px;"
 						class="form-control form-control-sm" 
+						[(ngModel)]="graphProps.quality"
+						[max]="99"
+						[min]="2" 
+						(change)="onChangeQuality()"
+						style="width: 55px;"
 					/>
 				</div>
 			</div>

Frontend Angular 4/src/app/layout/plotter/graph3D/graph3D.component.ts

 import { Component, OnInit, ViewChild, ElementRef, NgZone } from '@angular/core';
 import * as graph3DLib from 'graph3d';
 import { GHCIService } from '../../../shared/services/ghci.service';
-import { formatJSON, AnimationProps, Zoom3DType, GraphProps, Default_GraphProps } from './graph3D.helper';
+import { formatJSON, AnimationProps, Zoom3DType, GraphProps, Default_GraphProps, debounce } from './graph3D.helper';
+import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
 
 @Component({
   selector: 'graph3d-component',
@@ -104,12 +105,23 @@ export class Graph3DComponent implements OnInit {
     graph3DLib.showAxes(this.graphProps.showAxes);
   }
 
+  handleAxesRangeDebounced = debounce(function () {
+    setTimeout(() =>
+      graph3DLib.changeAxesSize(this.graphProps.range)
+    );
+  }, 500);
+  
   public onChangeAxesSize = (v, event) => {
     let value = this.graphProps.range[v];
 
     const min = parseInt(event.target.min);
     const max = parseInt(event.target.max);
 
+    if (value == null) {
+      value = v.search('Min') ? min : max;
+      this.graphProps.range[v] = value;
+    }
+
     if (value < min) {
       this.graphProps.range[v] = min;
     } 
@@ -117,8 +129,21 @@ export class Graph3DComponent implements OnInit {
     if (value > max) {
       this.graphProps.range[v] = max;
     }
+    this.handleAxesRangeDebounced();
+    //graph3DLib.changeAxesSize(this.graphProps.range)
+  }
 
-    graph3DLib.changeAxesSize(this.graphProps.range)
+  public onChangeQuality = () => {
+    const value = this.graphProps.quality;
+    
+    if (value == null || value <= 1) {
+      this.graphProps.quality = 30;
+    } 
+    else {
+      this.graphProps.quality = value;
+    }
+
+    graph3DLib.changeOptions({quality: value});
   }
 
   public zoomIn = () => {

Frontend Angular 4/src/app/layout/plotter/graph3D/graph3D.helper.ts

 export function formatJSON(jsonString: string) : string {
 	const regexRot = /\"rot\"\:\((\d*.\d*),(\d*.\d*),(\d*.\d*)\)/g;
+	const regexPts = /\"pts\"\:\[\((\-?\d*.\d*),(\-?\d*.\d*),(\-?\d*.\d*)\),\((\-?\d*.\d*),(\-?\d*.\d*),(\-?\d*.\d*)\)\]/g;
 
-	return jsonString.replace(
+	return jsonString
+		.replace(
 			regexRot, (match, x, y, z) => {
 				return `"rot": { "x": ${x}, "y": ${y}, "z": ${z} }`
 			}
 		)
+		.replace(
+			regexPts, (match, x1, y1, z1, x2, y2, z2) => {
+				return `"pts": [{ "x": ${x1}, "y": ${y1}, "z": ${z1} },{ "x": ${x2}, "y": ${y2}, "z": ${z2} }]`
+			}
+		)
 }
 
 
@@ -26,6 +33,7 @@ export enum Zoom3DType {
 export interface GraphProps {
 	zoomType?: Zoom3DType,
 	showAxes?: boolean,
+	quality?: number,
 	range: {
 		xMin?: number,
 		xMax?: number,
@@ -39,6 +47,7 @@ export interface GraphProps {
 export const Default_GraphProps : GraphProps = {
 	zoomType: Zoom3DType.Normal,
 	showAxes: true,
+	quality: 30,
 	range: {
 		xMin: -10,
 		xMax: 10,
@@ -49,3 +58,14 @@ export const Default_GraphProps : GraphProps = {
 	}
 }
 
+export function debounce(fn, delay) {
+  var timer = null;
+  return function () {
+    var context = this, args = arguments;
+    clearTimeout(timer);
+    timer = setTimeout(function () {
+      fn.apply(context, args);
+    }, delay);
+  };
+}
+