Babylon.js/Playground/js/pbt.js

// jsEditor Manipulation
var PBT = new Object();

PBT.decorationStyles = new Array();
PBT.decorations = new Array();
PBT.ranges = new Array();

PBT.prototype.clearDecorLines = function(lineRanges) {
    this.decorationStyles = [];
    this.decorations = [];
    
    for(var i = 0; i < lineRanges.length; i +=2) {          
        this.decorationStyles.push({ range: new monaco.Range(parseInt(lineRanges[i]),1,parseInt(lineRanges[i + 1]),1), options: { isWholeLine: true, linesDecorationsClassName: 'myLinethis.decorationOff' }});
        this.decorationStyles.push({ range: new monaco.Range(parseInt(lineRanges[i]),1,parseInt(lineRanges[i + 1]),1), options: { isWholeLine: true, className: 'code-back-transparent' }});
        this.decorationStyles.push({ range: new monaco.Range(parseInt(lineRanges[i]),1,parseInt(lineRanges[i + 1]),1), options: { isWholeLine: true, inlineClassName: 'code-transparent' }});
    }

    this.decorations = jsEditor.deltaDecorations.decorations(this.decorations, this.decorationStyles);
}

PBT.prototype.fadeLines = function(lineRanges) {
    this.decorationStyles = [];
    this.decorations = [];
    
    for(var i = 0; i < lineRanges.length; i +=2) {          
        this.decorationStyles.push({ range: new monaco.Range(parseInt(lineRanges[i]),1,parseInt(lineRanges[i + 1]),1), options: { isWholeLine: true, inlineClassName: 'code-transparent' }});
    }

    this.decorations = jsEditor.deltaDecorations.decorations(this.decorations, this.decorationStyles);
}

PBT.prototype.darkenLines = function(lineRanges) {
    this.decorationStyles = [];
    this.decorations = [];
    
    for(var i = 0; i < lineRanges.length; i +=2) {          
        this.decorationStyles.push({ range: new monaco.Range(parseInt(lineRanges[i]),1,parseInt(lineRanges[i + 1]),1), options: { isWholeLine: true, inlineClassName: 'code-highlight' }});
    }

    this.decorations = jsEditor.deltaDecorations.decorations(this.decorations, this.decorationStyles);
}

PBT.prototype.setDecorLines = function (lineRanges) {
    this.decorationStyles = [];
    this.decorations = [];
    
    for(var i = 0; i < lineRanges.length; i +=2) {          
        this.decorationStyles.push({ range: new monaco.Range(parseInt(lineRanges[i]),1,parseInt(lineRanges[i + 1]),1), options: { isWholeLine: true, linesDecorationsClassName: 'myLinethis.decoration' }});
        this.decorationStyles.push({ range: new monaco.Range(parseInt(lineRanges[i]),1,parseInt(lineRanges[i + 1]),1), options: { isWholeLine: true, className: 'code-back-highlight' }});
        this.decorationStyles.push({ range: new monaco.Range(parseInt(lineRanges[i]),1,parseInt(lineRanges[i + 1]),1), options: { isWholeLine: true, inlineClassName: 'code-highlight' }});
    }

    this.decorations = jsEditor.deltaDecorations.decorations(this.decorations, this.decorationStyles);
}

PBT.prototype.replaceLines = function(lineRange, text) {   
    jsEditor.executeEdits("", [
        { range: new monaco.Range(parseInt(lineRange[0]), 1, parseInt(lineRange[1]), 100000), text: text}
   ]);
}

PBT.prototype.hideLines = function(lineRanges) {
    PBT.ranges = [];
    for(var i = 0; i < lineRanges.length; i +=2) {
        PBT.ranges.push(new monaco.Range(parseInt(lineRanges[i]), 1, parseInt(lineRanges[i + 1]), 100000));          
    }
    jsEditor.setHiddenAreas(ranges);
}

PBT.prototype.editOn = function() {
    jsEditor.updateOptions({readOnly: false});
}

PBT.prototype.editOff = function() {
    jsEditor.updateOptions({readOnly: true});
}

