Source: utils/creategui.js
/**
* A utility class used by PlotBoilerplate: creategui.
* The PlotBoilerplate will try to use this for the initialization of the input GUI.
*
* Requires the label() polyfill for dat.gui.GUI.
*
* @author Ikaros Kappler
* @date 2020-03-30
* @modified 2020-04-03 Added empty default global object 'utils'. Added createGUI as an optional child.
* @version 1.0.1
**/
var utils = globalThis.utils = globalThis.utils || {};
/**
* Creates a control GUI (a dat.gui instance) for this
* plot boilerplate instance.
*
* Requires the label() polyfill for dat.gui.GUI.
*
* @method createGUI
* @memberof utils
* @return {dat.gui.GUI}
**/
globalThis.utils.createGUI = function(pb) {
var dummy = {
resetOffset : function() {
var viewport = pb.viewport();
pb.setOffset( { x: (viewport.width/2.0)*pb.draw.scale.x,
y: (viewport.height/2.0)*pb.draw.scale.y
} );
pb.redraw();
},
resetScale : function() {
pb.setZoom( 1.0, 1.0, new Vertex(0,0) );
pb.redraw();
}
};
var _self = pb;
var gui = new dat.gui.GUI();
gui.remember(pb.config);
var fold0 = gui.addFolder('Editor settings');
var fold00 = fold0.addFolder('Canvas size');
fold00.add(pb.config, 'fullSize').onChange( function() { _self.resizeCanvas(); } ).title("Toggles the fullpage mode.").listen();
fold00.add(pb.config, 'fitToParent').onChange( function() { _self.resizeCanvas(); } ).title("Toggles the fit-to-parent mode to fit to parent container (overrides fullsize).").listen();
fold00.add(pb.config, 'defaultCanvasWidth').min(1).step(10).onChange( function() { _self.resizeCanvas(); } ).title("Specifies the fallback width.");
fold00.add(pb.config, 'defaultCanvasHeight').min(1).step(10).onChange( function() { _self.resizeCanvas(); } ).title("Specifies the fallback height.");
fold00.add(pb.config, 'canvasWidthFactor').min(0.1).step(0.1).max(10).onChange( function() { _self.resizeCanvas(); } ).title("Specifies a factor for the current width.").listen();
fold00.add(pb.config, 'canvasHeightFactor').min(0.1).step(0.1).max(10).onChange( function() { _self.resizeCanvas(); } ).title("Specifies a factor for the current height.").listen();
fold00.add(pb.config, 'cssScaleX').min(0.01).step(0.01).max(1.0).onChange( function() { if(_self.config.cssUniformScale) _self.config.cssScaleY = _self.config.cssScaleX; _self.updateCSSscale(); } ).title("Specifies the visual x scale (CSS).").listen();
fold00.add(pb.config, 'cssScaleY').min(0.01).step(0.01).max(1.0).onChange( function() { if(_self.config.cssUniformScale) _self.config.cssScaleX = _self.config.cssScaleY; _self.updateCSSscale(); } ).title("Specifies the visual y scale (CSS).").listen();
fold00.add(pb.config, 'cssUniformScale').onChange( function() { if(_self.config.cssUniformScale) _self.config.cssScaleY = _self.config.cssScaleX; _self.updateCSSscale(); } ).title("CSS uniform scale (x-scale equlsa y-scale).");
fold00.add(pb.config, 'setToRetina').name('Set to highres fullsize').title('Set canvas to high-res retina resoultion (x2).');
var fold01 = fold0.addFolder('Draw settings');
fold01.add(pb.drawConfig, 'drawBezierHandlePoints').onChange( function() { _self.redraw(); } ).title("Draw Bézier handle points.");
fold01.add(pb.drawConfig, 'drawBezierHandleLines').onChange( function() { _self.redraw(); } ).title("Draw Bézier handle lines.");
fold01.add(pb.drawConfig, 'drawHandlePoints').onChange( function() { _self.redraw(); } ).title("Draw handle points (overrides all other settings).");
fold01.add(pb.drawConfig, 'drawHandleLines').onChange( function() { _self.redraw(); } ).title("Draw handle lines in general (overrides all other settings).");
fold01.add(pb.drawConfig, 'drawVertices').onChange( function() { _self.redraw(); } ).title("Draw vertices in general.");
const fold0100 = fold01.addFolder('Colors and Lines');
const _addDrawConfigElement = function( fold, basePath, conf ) {
for( var i in conf ) {
if( typeof conf[i] == 'object' ) {
if( conf[i].hasOwnProperty('color') )
fold.addColor(conf[i], 'color').onChange( function() { _self.redraw(); } ).name(basePath+i+'.color').title(basePath+i+'.color').listen();
if( conf[i].hasOwnProperty('lineWidth') )
fold.add(conf[i], 'lineWidth').min(1).max(10).step(1).onChange( function() { _self.redraw(); } ).name(basePath+i+'.lineWidth').title(basePath+i+'.lineWidth').listen();
for( var e in conf[i] ) {
if( conf[i].hasOwnProperty(e) && typeof conf[i][e] == 'object' ) { // console.log(e);
_addDrawConfigElement( fold, (basePath!=''?basePath+'.':'')+i+'.'+e, conf[i] );
}
}
}
}
};
_addDrawConfigElement(fold0100, '', pb.drawConfig);
fold0.add(pb.config, 'scaleX').title("Scale x.").min(0.01).max(10.0).step(0.01).onChange( function() { _self.draw.scale.x = _self.fill.scale.x = _self.config.scaleX; _self.redraw(); } ).listen();
fold0.add(pb.config, 'scaleY').title("Scale y.").min(0.01).max(10.0).step(0.01).onChange( function() { _self.draw.scale.y = _self.fill.scale.y = _self.config.scaleY; _self.redraw(); } ).listen();
fold0.add(pb.config, 'offsetX').title("Offset x.").step(10.0).onChange( function() { _self.draw.offset.x = _self.fill.offset.x = _self.config.offsetX; _self.redraw(); } ).listen();
fold0.add(pb.config, 'offsetY').title("Offset y.").step(10.0).onChange( function() { _self.draw.offset.y = _self.fill.offset.y = _self.config.offsetY; _self.redraw(); } ).listen();
fold0.add(pb.config, 'rasterGrid').title("Draw a fine raster instead a full grid.").onChange( function() { _self.redraw(); } ).listen();
fold0.add(pb.config, 'redrawOnResize').title("Automatically redraw the data if window or canvas is resized.").listen();
fold0.addColor(pb.config, 'backgroundColor').onChange( function() { _self.redraw(); } ).title("Choose a background color.");
fold0.add(dummy, 'resetOffset').title("Reset the draw offset to (0,0).");
fold0.add(dummy, 'resetScale').title("Reset the draw scale to (1.,1.).");
if( pb.config.enableSVGExport ) {
var fold1 = gui.addFolder('Export');
fold1.add(pb.config, 'saveFile').name('Save a file').title("Save as SVG.");
}
return gui;
}; // END creategui