Skip to content

Commit

Permalink
Make codes for dialog to be more reuseable.
Browse files Browse the repository at this point in the history
  • Loading branch information
@alan-wu
alan-wu committed Mar 28, 2019
1 parent ca9fde7 commit 7d73632
Show file tree
Hide file tree
Showing 5 changed files with 92 additions and 139 deletions.
9 changes: 9 additions & 0 deletions src/ui/BaseDialog.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ require("../styles/dialog.css");

var BaseDialog = function() {
this.container = undefined;
this.module = undefined;
this.parent = undefined;
this.content = undefined;
this.datGui = undefined;
Expand All @@ -21,12 +22,20 @@ var BaseDialog = function() {
this.title = "Default";
}

BaseDialog.prototype.getModule = function() {
return this.module;
}

BaseDialog.prototype.close = function(myInstance) {
return function(event, ui) {
myInstance.container.dialog('destroy').remove();
for (var i = 0; i < myInstance.onCloseCallbacks.length; i++) {
myInstance.onCloseCallbacks[i]( this);
}
if (myInstance.destroyModuleOnClose) {
myInstance.module.destroy();
myInstance.module = undefined;
}
}
}

Expand Down
46 changes: 16 additions & 30 deletions src/ui/BodyViewerDialog.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,10 @@
var BodyViewerDialog = function(bodyViewerIn, parentIn) {
(require('./BaseDialog').BaseDialog).call(this);
this.parent = parentIn;
var bodyViewer = bodyViewerIn;
this.module = bodyViewerIn;
var systemGuiFolder = new Array();
var systemPartsGuiControls = new Array();
var _myInstance = this;

this.getModule = function() {
return bodyViewer;
}

//Array of settings of the body viewer gui controls.
var bodyControl = function() {
Expand All @@ -24,7 +20,7 @@ var BodyViewerDialog = function(bodyViewerIn, parentIn) {
var greenValue = parseInt(value[1]);
var blueValue = parseInt(value[2]);
var backgroundColourString = 'rgb(' + redValue + ',' + greenValue + ',' + blueValue + ')';
bodyViewer.changeBackgroundColour(backgroundColourString);
_myInstance.module.changeBackgroundColour(backgroundColourString);
}
}

Expand Down Expand Up @@ -54,7 +50,7 @@ var BodyViewerDialog = function(bodyViewerIn, parentIn) {
if (partName != "All" && systemPartsGuiControls[systemName].hasOwnProperty(partName)) {
if (systemPartsGuiControls[systemName][partName] != value) {
systemPartsGuiControls[systemName][partName] = value;
bodyViewer.changeBodyPartsVisibility(partName, systemName, value);
_myInstance.module.changeBodyPartsVisibility(partName, systemName, value);
}
}
}
Expand Down Expand Up @@ -84,7 +80,7 @@ var BodyViewerDialog = function(bodyViewerIn, parentIn) {

var bodyPartsVisibilityChanged = function(name, systemName) {
return function(value) {
bodyViewer.changeBodyPartsVisibility(name, systemName, value);
_myInstance.module.changeBodyPartsVisibility(name, systemName, value);
var isPartial = false;
if (value == false) {
systemPartsGuiControls[systemName].All = false;
Expand Down Expand Up @@ -137,15 +133,15 @@ var BodyViewerDialog = function(bodyViewerIn, parentIn) {
return function(event) {
event.preventDefault();
event.stopImmediatePropagation();
bodyViewer.setSelectedByGroupName(partName, true);
_myInstance.module.setSelectedByGroupName(partName, true);
}
}

var addPartToSystemControl = function(systemName, partName) {
var controller = systemGuiFolder[systemName].add(systemPartsGuiControls[systemName], partName);
var span = controller.__li.getElementsByTagName("span")[0];
controller.onChange(bodyPartsVisibilityChanged(partName, systemName));
controller.__li.onmouseover = function() {bodyViewer.setHighlightedByGroupName(partName, true);};
controller.__li.onmouseover = function() {_myInstance.module.setHighlightedByGroupName(partName, true);};
span.onclick = bodyPartNameClickedCallback(partName);
}

Expand Down Expand Up @@ -186,7 +182,7 @@ var BodyViewerDialog = function(bodyViewerIn, parentIn) {
* This method add all system folders to the dat.gui user interface.
*/
var addSystemFolders = function() {
var systemList = bodyViewer.getSystemList();
var systemList = _myInstance.module.getSystemList();
for (var i = 0; i < systemList.length; i++) {
var currentSystem = systemList[i];
systemGuiFolder[currentSystem] = _myInstance.datGui.addFolder(currentSystem);
Expand All @@ -210,7 +206,7 @@ var BodyViewerDialog = function(bodyViewerIn, parentIn) {
inputs[i].onclick = systemButtonPressCallback(inputs[i]);
}
var speciesSelected = _myInstance.container.find("#bodySpeciesSelect")[0];
speciesSelected.onchange = function() { bodyViewer.changeSpecies(speciesSelected.value) };
speciesSelected.onchange = function() { _myInstance.module.changeSpecies(speciesSelected.value) };
}

var initialiseBodyControlUI = function() {
Expand All @@ -220,22 +216,13 @@ var BodyViewerDialog = function(bodyViewerIn, parentIn) {
var controller = _myInstance.datGui.addColor(control, 'Background');
controller.onChange(bodyBackGroundChanged());
_myInstance.container.find("#bodyGui")[0].appendChild(_myInstance.datGui.domElement);
var resetViewButton = { 'Reset View':function(){ bodyViewer.resetView() }};
var viewAllButton = { 'View All':function(){ bodyViewer.viewAll() }};
var resetViewButton = { 'Reset View':function(){ _myInstance.module.resetView() }};
var viewAllButton = { 'View All':function(){ _myInstance.module.viewAll() }};
_myInstance.datGui.add(resetViewButton, 'Reset View');
_myInstance.datGui.add(viewAllButton, 'View All');
addSystemFolders();
bodyViewer.forEachPartInBody(systemPartAddedCallback());
bodyViewer.addSystemPartAddedCallback(systemPartAddedCallback());
}

var _bodyViewerDialogClose = function() {
return function(myDialog) {
if (_myInstance.destroyModuleOnClose) {
bodyViewer.destroy();
bodyViewer = undefined;
}
}
_myInstance.module.forEachPartInBody(systemPartAddedCallback());
_myInstance.module.addSystemPartAddedCallback(systemPartAddedCallback());
}

var bodyViewerChangedCallback = function() {
Expand All @@ -247,15 +234,14 @@ var BodyViewerDialog = function(bodyViewerIn, parentIn) {
}

var initialise = function() {
if (bodyViewer) {
if (_myInstance.module) {
_myInstance.create(require("../snippets/bodyViewer.html"));
var name = bodyViewer.getName();
var name = _myInstance.module.getName();
_myInstance.setTitle(name);
initialiseBodyControlUI();
var displayArea = _myInstance.container.find("#bodyDisplayArea")[0];
bodyViewer.initialiseRenderer(displayArea);
bodyViewer.addChangedCallback(bodyViewerChangedCallback());
_myInstance.onCloseCallbacks.push(_bodyViewerDialogClose());
_myInstance.module.initialiseRenderer(displayArea);
_myInstance.module.addChangedCallback(bodyViewerChangedCallback());
}
}

Expand Down
34 changes: 10 additions & 24 deletions src/ui/ModelViewerDialog.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
var ModelViewerDialog = function(modelPanelIn, parentIn) {
(require('./BaseDialog').BaseDialog).call(this);
this.parent = parentIn;
var modelPanel = modelPanelIn;
this.module = modelPanelIn;
var otherModelControls = undefined;
var modelControl = function() {
this.Background = [ 255, 255, 255 ]; // RGB array
Expand All @@ -21,20 +21,16 @@ var ModelViewerDialog = function(modelPanelIn, parentIn) {
_myInstance.container[0].style.backgroundColor = backgroundColourString;
}
}

this.getModule = function() {
return modelPanel;
}

var addUICallback = function() {
var callbackElement = _myInstance.container.find("#modelsControllerButton")[0];
callbackElement.onclick = function() { modelPanel.runModel() };
callbackElement.onclick = function() { _myInstance.module.runModel() };
callbackElement = _myInstance.container.find("#svgZoomOut")[0];
callbackElement.onclick = function() { modelPanel.zoomOut(0.2); };
callbackElement.onclick = function() { _myInstance.module.zoomOut(0.2); };
callbackElement = _myInstance.container.find("#svgZoomReset")[0];
callbackElement.onclick = function() { modelPanel.zoomReset(); };
callbackElement.onclick = function() { _myInstance.module.zoomReset(); };
callbackElement = _myInstance.container.find("#svgZoomIn")[0];
callbackElement.onclick = function() { modelPanel.zoomIn(0.2) };
callbackElement.onclick = function() { _myInstance.module.zoomIn(0.2) };
}

var initialiseModelControlUI = function() {
Expand All @@ -46,16 +42,7 @@ var ModelViewerDialog = function(modelPanelIn, parentIn) {
_myInstance.container.find("#modelGui")[0].appendChild(_myInstance.datGui.domElement);
otherModelControls = _myInstance.datGui.addFolder('Others');
}

var _modelViewerDialogClose = function() {
return function(myDialog) {
if (_myInstance.destroyModuleOnClose) {
modelPanel.destroy();
modelPanel = undefined;
}
}
}


var modelPanelChangedCallback = function() {
return function(module, change) {
if (change === require("../modules/BaseModule").MODULE_CHANGE.NAME_CHANGED) {
Expand All @@ -65,15 +52,14 @@ var ModelViewerDialog = function(modelPanelIn, parentIn) {
}

var initialise = function() {
if (modelPanel) {
if (_myInstance.module) {
_myInstance.create(require("../snippets/modelPanel.html"));
var name = modelPanel.getName();
var name = _myInstance.module.getName();
_myInstance.setTitle(name);
initialiseModelControlUI();
var svgElement = _myInstance.container.find("#testsvg")[0];
modelPanel.enableSVGController(svgElement);
modelPanel.addChangedCallback(modelPanelChangedCallback());
_myInstance.onCloseCallbacks.push(_modelViewerDialogClose());
_myInstance.module.enableSVGController(svgElement);
_myInstance.module.addChangedCallback(modelPanelChangedCallback());
}
}

Expand Down

0 comments on commit 7d73632

Please sign in to comment.