//Standard GUI Dialogues
PBT.advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI");
PBT.protoype.addStandardDialog = function(options) {
    var width = options.width||0.5;
    var height = options.height||0.25;
    var top = options.top||0;
    var left = options.left||0;
    var verticalAlignment = options.verticalAlignment||BABYLON.GUI.Control.VERTICAL_ALIGNMENT_CENTER;
    var horizontalALignment = options.horizontalALignment||BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_CENTER;
    var text = options.text||"Playground Based Tutorial";
    var container = new BABYLON.GUI.Rectangle();
    container.verticalAlignment = verticalAlignment;
    container.horizontalAlignment = horizontalAlignment;
    container.width = width;
    container.height = height;
    container.cornerRadius = 10;
    container.color = "#364249";
    container.thickness = 4;
    container.background = "#CDC98F9";
    container.top = top;
    container.left = left;
    PBT.advancedTexture.addControl(container); 

    var logoPBT = BABYLON.GUI.Button.CreateImageOnlyButton("but", "LogoPBT.png");
    logoPBT.width = 0.4;
    logoPBT.height = 0.8;
    logoPBT.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
    logoPBT.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_TOP;
    logoPBT.top = 2;
    logoPBT.left=2;
    container.addControl(logoPBT);

    var textBlock = new BABYLON.GUI.TextBlock("text", text);
    textBlock.width = 0.55;
    textBlock.height = 0.7
    textBlock.textWrapping = true;
    textBlock.textHorizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
    textBlock.paddingLeft = 2;
    textBlock.color = "white";
    textBlock.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_TOP;
    textBlock.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
    textBlock.left = 0.45;
    textBlock.top = 2;
    container.addControl(textBlock);

    var nextButton = BABYLON.GUI.Button.CreateSimpleButton("nextbut", "Next >");
    nextButton.width = 0.2
    nextButton.height = 0.15;
    nextButton.color = "white";
    nextButton.cornerRadius = 5;
    nextButton.background = "#364249";
    nextButton.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_TOP;
    nextButton.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
    nextButton.left = 0.7;
    nextButton.top = 0.8;
    container.addControl(nextButton);

    var prevButton = BABYLON.GUI.Button.CreateSimpleButton("prevbut", "< Prev");
    prevButton.width = 0.2
    prevButton.height = 0.15;
    prevButton.color = "white";
    prevButton.cornerRadius = 5;
    prevButton.background = "#364249";
    prevButton.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_TOP;
    prevButton.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
    prevButton.left = 0.7;
    prevButton.top = 0.8;
    container.addControl(prevButton);
}


/*
var justStarted = true;

    //radio Controls
        var addRadio = function(text, parent, group, func, checked) {

        checked = checked || false;
        var button = new BABYLON.GUI.RadioButton();
        button.width = "20px";
        button.height = "20px";
        button.color = "white";
        button.background = "green"; 
        button.group = group;
        button.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;

        button.onIsCheckedChangedObservable.add(function(state) {		
            if (state && !justStarted) {
                func();
            }
        }); 

        var header = BABYLON.GUI.Control.AddHeader(button, text, "80px", { isHorizontal: true, controlFirst: true });
        header.height = "30px";

        parent.addControl(header);    
        button.isChecked = checked; 
    }





  



var selectContainer = new BABYLON.GUI.Rectangle();
selectContainer.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_BOTTOM;
selectContainer.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_RIGHT;
selectContainer.width = 0.15;
selectContainer.height = 0.45;
selectContainer.cornerRadius = 10;
selectContainer.color = "Orange";
selectContainer.thickness = 4;
selectContainer.background = "green";
selectContainer.top = -5;
selectContainer.left = -5;
advancedTexture.addControl(selectContainer);

var panel = new BABYLON.GUI.StackPanel(); 
panel.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_TOP;
panel.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
panel.top = 5;
panel.left = 5;
selectContainer.addControl(panel);

var orderHeading = new BABYLON.GUI.TextBlock("orderHead", "Order");
orderHeading.width = 0.9;
orderHeading.height = 0.1
orderHeading.textWrapping = true;
orderHeading.textHorizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_CENTER;
orderHeading.paddingLeft = 2;
panel.addControl(orderHeading); 

addRadio("XYZ", panel, "order", XYZ, true);
addRadio("YXZ", panel, "order", YXZ);
addRadio("YZX", panel, "order", YZX);
addRadio("ZYX", panel, "order", ZYX);
addRadio("ZXY", panel, "order", ZXY);
addRadio("XZY", panel, "order", XZY);

var separator = new BABYLON.GUI.Rectangle();
separator.width = 0.9;
separator.height = 0.02;
separator.background = "orange";
separator.color = "orange";
panel.addControl(separator);

var spaceHeading = new BABYLON.GUI.TextBlock("spaceHead", "Space");
spaceHeading.width = 0.9;
spaceHeading.height = 0.1
spaceHeading.textWrapping = true;
spaceHeading.textHorizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_CENTER;
spaceHeading.paddingLeft = 2;
panel.addControl(spaceHeading);

addRadio("WORLD", panel, "space", worldSpace, true);
addRadio("LOCAL", panel, "space", localSpace);

// check box
    //Selection Controls
    var addCheckBox = function(text, parent, func, checked) {
        
              checked = checked || false;
              var button = new BABYLON.GUI.Checkbox();
              button.width = "20px";
              button.height = "20px";
              button.color = "white";
              button.background = "green"; 
              button.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
        
              button.onIsCheckedChangedObservable.add(function(state) {		
                  func();
              }); 
        
              var header = BABYLON.GUI.Control.AddHeader(button, text, "150px", { isHorizontal: true, controlFirst: true });
              header.height = "30px";
        
              parent.addControl(header);    
              button.isChecked = checked; 
          } 
      
          var hideBoxCode = function() {
              var ranges = [];
              if(boxHideCode) {
                   ranges.push(new monaco.Range(13, 1, 33, 100000)); // box code
                   if(!animHideCode) {
                      ranges.push(new monaco.Range(37, 1, 48, 100000)); // animation code
                   }
              }
              else {
                   if(!animHideCode) {
                      ranges.push(new monaco.Range(37, 1, 48, 100000)); // animation code
                   }
              }
              //ranges.push(new monaco.Range(50, 1, 242, 100000)); // tutor code 2
              //ranges.push(new monaco.Range(246, 1, 250, 100000)); // tutor code 2
              jsEditor.setHiddenAreas(ranges);
              boxHideCode = !boxHideCode;
          }
      
          var hideAnimCode = function() {
              var ranges = [];
              if(animHideCode) {
                  ranges = [];
                  if(!boxHideCode) {
                      ranges.push(new monaco.Range(13, 1, 33, 100000)); // animation code
                   }
                  ranges.push(new monaco.Range(37, 1, 48, 100000)); // animation code
              }
              else {
                  ranges = [];
                  if(!boxHideCode) {
                      ranges.push(new monaco.Range(13, 1, 33, 100000)); // animation code
                   }
              }
              //ranges.push(new monaco.Range(50, 1, 242, 100000)); // tutor code 2
              //ranges.push(new monaco.Range(246, 1, 250, 100000)); // tutor code 2
              jsEditor.setHiddenAreas(ranges);
              animHideCode = !animHideCode;
          } 
      
          var selectContainer = new BABYLON.GUI.Rectangle();
          selectContainer.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_BOTTOM;
          selectContainer.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_RIGHT;
          selectContainer.width = 0.22;
          selectContainer.height = 0.2;
          selectContainer.cornerRadius = 10;
          selectContainer.color = "Orange";
          selectContainer.thickness = 4;
          selectContainer.background = "green";
          selectContainer.top = -5;
          selectContainer.left = -5;
          advancedTexture.addControl(selectContainer);
            
          var panel = new BABYLON.GUI.StackPanel(); 
          panel.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_TOP;
          panel.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
          panel.top = 2;
          panel.left = 4;
          selectContainer.addControl(panel);
      
          var orderHeading = new BABYLON.GUI.TextBlock("orderHead", "Box Mesh");
          orderHeading.width = 0.9;
          orderHeading.height = 0.14
          orderHeading.textWrapping = true;
          orderHeading.textHorizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_CENTER;
          orderHeading.paddingLeft = 2;
          panel.addControl(orderHeading); 
      
          var boxHideCode = true;
          var animHideCode = false;  
          addCheckBox("Hide Box Code", panel, hideBoxCode, true);
      
          var separator = new BABYLON.GUI.Rectangle();
          separator.width = 0.9;
          separator.height = 0.02;
          separator.background = "orange";
          separator.color = "orange";
          panel.addControl(separator);
      
          var gap = new BABYLON.GUI.Rectangle();
          gap.width = 0.9;
          gap.height = 0.1;
          gap.background = "green";
          gap.color = "green";
          panel.addControl(gap);
      
          var spaceHeading = new BABYLON.GUI.TextBlock("spaceHead", "Animation");
          spaceHeading.width = 0.9;
          spaceHeading.height = 0.1
          spaceHeading.textWrapping = true;
          spaceHeading.textHorizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_CENTER;
          spaceHeading.paddingLeft = 2;
          panel.addControl(spaceHeading);
      
          animHideCode = true;  
          addCheckBox("Hide Code", panel, hideAnimCode, true);

          */