Code Editor Splitted in 4

FloatingSpace/CodeEditor.js

@@ -1,6 +1,6 @@
 
 function newCodeEditor () {
-  const MODULE_NAME = 'Circular Menu Iem'
+  const MODULE_NAME = 'Code Editor'
 
   let thisObject = {
     isVisibleFunction: undefined,
@@ -98,7 +98,7 @@ function newCodeEditor () {
                      'overflow:hidden;' +
                      'font-family: ' + UI_FONT.PRIMARY + ';' +
                      'font-size: 12px;' +
-                     'background-color: rgb(204, 88, 53);' +
+                     'background-color: rgb(' + UI_COLOR.RUSTED_RED + ');' +
                      'color:rgb(255, 255, 255);' +
                     'width: ' + thisObject.container.frame.width + 'px;' +
                      'height: ' + thisObject.container.frame.height + 'px'

FloatingSpace/ConditionEditor.js

@@ -0,0 +1,223 @@
+
+function newConditionEditor () {
+  const MODULE_NAME = 'Condition Editor'
+
+  let thisObject = {
+    isVisibleFunction: undefined,
+    iconOK: undefined,
+    iconNOT_OK: undefined,
+    visible: false,
+    imagePathOK: undefined,
+    imagePathNOT_OK: undefined,
+    rawRadius: undefined,
+    targetRadius: undefined,
+    currentRadius: undefined,
+    container: undefined,
+    payload: undefined,
+    deactivate: deactivate,
+    activate: activate,
+    physics: physics,
+    drawBackground: drawBackground,
+    drawForeground: drawForeground,
+    getContainer: getContainer,
+    finalize: finalize,
+    initialize: initialize
+  }
+
+  thisObject.container = newContainer()
+  thisObject.container.initialize(MODULE_NAME)
+  thisObject.container.isClickeable = false
+  thisObject.container.isDraggeable = false
+  thisObject.container.detectMouseOver = false
+  thisObject.container.frame.radius = 0
+  thisObject.container.frame.position.x = 0
+  thisObject.container.frame.position.y = 0
+
+  let isMouseOver = false
+
+  return thisObject
+
+  function finalize () {
+    thisObject.container.finalize()
+    thisObject.container = undefined
+    thisObject.iconOK = undefined
+    thisObject.iconNOT_OK = undefined
+    thisObject.payload = undefined
+    thisObject.isVisibleFunction = undefined
+  }
+
+  function initialize () {
+    /* Load Images */
+
+    thisObject.iconOK = new Image()
+    thisObject.iconOK.onload = onImageLoad
+
+    function onImageLoad () {
+      thisObject.iconNOT_OK = new Image()
+      thisObject.iconNOT_OK.onload = onImageLoad
+
+      function onImageLoad () {
+        thisObject.canDrawIcon = true
+      }
+      thisObject.iconNOT_OK.src = window.canvasApp.urlPrefix + thisObject.imagePathNOT_OK
+    }
+    // thisObject.iconOK.src = window.canvasApp.urlPrefix + thisObject.imagePathOK
+    // thisObject.icon = thisObject.iconOK // The default value is ON.
+  }
+
+  function deactivate () {
+    if (thisObject.visible === true) {
+      thisObject.visible = false
+      let textArea = document.getElementById('textArea')
+      textArea.style.display = 'none'
+      thisObject.payload.node.code = textArea.value
+      if (thisObject.payload.node.type !== 'Code' && thisObject.payload.node.type !== 'Formula') {
+        try {
+          let code = JSON.parse(thisObject.payload.node.code)
+        } catch (err) {
+          thisObject.payload.uiObject.setErrorMessage(err.message, 10)
+        }
+      }
+    }
+  }
+
+  function activate (payload) {
+    thisObject.visible = true
+    thisObject.payload = payload
+    thisObject.rawRadius = 8
+    thisObject.targetRadius = thisObject.container.frame.radius
+    thisObject.currentRadius = 0
+    thisObject.payload.uiObject.setErrorMessage('', 0)
+
+    let textArea = document.getElementById('textArea')
+    textArea.value = payload.node.code
+    textArea.style = 'resize: none;' +
+                     ' border: none;' +
+                     ' outline: none;' +
+                     'box-shadow: none;' +
+                     'overflow:hidden;' +
+                     'font-family: ' + UI_FONT.PRIMARY + ';' +
+                     'font-size: 12px;' +
+                     'background-color: rgb(' + UI_COLOR.GREEN + ');' +
+                     'color:rgb(255, 255, 255);' +
+                    'width: ' + thisObject.container.frame.width + 'px;' +
+                     'height: ' + thisObject.container.frame.height + 'px'
+    textArea.style.display = 'block'
+    textArea.focus()
+  }
+
+  function getContainer (point) {
+    let container
+    if (thisObject.visible === true) {
+      if (point.x === VERY_LARGE_NUMBER) {
+        /* The the mouse leaves the canvas, and event of mouse over with a ridiculous coordinate is triggered so that
+        anyone can react. In our case, the code editor has a text area that is not part of the canvas, so the event is
+        triggered. We compensate recognizing this coordinate and returning our container. */
+        return thisObject.container
+      }
+
+      if (thisObject.container.frame.isThisPointHere(point, true, false) === true) {
+        return thisObject.container
+      } else {
+        return undefined
+      }
+    }
+  }
+
+  function physics () {
+    if (Math.abs(thisObject.currentRadius - thisObject.targetRadius) >= 0.5) {
+      if (thisObject.currentRadius < thisObject.targetRadius) {
+        thisObject.currentRadius = thisObject.currentRadius + 0.5
+      } else {
+        thisObject.currentRadius = thisObject.currentRadius - 0.5
+      }
+    }
+
+    thisObject.container.frame.position.x = 0
+    thisObject.container.frame.position.y = 0
+
+    thisObject.container.frame.width = thisObject.container.frame.radius * 1.8 * 2
+    thisObject.container.frame.height = thisObject.container.frame.radius * 1 * 2
+
+    let textAreaPosition = {
+      x: 0 - thisObject.container.frame.width / 2,
+      y: 0 - thisObject.container.frame.height * 3 / 7 + CURRENT_TOP_MARGIN
+    }
+
+    textAreaPosition = thisObject.container.frame.frameThisPoint(textAreaPosition)
+    if (thisObject.visible === true) {
+      let checkPosition = {
+        x: textAreaPosition.x,
+        y: textAreaPosition.y - CURRENT_TOP_MARGIN
+      }
+      if (thisObject.isVisibleFunction(checkPosition) === false) {
+        deactivate()
+      }
+    }
+    if (thisObject.visible === true) {
+      let textAreaDiv = document.getElementById('textAreaDiv')
+      textAreaDiv.style = 'position:fixed; top:' + textAreaPosition.y + 'px; left:' + textAreaPosition.x + 'px; z-index:1; '
+    }
+  }
+
+  function drawBackground () {
+    if (thisObject.visible === true) {
+      let position = {
+        x: 0,
+        y: 0
+      }
+
+      position = thisObject.container.frame.frameThisPoint(position)
+
+      let radius = thisObject.container.frame.radius * 2
+
+      if (radius > 0.5) {
+        browserCanvasContext.beginPath()
+        browserCanvasContext.arc(position.x, position.y, radius * 1.3 + 3, 0, Math.PI * 2, true)
+        browserCanvasContext.closePath()
+        browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + 1 + ')'
+        browserCanvasContext.fill()
+
+        browserCanvasContext.beginPath()
+        browserCanvasContext.arc(position.x, position.y, radius * 1.3, 0, Math.PI * 2, true)
+        browserCanvasContext.closePath()
+        browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.GREEN + ', ' + 1 + ')'
+        browserCanvasContext.fill()
+      }
+    }
+  }
+  function drawForeground () {
+    let iconPosition = {
+      x: 0,
+      y: thisObject.currentRadius * 1.5
+    }
+
+    iconPosition = thisObject.container.frame.frameThisPoint(iconPosition)
+
+      /* Menu  Item */
+
+    if (thisObject.canDrawIcon === true && thisObject.currentRadius > 1) {
+      browserCanvasContext.drawImage(thisObject.icon, iconPosition.x - thisObject.currentRadius, iconPosition.y - thisObject.currentRadius, thisObject.currentRadius * 2, thisObject.currentRadius * 2)
+
+      /* Menu Label */
+
+      let label = 'Code looks good!'
+      let labelPoint
+      let fontSize = 10
+
+      browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
+
+      if (label !== undefined && thisObject.currentRadius >= thisObject.targetRadius) {
+        labelPoint = {
+          x: iconPosition.x + thisObject.currentRadius + 10,
+          y: iconPosition.y + fontSize * FONT_ASPECT_RATIO
+        }
+
+        browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
+        browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)'
+        browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y)
+      }
+    }
+  }
+}
+

FloatingSpace/ConfigEditor.js

@@ -0,0 +1,223 @@
+
+function newConfigEditor () {
+  const MODULE_NAME = 'Config Editor'
+
+  let thisObject = {
+    isVisibleFunction: undefined,
+    iconOK: undefined,
+    iconNOT_OK: undefined,
+    visible: false,
+    imagePathOK: undefined,
+    imagePathNOT_OK: undefined,
+    rawRadius: undefined,
+    targetRadius: undefined,
+    currentRadius: undefined,
+    container: undefined,
+    payload: undefined,
+    deactivate: deactivate,
+    activate: activate,
+    physics: physics,
+    drawBackground: drawBackground,
+    drawForeground: drawForeground,
+    getContainer: getContainer,
+    finalize: finalize,
+    initialize: initialize
+  }
+
+  thisObject.container = newContainer()
+  thisObject.container.initialize(MODULE_NAME)
+  thisObject.container.isClickeable = false
+  thisObject.container.isDraggeable = false
+  thisObject.container.detectMouseOver = false
+  thisObject.container.frame.radius = 0
+  thisObject.container.frame.position.x = 0
+  thisObject.container.frame.position.y = 0
+
+  let isMouseOver = false
+
+  return thisObject
+
+  function finalize () {
+    thisObject.container.finalize()
+    thisObject.container = undefined
+    thisObject.iconOK = undefined
+    thisObject.iconNOT_OK = undefined
+    thisObject.payload = undefined
+    thisObject.isVisibleFunction = undefined
+  }
+
+  function initialize () {
+    /* Load Images */
+
+    thisObject.iconOK = new Image()
+    thisObject.iconOK.onload = onImageLoad
+
+    function onImageLoad () {
+      thisObject.iconNOT_OK = new Image()
+      thisObject.iconNOT_OK.onload = onImageLoad
+
+      function onImageLoad () {
+        thisObject.canDrawIcon = true
+      }
+      thisObject.iconNOT_OK.src = window.canvasApp.urlPrefix + thisObject.imagePathNOT_OK
+    }
+    // thisObject.iconOK.src = window.canvasApp.urlPrefix + thisObject.imagePathOK
+    // thisObject.icon = thisObject.iconOK // The default value is ON.
+  }
+
+  function deactivate () {
+    if (thisObject.visible === true) {
+      thisObject.visible = false
+      let textArea = document.getElementById('textArea')
+      textArea.style.display = 'none'
+      thisObject.payload.node.code = textArea.value
+      if (thisObject.payload.node.type !== 'Code' && thisObject.payload.node.type !== 'Formula') {
+        try {
+          let code = JSON.parse(thisObject.payload.node.code)
+        } catch (err) {
+          thisObject.payload.uiObject.setErrorMessage(err.message, 10)
+        }
+      }
+    }
+  }
+
+  function activate (payload) {
+    thisObject.visible = true
+    thisObject.payload = payload
+    thisObject.rawRadius = 8
+    thisObject.targetRadius = thisObject.container.frame.radius
+    thisObject.currentRadius = 0
+    thisObject.payload.uiObject.setErrorMessage('', 0)
+
+    let textArea = document.getElementById('textArea')
+    textArea.value = payload.node.code
+    textArea.style = 'resize: none;' +
+                     ' border: none;' +
+                     ' outline: none;' +
+                     'box-shadow: none;' +
+                     'overflow:hidden;' +
+                     'font-family: ' + UI_FONT.PRIMARY + ';' +
+                     'font-size: 12px;' +
+                     'background-color: rgb(' + UI_COLOR.DARK_TURQUOISE + ');' +
+                     'color:rgb(255, 255, 255);' +
+                    'width: ' + thisObject.container.frame.width + 'px;' +
+                     'height: ' + thisObject.container.frame.height + 'px'
+    textArea.style.display = 'block'
+    textArea.focus()
+  }
+
+  function getContainer (point) {
+    let container
+    if (thisObject.visible === true) {
+      if (point.x === VERY_LARGE_NUMBER) {
+        /* The the mouse leaves the canvas, and event of mouse over with a ridiculous coordinate is triggered so that
+        anyone can react. In our case, the code editor has a text area that is not part of the canvas, so the event is
+        triggered. We compensate recognizing this coordinate and returning our container. */
+        return thisObject.container
+      }
+
+      if (thisObject.container.frame.isThisPointHere(point, true, false) === true) {
+        return thisObject.container
+      } else {
+        return undefined
+      }
+    }
+  }
+
+  function physics () {
+    if (Math.abs(thisObject.currentRadius - thisObject.targetRadius) >= 0.5) {
+      if (thisObject.currentRadius < thisObject.targetRadius) {
+        thisObject.currentRadius = thisObject.currentRadius + 0.5
+      } else {
+        thisObject.currentRadius = thisObject.currentRadius - 0.5
+      }
+    }
+
+    thisObject.container.frame.position.x = 0
+    thisObject.container.frame.position.y = 0
+
+    thisObject.container.frame.width = thisObject.container.frame.radius * 1.8 * 2
+    thisObject.container.frame.height = thisObject.container.frame.radius * 1 * 2
+
+    let textAreaPosition = {
+      x: 0 - thisObject.container.frame.width / 2,
+      y: 0 - thisObject.container.frame.height * 3 / 7 + CURRENT_TOP_MARGIN
+    }
+
+    textAreaPosition = thisObject.container.frame.frameThisPoint(textAreaPosition)
+    if (thisObject.visible === true) {
+      let checkPosition = {
+        x: textAreaPosition.x,
+        y: textAreaPosition.y - CURRENT_TOP_MARGIN
+      }
+      if (thisObject.isVisibleFunction(checkPosition) === false) {
+        deactivate()
+      }
+    }
+    if (thisObject.visible === true) {
+      let textAreaDiv = document.getElementById('textAreaDiv')
+      textAreaDiv.style = 'position:fixed; top:' + textAreaPosition.y + 'px; left:' + textAreaPosition.x + 'px; z-index:1; '
+    }
+  }
+
+  function drawBackground () {
+    if (thisObject.visible === true) {
+      let position = {
+        x: 0,
+        y: 0
+      }
+
+      position = thisObject.container.frame.frameThisPoint(position)
+
+      let radius = thisObject.container.frame.radius * 2
+
+      if (radius > 0.5) {
+        browserCanvasContext.beginPath()
+        browserCanvasContext.arc(position.x, position.y, radius * 1.3 + 3, 0, Math.PI * 2, true)
+        browserCanvasContext.closePath()
+        browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + 1 + ')'
+        browserCanvasContext.fill()
+
+        browserCanvasContext.beginPath()
+        browserCanvasContext.arc(position.x, position.y, radius * 1.3, 0, Math.PI * 2, true)
+        browserCanvasContext.closePath()
+        browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK_TURQUOISE + ', ' + 1 + ')'
+        browserCanvasContext.fill()
+      }
+    }
+  }
+  function drawForeground () {
+    let iconPosition = {
+      x: 0,
+      y: thisObject.currentRadius * 1.5
+    }
+
+    iconPosition = thisObject.container.frame.frameThisPoint(iconPosition)
+
+      /* Menu  Item */
+
+    if (thisObject.canDrawIcon === true && thisObject.currentRadius > 1) {
+      browserCanvasContext.drawImage(thisObject.icon, iconPosition.x - thisObject.currentRadius, iconPosition.y - thisObject.currentRadius, thisObject.currentRadius * 2, thisObject.currentRadius * 2)
+
+      /* Menu Label */
+
+      let label = 'Code looks good!'
+      let labelPoint
+      let fontSize = 10
+
+      browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
+
+      if (label !== undefined && thisObject.currentRadius >= thisObject.targetRadius) {
+        labelPoint = {
+          x: iconPosition.x + thisObject.currentRadius + 10,
+          y: iconPosition.y + fontSize * FONT_ASPECT_RATIO
+        }
+
+        browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
+        browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)'
+        browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y)
+      }
+    }
+  }
+}
+

FloatingSpace/FormulaEditor.js

@@ -0,0 +1,223 @@
+
+function newFormulaEditor () {
+  const MODULE_NAME = 'Formula Editor'
+
+  let thisObject = {
+    isVisibleFunction: undefined,
+    iconOK: undefined,
+    iconNOT_OK: undefined,
+    visible: false,
+    imagePathOK: undefined,
+    imagePathNOT_OK: undefined,
+    rawRadius: undefined,
+    targetRadius: undefined,
+    currentRadius: undefined,
+    container: undefined,
+    payload: undefined,
+    deactivate: deactivate,
+    activate: activate,
+    physics: physics,
+    drawBackground: drawBackground,
+    drawForeground: drawForeground,
+    getContainer: getContainer,
+    finalize: finalize,
+    initialize: initialize
+  }
+
+  thisObject.container = newContainer()
+  thisObject.container.initialize(MODULE_NAME)
+  thisObject.container.isClickeable = false
+  thisObject.container.isDraggeable = false
+  thisObject.container.detectMouseOver = false
+  thisObject.container.frame.radius = 0
+  thisObject.container.frame.position.x = 0
+  thisObject.container.frame.position.y = 0
+
+  let isMouseOver = false
+
+  return thisObject
+
+  function finalize () {
+    thisObject.container.finalize()
+    thisObject.container = undefined
+    thisObject.iconOK = undefined
+    thisObject.iconNOT_OK = undefined
+    thisObject.payload = undefined
+    thisObject.isVisibleFunction = undefined
+  }
+
+  function initialize () {
+    /* Load Images */
+
+    thisObject.iconOK = new Image()
+    thisObject.iconOK.onload = onImageLoad
+
+    function onImageLoad () {
+      thisObject.iconNOT_OK = new Image()
+      thisObject.iconNOT_OK.onload = onImageLoad
+
+      function onImageLoad () {
+        thisObject.canDrawIcon = true
+      }
+      thisObject.iconNOT_OK.src = window.canvasApp.urlPrefix + thisObject.imagePathNOT_OK
+    }
+    // thisObject.iconOK.src = window.canvasApp.urlPrefix + thisObject.imagePathOK
+    // thisObject.icon = thisObject.iconOK // The default value is ON.
+  }
+
+  function deactivate () {
+    if (thisObject.visible === true) {
+      thisObject.visible = false
+      let textArea = document.getElementById('textArea')
+      textArea.style.display = 'none'
+      thisObject.payload.node.code = textArea.value
+      if (thisObject.payload.node.type !== 'Code' && thisObject.payload.node.type !== 'Formula') {
+        try {
+          let code = JSON.parse(thisObject.payload.node.code)
+        } catch (err) {
+          thisObject.payload.uiObject.setErrorMessage(err.message, 10)
+        }
+      }
+    }
+  }
+
+  function activate (payload) {
+    thisObject.visible = true
+    thisObject.payload = payload
+    thisObject.rawRadius = 8
+    thisObject.targetRadius = thisObject.container.frame.radius
+    thisObject.currentRadius = 0
+    thisObject.payload.uiObject.setErrorMessage('', 0)
+
+    let textArea = document.getElementById('textArea')
+    textArea.value = payload.node.code
+    textArea.style = 'resize: none;' +
+                     ' border: none;' +
+                     ' outline: none;' +
+                     'box-shadow: none;' +
+                     'overflow:hidden;' +
+                     'font-family: ' + UI_FONT.PRIMARY + ';' +
+                     'font-size: 12px;' +
+                     'background-color: rgb(' + UI_COLOR.MANGANESE_PURPLE + ');' +
+                     'color:rgb(255, 255, 255);' +
+                    'width: ' + thisObject.container.frame.width + 'px;' +
+                     'height: ' + thisObject.container.frame.height + 'px'
+    textArea.style.display = 'block'
+    textArea.focus()
+  }
+
+  function getContainer (point) {
+    let container
+    if (thisObject.visible === true) {
+      if (point.x === VERY_LARGE_NUMBER) {
+        /* The the mouse leaves the canvas, and event of mouse over with a ridiculous coordinate is triggered so that
+        anyone can react. In our case, the code editor has a text area that is not part of the canvas, so the event is
+        triggered. We compensate recognizing this coordinate and returning our container. */
+        return thisObject.container
+      }
+
+      if (thisObject.container.frame.isThisPointHere(point, true, false) === true) {
+        return thisObject.container
+      } else {
+        return undefined
+      }
+    }
+  }
+
+  function physics () {
+    if (Math.abs(thisObject.currentRadius - thisObject.targetRadius) >= 0.5) {
+      if (thisObject.currentRadius < thisObject.targetRadius) {
+        thisObject.currentRadius = thisObject.currentRadius + 0.5
+      } else {
+        thisObject.currentRadius = thisObject.currentRadius - 0.5
+      }
+    }
+
+    thisObject.container.frame.position.x = 0
+    thisObject.container.frame.position.y = 0
+
+    thisObject.container.frame.width = thisObject.container.frame.radius * 1.8 * 2
+    thisObject.container.frame.height = thisObject.container.frame.radius * 1 * 2
+
+    let textAreaPosition = {
+      x: 0 - thisObject.container.frame.width / 2,
+      y: 0 - thisObject.container.frame.height * 3 / 7 + CURRENT_TOP_MARGIN
+    }
+
+    textAreaPosition = thisObject.container.frame.frameThisPoint(textAreaPosition)
+    if (thisObject.visible === true) {
+      let checkPosition = {
+        x: textAreaPosition.x,
+        y: textAreaPosition.y - CURRENT_TOP_MARGIN
+      }
+      if (thisObject.isVisibleFunction(checkPosition) === false) {
+        deactivate()
+      }
+    }
+    if (thisObject.visible === true) {
+      let textAreaDiv = document.getElementById('textAreaDiv')
+      textAreaDiv.style = 'position:fixed; top:' + textAreaPosition.y + 'px; left:' + textAreaPosition.x + 'px; z-index:1; '
+    }
+  }
+
+  function drawBackground () {
+    if (thisObject.visible === true) {
+      let position = {
+        x: 0,
+        y: 0
+      }
+
+      position = thisObject.container.frame.frameThisPoint(position)
+
+      let radius = thisObject.container.frame.radius * 2
+
+      if (radius > 0.5) {
+        browserCanvasContext.beginPath()
+        browserCanvasContext.arc(position.x, position.y, radius * 1.3 + 3, 0, Math.PI * 2, true)
+        browserCanvasContext.closePath()
+        browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + 1 + ')'
+        browserCanvasContext.fill()
+
+        browserCanvasContext.beginPath()
+        browserCanvasContext.arc(position.x, position.y, radius * 1.3, 0, Math.PI * 2, true)
+        browserCanvasContext.closePath()
+        browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.MANGANESE_PURPLE + ', ' + 1 + ')'
+        browserCanvasContext.fill()
+      }
+    }
+  }
+  function drawForeground () {
+    let iconPosition = {
+      x: 0,
+      y: thisObject.currentRadius * 1.5
+    }
+
+    iconPosition = thisObject.container.frame.frameThisPoint(iconPosition)
+
+      /* Menu  Item */
+
+    if (thisObject.canDrawIcon === true && thisObject.currentRadius > 1) {
+      browserCanvasContext.drawImage(thisObject.icon, iconPosition.x - thisObject.currentRadius, iconPosition.y - thisObject.currentRadius, thisObject.currentRadius * 2, thisObject.currentRadius * 2)
+
+      /* Menu Label */
+
+      let label = 'Code looks good!'
+      let labelPoint
+      let fontSize = 10
+
+      browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
+
+      if (label !== undefined && thisObject.currentRadius >= thisObject.targetRadius) {
+        labelPoint = {
+          x: iconPosition.x + thisObject.currentRadius + 10,
+          y: iconPosition.y + fontSize * FONT_ASPECT_RATIO
+        }
+
+        browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
+        browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)'
+        browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y)
+      }
+    }
+  }
+}
+

FloatingSpace/UiObject.js

@@ -15,6 +15,9 @@ function newUiObject () {
     container: undefined,
     payload: undefined,
     codeEditor: undefined,
+    configEditor: undefined,
+    conditionEditor: undefined,
+    formulaEditor: undefined,
     uiObjectTitle: undefined,
     circularProgressBar: undefined,
     isExecuting: undefined,
@@ -115,6 +118,21 @@ function newUiObject () {
       thisObject.codeEditor = undefined
     }
 
+    if (thisObject.configEditor !== undefined) {
+      thisObject.configEditor.finalize()
+      thisObject.configEditor = undefined
+    }
+
+    if (thisObject.conditionEditor !== undefined) {
+      thisObject.conditionEditor.finalize()
+      thisObject.conditionEditor = undefined
+    }
+
+    if (thisObject.formulaEditor !== undefined) {
+      thisObject.formulaEditor.finalize()
+      thisObject.formulaEditor = undefined
+    }
+
     icon = undefined
     chainAttachToNode = undefined
     referenceAttachToNode = undefined
@@ -156,6 +174,21 @@ function newUiObject () {
         if (container !== undefined) { return container }
       }
 
+      if (thisObject.configEditor !== undefined) {
+        container = thisObject.configEditor.getContainer(point)
+        if (container !== undefined) { return container }
+      }
+
+      if (thisObject.conditionEditor !== undefined) {
+        container = thisObject.conditionEditor.getContainer(point)
+        if (container !== undefined) { return container }
+      }
+
+      if (thisObject.formulaEditor !== undefined) {
+        container = thisObject.formulaEditor.getContainer(point)
+        if (container !== undefined) { return container }
+      }
+
       container = thisObject.uiObjectTitle.getContainer(point)
       if (container !== undefined) { return container }
 
@@ -178,6 +211,18 @@ function newUiObject () {
       thisObject.codeEditor.physics()
     }
 
+    if (thisObject.configEditor !== undefined) {
+      thisObject.configEditor.physics()
+    }
+
+    if (thisObject.conditionEditor !== undefined) {
+      thisObject.conditionEditor.physics()
+    }
+
+    if (thisObject.formulaEditor !== undefined) {
+      thisObject.formulaEditor.physics()
+    }
+
     if (thisObject.payload.chainParent === undefined || thisObject.payload.chainParent.payload === undefined) {
       thisObject.payload.targetPosition.x = thisObject.payload.position.x,
       thisObject.payload.targetPosition.y = thisObject.payload.position.y
@@ -928,6 +973,15 @@ function newUiObject () {
     if (thisObject.codeEditor !== undefined) {
       thisObject.codeEditor.deactivate()
     }
+    if (thisObject.configEditor !== undefined) {
+      thisObject.configEditor.deactivate()
+    }
+    if (thisObject.conditionEditor !== undefined) {
+      thisObject.conditionEditor.deactivate()
+    }
+    if (thisObject.formulaEditor !== undefined) {
+      thisObject.formulaEditor.deactivate()
+    }
   }
 
   function onDisplace (event) {
@@ -939,6 +993,15 @@ function newUiObject () {
     if (thisObject.codeEditor !== undefined) {
       thisObject.codeEditor.deactivate()
     }
+    if (thisObject.configEditor !== undefined) {
+      thisObject.configEditor.deactivate()
+    }
+    if (thisObject.conditionEditor !== undefined) {
+      thisObject.conditionEditor.deactivate()
+    }
+    if (thisObject.formulaEditor !== undefined) {
+      thisObject.formulaEditor.deactivate()
+    }
     isDragging = true
     if (event.button === 2) {
       rightDragging = true
@@ -1009,16 +1072,43 @@ function newUiObject () {
         thisObject.codeEditor.drawBackground()
         thisObject.codeEditor.drawForeground()
       }
+      if (thisObject.configEditor !== undefined) {
+        thisObject.configEditor.drawBackground()
+        thisObject.configEditor.drawForeground()
+      }
+      if (thisObject.conditionEditor !== undefined) {
+        thisObject.conditionEditor.drawBackground()
+        thisObject.conditionEditor.drawForeground()
+      }
+      if (thisObject.formulaEditor !== undefined) {
+        thisObject.formulaEditor.drawBackground()
+        thisObject.formulaEditor.drawForeground()
+      }
+
+      let drawMenu = true
 
       if (thisObject.codeEditor !== undefined) {
-        if (thisObject.codeEditor.visible === false) {
-          drawBodyAndPicture()
-          if (isDragging === false) {
-            thisObject.menu.drawBackground()
-            thisObject.menu.drawForeground()
-          }
+        if (thisObject.codeEditor.visible === true) {
+          drawMenu = false
         }
-      } else {
+      }
+      if (thisObject.configEditor !== undefined) {
+        if (thisObject.configEditor.visible === true) {
+          drawMenu = false
+        }
+      }
+      if (thisObject.conditionEditor !== undefined) {
+        if (thisObject.conditionEditor.visible === true) {
+          drawMenu = false
+        }
+      }
+      if (thisObject.formulaEditor !== undefined) {
+        if (thisObject.formulaEditor.visible === true) {
+          drawMenu = false
+        }
+      }
+
+      if (drawMenu === true) {
         drawBodyAndPicture()
         if (isDragging === false) {
           thisObject.menu.drawBackground()

FloatingSpace/UiObjectConstructor.js

@@ -313,16 +313,16 @@ function newUiObjectConstructor () {
         break
       }
       case 'Team': {
-        uiObject.codeEditor = newCodeEditor()
-        uiObject.codeEditor.isVisibleFunction = uiObject.isVisibleFunction
-        uiObject.codeEditor.initialize()
-        uiObject.codeEditor.container.connectToParent(uiObject.container, false, false, true, true, false, false, false, false)
+        uiObject.configEditor = newConfigEditor()
+        uiObject.configEditor.isVisibleFunction = uiObject.isVisibleFunction
+        uiObject.configEditor.initialize()
+        uiObject.configEditor.container.connectToParent(uiObject.container, false, false, true, true, false, false, false, false)
         addLeftIcons(menuItemsInitialValues, floatingObject)
         menuItemsInitialValues.push(
           {
-            action: 'Edit Team',
-            actionFunction: uiObject.codeEditor.activate,
-            label: 'Edit Bot',
+            action: 'Configure Team',
+            actionFunction: uiObject.configEditor.activate,
+            label: 'Configigure Team',
             visible: true,
             iconPathOn: 'html',
             iconPathOff: 'html',
@@ -418,16 +418,16 @@ function newUiObjectConstructor () {
         break
       }
       case 'Sensor Bot': {
-        uiObject.codeEditor = newCodeEditor()
-        uiObject.codeEditor.isVisibleFunction = uiObject.isVisibleFunction
-        uiObject.codeEditor.initialize()
-        uiObject.codeEditor.container.connectToParent(uiObject.container, false, false, true, true, false, false, false, false)
+        uiObject.configEditor = newConfigEditor()
+        uiObject.configEditor.isVisibleFunction = uiObject.isVisibleFunction
+        uiObject.configEditor.initialize()
+        uiObject.configEditor.container.connectToParent(uiObject.container, false, false, true, true, false, false, false, false)
         addLeftIcons(menuItemsInitialValues, floatingObject)
         menuItemsInitialValues.push(
           {
-            action: 'Edit Bot',
-            actionFunction: uiObject.codeEditor.activate,
-            label: 'Edit Bot',
+            action: 'Configure Bot',
+            actionFunction: uiObject.configEditor.activate,
+            label: 'Configure Bot',
             visible: true,
             iconPathOn: 'html',
             iconPathOff: 'html',
@@ -497,16 +497,16 @@ function newUiObjectConstructor () {
         break
       }
       case 'Indicator Bot': {
-        uiObject.codeEditor = newCodeEditor()
-        uiObject.codeEditor.isVisibleFunction = uiObject.isVisibleFunction
-        uiObject.codeEditor.initialize()
-        uiObject.codeEditor.container.connectToParent(uiObject.container, false, false, true, true, false, false, false, false)
+        uiObject.configEditor = newConfigEditor()
+        uiObject.configEditor.isVisibleFunction = uiObject.isVisibleFunction
+        uiObject.configEditor.initialize()
+        uiObject.configEditor.container.connectToParent(uiObject.container, false, false, true, true, false, false, false, false)
         addLeftIcons(menuItemsInitialValues, floatingObject)
         menuItemsInitialValues.push(
           {
-            action: 'Edit Bot',
-            actionFunction: uiObject.codeEditor.activate,
-            label: 'Edit Bot',
+            action: 'Configure Bot',
+            actionFunction: uiObject.configEditor.activate,
+            label: 'Configure Bot',
             visible: true,
             iconPathOn: 'html',
             iconPathOff: 'html',
@@ -576,16 +576,16 @@ function newUiObjectConstructor () {
         break
       }
       case 'Trading Bot': {
-        uiObject.codeEditor = newCodeEditor()
-        uiObject.codeEditor.isVisibleFunction = uiObject.isVisibleFunction
-        uiObject.codeEditor.initialize()
-        uiObject.codeEditor.container.connectToParent(uiObject.container, false, false, true, true, false, false, false, false)
+        uiObject.configEditor = newConfigEditor()
+        uiObject.configEditor.isVisibleFunction = uiObject.isVisibleFunction
+        uiObject.configEditor.initialize()
+        uiObject.configEditor.container.connectToParent(uiObject.container, false, false, true, true, false, false, false, false)
         addLeftIcons(menuItemsInitialValues, floatingObject)
         menuItemsInitialValues.push(
           {
-            action: 'Edit Bot',
-            actionFunction: uiObject.codeEditor.activate,
-            label: 'Edit Bot',
+            action: 'Configure Bot',
+            actionFunction: uiObject.configEditor.activate,
+            label: 'Configure Bot',
             visible: true,
             iconPathOn: 'html',
             iconPathOff: 'html',
@@ -655,16 +655,16 @@ function newUiObjectConstructor () {
         break
       }
       case 'Process Definition': {
-        uiObject.codeEditor = newCodeEditor()
-        uiObject.codeEditor.isVisibleFunction = uiObject.isVisibleFunction
-        uiObject.codeEditor.initialize()
-        uiObject.codeEditor.container.connectToParent(uiObject.container, false, false, true, true, false, false, false, false)
+        uiObject.configEditor = newConfigEditor()
+        uiObject.configEditor.isVisibleFunction = uiObject.isVisibleFunction
+        uiObject.configEditor.initialize()
+        uiObject.configEditor.container.connectToParent(uiObject.container, false, false, true, true, false, false, false, false)
         addLeftIcons(menuItemsInitialValues, floatingObject)
         menuItemsInitialValues.push(
           {
-            action: 'Edit Process',
-            actionFunction: uiObject.codeEditor.activate,
-            label: 'Edit Process',
+            action: 'Configure Process',
+            actionFunction: uiObject.configEditor.activate,
+            label: 'Configure Process',
             visible: true,
             iconPathOn: 'html',
             iconPathOff: 'html',
@@ -1190,16 +1190,16 @@ function newUiObjectConstructor () {
         break
       }
       case 'Status Dependency': {
-        uiObject.codeEditor = newCodeEditor()
-        uiObject.codeEditor.isVisibleFunction = uiObject.isVisibleFunction
-        uiObject.codeEditor.initialize()
-        uiObject.codeEditor.container.connectToParent(uiObject.container, false, false, true, true, false, false, false, false)
+        uiObject.configEditor = newConfigEditor()
+        uiObject.configEditor.isVisibleFunction = uiObject.isVisibleFunction
+        uiObject.configEditor.initialize()
+        uiObject.configEditor.container.connectToParent(uiObject.container, false, false, true, true, false, false, false, false)
         addLeftIcons(menuItemsInitialValues, floatingObject)
         menuItemsInitialValues.push(
           {
-            action: 'Edit Status Dependency',
-            actionFunction: uiObject.codeEditor.activate,
-            label: 'Edit Status Dependency',
+            action: 'Configure Status Dependency',
+            actionFunction: uiObject.configEditor.activate,
+            label: 'Configure Status Dependency',
             visible: true,
             iconPathOn: 'html',
             iconPathOff: 'html',
@@ -1277,16 +1277,16 @@ function newUiObjectConstructor () {
         break
       }
       case 'Product Definition': {
-        uiObject.codeEditor = newCodeEditor()
-        uiObject.codeEditor.isVisibleFunction = uiObject.isVisibleFunction
-        uiObject.codeEditor.initialize()
-        uiObject.codeEditor.container.connectToParent(uiObject.container, false, false, true, true, false, false, false, false)
+        uiObject.configEditor = newConfigEditor()
+        uiObject.configEditor.isVisibleFunction = uiObject.isVisibleFunction
+        uiObject.configEditor.initialize()
+        uiObject.configEditor.container.connectToParent(uiObject.container, false, false, true, true, false, false, false, false)
         addLeftIcons(menuItemsInitialValues, floatingObject)
         menuItemsInitialValues.push(
           {
-            action: 'Edit Product',
-            actionFunction: uiObject.codeEditor.activate,
-            label: 'Edit Product',
+            action: 'Configure Product',
+            actionFunction: uiObject.configEditor.activate,
+            label: 'Configure Product',
             visible: true,
             iconPathOn: 'html',
             iconPathOff: 'html',
@@ -1418,16 +1418,16 @@ function newUiObjectConstructor () {
         break
       }
       case 'Record Property': {
-        uiObject.codeEditor = newCodeEditor()
-        uiObject.codeEditor.isVisibleFunction = uiObject.isVisibleFunction
-        uiObject.codeEditor.initialize()
-        uiObject.codeEditor.container.connectToParent(uiObject.container, false, false, true, true, false, false, false, false)
+        uiObject.configEditor = newConfigEditor()
+        uiObject.configEditor.isVisibleFunction = uiObject.isVisibleFunction
+        uiObject.configEditor.initialize()
+        uiObject.configEditor.container.connectToParent(uiObject.container, false, false, true, true, false, false, false, false)
         addLeftIcons(menuItemsInitialValues, floatingObject)
         menuItemsInitialValues.push(
           {
-            action: 'Edit Property',
-            actionFunction: uiObject.codeEditor.activate,
-            label: 'Edit Property',
+            action: 'Configure Property',
+            actionFunction: uiObject.configEditor.activate,
+            label: 'Configure Property',
             visible: true,
             iconPathOn: 'html',
             iconPathOff: 'html',
@@ -1486,16 +1486,16 @@ function newUiObjectConstructor () {
         break
       }
       case 'Dataset Definition': {
-        uiObject.codeEditor = newCodeEditor()
-        uiObject.codeEditor.isVisibleFunction = uiObject.isVisibleFunction
-        uiObject.codeEditor.initialize()
-        uiObject.codeEditor.container.connectToParent(uiObject.container, false, false, true, true, false, false, false, false)
+        uiObject.configEditor = newConfigEditor()
+        uiObject.configEditor.isVisibleFunction = uiObject.isVisibleFunction
+        uiObject.configEditor.initialize()
+        uiObject.configEditor.container.connectToParent(uiObject.container, false, false, true, true, false, false, false, false)
         addLeftIcons(menuItemsInitialValues, floatingObject)
         menuItemsInitialValues.push(
           {
-            action: 'Edit Definition',
-            actionFunction: uiObject.codeEditor.activate,
-            label: 'Edit Definition',
+            action: 'Configure Definition',
+            actionFunction: uiObject.configEditor.activate,
+            label: 'Configure Definition',
             visible: true,
             iconPathOn: 'html',
             iconPathOff: 'html',
@@ -1539,16 +1539,16 @@ function newUiObjectConstructor () {
         break
       }
       case 'Plotter': {
-        uiObject.codeEditor = newCodeEditor()
-        uiObject.codeEditor.isVisibleFunction = uiObject.isVisibleFunction
-        uiObject.codeEditor.initialize()
-        uiObject.codeEditor.container.connectToParent(uiObject.container, false, false, true, true, false, false, false, false)
+        uiObject.configEditor = newConfigEditor()
+        uiObject.configEditor.isVisibleFunction = uiObject.isVisibleFunction
+        uiObject.configEditor.initialize()
+        uiObject.configEditor.container.connectToParent(uiObject.container, false, false, true, true, false, false, false, false)
         addLeftIcons(menuItemsInitialValues, floatingObject)
         menuItemsInitialValues.push(
           {
-            action: 'Edit Plotter',
-            actionFunction: uiObject.codeEditor.activate,
-            label: 'Edit Plotter',
+            action: 'Configure Plotter',
+            actionFunction: uiObject.configEditor.activate,
+            label: 'Configure Plotter',
             visible: true,
             iconPathOn: 'html',
             iconPathOff: 'html',
@@ -1605,16 +1605,16 @@ function newUiObjectConstructor () {
         break
       }
       case 'Plotter Module': {
-        uiObject.codeEditor = newCodeEditor()
-        uiObject.codeEditor.isVisibleFunction = uiObject.isVisibleFunction
-        uiObject.codeEditor.initialize()
-        uiObject.codeEditor.container.connectToParent(uiObject.container, false, false, true, true, false, false, false, false)
+        uiObject.configEditor = newConfigEditor()
+        uiObject.configEditor.isVisibleFunction = uiObject.isVisibleFunction
+        uiObject.configEditor.initialize()
+        uiObject.configEditor.container.connectToParent(uiObject.container, false, false, true, true, false, false, false, false)
         addLeftIcons(menuItemsInitialValues, floatingObject)
         menuItemsInitialValues.push(
           {
-            action: 'Edit Plotter Module',
-            actionFunction: uiObject.codeEditor.activate,
-            label: 'Edit Plotter Module',
+            action: 'Configure Plotter Module',
+            actionFunction: uiObject.configEditor.activate,
+            label: 'Configure Plotter Module',
             visible: true,
             iconPathOn: 'html',
             iconPathOff: 'html',
@@ -1876,10 +1876,10 @@ function newUiObjectConstructor () {
         break
       }
       case 'Telegram Bot': {
-        uiObject.codeEditor = newCodeEditor()
-        uiObject.codeEditor.isVisibleFunction = uiObject.isVisibleFunction
-        uiObject.codeEditor.initialize()
-        uiObject.codeEditor.container.connectToParent(uiObject.container, false, false, true, true, false, false, false, false)
+        uiObject.configEditor = newConfigEditor()
+        uiObject.configEditor.isVisibleFunction = uiObject.isVisibleFunction
+        uiObject.configEditor.initialize()
+        uiObject.configEditor.container.connectToParent(uiObject.container, false, false, true, true, false, false, false, false)
         addLeftIcons(menuItemsInitialValues, floatingObject)
         menuItemsInitialValues.push(
           {
@@ -1896,9 +1896,9 @@ function newUiObjectConstructor () {
         )
         menuItemsInitialValues.push(
           {
-            action: 'Edit Telegram Bot',
-            actionFunction: uiObject.codeEditor.activate,
-            label: 'Edit Telegram Bot',
+            action: 'Configure Telegram Bot',
+            actionFunction: uiObject.configEditor.activate,
+            label: 'Configure Telegram Bot',
             visible: true,
             iconPathOn: 'html',
             iconPathOff: 'html',
@@ -1942,10 +1942,10 @@ function newUiObjectConstructor () {
         break
       }
       case 'Announcement': {
-        uiObject.codeEditor = newCodeEditor()
-        uiObject.codeEditor.isVisibleFunction = uiObject.isVisibleFunction
-        uiObject.codeEditor.initialize()
-        uiObject.codeEditor.container.connectToParent(uiObject.container, false, false, true, true, false, false, false, false)
+        uiObject.configEditor = newConfigEditor()
+        uiObject.configEditor.isVisibleFunction = uiObject.isVisibleFunction
+        uiObject.configEditor.initialize()
+        uiObject.configEditor.container.connectToParent(uiObject.container, false, false, true, true, false, false, false, false)
         addLeftIcons(menuItemsInitialValues, floatingObject)
         menuItemsInitialValues.push(
           {
@@ -1965,9 +1965,9 @@ function newUiObjectConstructor () {
         addLeftIcons(menuItemsInitialValues, floatingObject)
         menuItemsInitialValues.push(
           {
-            action: 'Edit Announcement',
-            actionFunction: uiObject.codeEditor.activate,
-            label: 'Edit Announcement',
+            action: 'Configure Announcement',
+            actionFunction: uiObject.configEditor.activate,
+            label: 'Configure Announcement',
             visible: true,
             iconPathOn: 'html',
             iconPathOff: 'html',
@@ -2058,16 +2058,16 @@ function newUiObjectConstructor () {
         break
       }
       case 'Layer': {
-        uiObject.codeEditor = newCodeEditor()
-        uiObject.codeEditor.isVisibleFunction = uiObject.isVisibleFunction
-        uiObject.codeEditor.initialize()
-        uiObject.codeEditor.container.connectToParent(uiObject.container, false, false, true, true, false, false, false, false)
+        uiObject.configEditor = newConfigEditor()
+        uiObject.configEditor.isVisibleFunction = uiObject.isVisibleFunction
+        uiObject.configEditor.initialize()
+        uiObject.configEditor.container.connectToParent(uiObject.container, false, false, true, true, false, false, false, false)
         addLeftIcons(menuItemsInitialValues, floatingObject)
         menuItemsInitialValues.push(
           {
-            action: 'Edit Layer',
-            actionFunction: uiObject.codeEditor.activate,
-            label: 'Edit Layer',
+            action: 'Configure Layer',
+            actionFunction: uiObject.configEditor.activate,
+            label: 'Configure Layer',
             visible: true,
             iconPathOn: 'html',
             iconPathOff: 'html',
@@ -2288,17 +2288,17 @@ function newUiObjectConstructor () {
         break
       }
       case 'Sensor Bot Instance': {
-        uiObject.codeEditor = newCodeEditor()
-        uiObject.codeEditor.isVisibleFunction = uiObject.isVisibleFunction
-        uiObject.codeEditor.initialize()
-        uiObject.codeEditor.container.connectToParent(uiObject.container, false, false, true, true, false, false, false, false)
+        uiObject.configEditor = newConfigEditor()
+        uiObject.configEditor.isVisibleFunction = uiObject.isVisibleFunction
+        uiObject.configEditor.initialize()
+        uiObject.configEditor.container.connectToParent(uiObject.container, false, false, true, true, false, false, false, false)
 
         addLeftIcons(menuItemsInitialValues, floatingObject)
         menuItemsInitialValues.push(
           {
-            action: 'Edit Sensor Bot Instance',
-            actionFunction: uiObject.codeEditor.activate,
-            label: 'Edit Sensor Bot Instance',
+            action: 'Configure Sensor Bot Instance',
+            actionFunction: uiObject.configEditor.activate,
+            label: 'Configure Sensor Bot Instance',
             visible: true,
             iconPathOn: 'html',
             iconPathOff: 'html',
@@ -2355,17 +2355,17 @@ function newUiObjectConstructor () {
         break
       }
       case 'Indicator Bot Instance': {
-        uiObject.codeEditor = newCodeEditor()
-        uiObject.codeEditor.isVisibleFunction = uiObject.isVisibleFunction
-        uiObject.codeEditor.initialize()
-        uiObject.codeEditor.container.connectToParent(uiObject.container, false, false, true, true, false, false, false, false)
+        uiObject.configEditor = newConfigEditor()
+        uiObject.configEditor.isVisibleFunction = uiObject.isVisibleFunction
+        uiObject.configEditor.initialize()
+        uiObject.configEditor.container.connectToParent(uiObject.container, false, false, true, true, false, false, false, false)
 
         addLeftIcons(menuItemsInitialValues, floatingObject)
         menuItemsInitialValues.push(
           {
-            action: 'Edit Indicator Bot Instance',
-            actionFunction: uiObject.codeEditor.activate,
-            label: 'Edit Indicator Bot Instance',
+            action: 'Configure Indicator Bot Instance',
+            actionFunction: uiObject.configEditor.activate,
+            label: 'Configure Indicator Bot Instance',
             visible: true,
             iconPathOn: 'html',
             iconPathOff: 'html',
@@ -2422,17 +2422,17 @@ function newUiObjectConstructor () {
         break
       }
       case 'Trading Bot Instance': {
-        uiObject.codeEditor = newCodeEditor()
-        uiObject.codeEditor.isVisibleFunction = uiObject.isVisibleFunction
-        uiObject.codeEditor.initialize()
-        uiObject.codeEditor.container.connectToParent(uiObject.container, false, false, true, true, false, false, false, false)
+        uiObject.configEditor = newConfigEditor()
+        uiObject.configEditor.isVisibleFunction = uiObject.isVisibleFunction
+        uiObject.configEditor.initialize()
+        uiObject.configEditor.container.connectToParent(uiObject.container, false, false, true, true, false, false, false, false)
 
         addLeftIcons(menuItemsInitialValues, floatingObject)
         menuItemsInitialValues.push(
           {
-            action: 'Edit Trading Bot Instance',
-            actionFunction: uiObject.codeEditor.activate,
-            label: 'Edit Trading Bot Instance',
+            action: 'Configure Trading Bot Instance',
+            actionFunction: uiObject.configEditor.activate,
+            label: 'Configure Trading Bot Instance',
             visible: true,
             iconPathOn: 'html',
             iconPathOff: 'html',
@@ -2489,10 +2489,10 @@ function newUiObjectConstructor () {
         break
       }
       case 'Process Instance': {
-        uiObject.codeEditor = newCodeEditor()
-        uiObject.codeEditor.isVisibleFunction = uiObject.isVisibleFunction
-        uiObject.codeEditor.initialize()
-        uiObject.codeEditor.container.connectToParent(uiObject.container, false, false, true, true, false, false, false, false)
+        uiObject.configEditor = newConfigEditor()
+        uiObject.configEditor.isVisibleFunction = uiObject.isVisibleFunction
+        uiObject.configEditor.initialize()
+        uiObject.configEditor.container.connectToParent(uiObject.container, false, false, true, true, false, false, false, false)
 
         addLeftIcons(menuItemsInitialValues, floatingObject)
 
@@ -2560,9 +2560,9 @@ function newUiObjectConstructor () {
                     )
             menuItemsInitialValues.push(
               {
-                action: 'Edit Process Instance',
-                actionFunction: uiObject.codeEditor.activate,
-                label: 'Edit Process Instance',
+                action: 'Configure Process Instance',
+                actionFunction: uiObject.configEditor.activate,
+                label: 'Configure Process Instance',
                 visible: true,
                 iconPathOn: 'html',
                 iconPathOff: 'html',
@@ -2608,9 +2608,9 @@ function newUiObjectConstructor () {
           default: {
             menuItemsInitialValues.push(
               {
-                action: 'Edit Process Instance',
-                actionFunction: uiObject.codeEditor.activate,
-                label: 'Edit Process Instance',
+                action: 'Configure Process Instance',
+                actionFunction: uiObject.configEditor.activate,
+                label: 'Configure Process Instance',
                 visible: true,
                 iconPathOn: 'html',
                 iconPathOff: 'html',
@@ -2657,10 +2657,10 @@ function newUiObjectConstructor () {
         break
       }
       case 'Backtesting Session': {
-        uiObject.codeEditor = newCodeEditor()
-        uiObject.codeEditor.isVisibleFunction = uiObject.isVisibleFunction
-        uiObject.codeEditor.initialize()
-        uiObject.codeEditor.container.connectToParent(uiObject.container, false, false, true, true, false, false, false, false)
+        uiObject.configEditor = newConfigEditor()
+        uiObject.configEditor.isVisibleFunction = uiObject.isVisibleFunction
+        uiObject.configEditor.initialize()
+        uiObject.configEditor.container.connectToParent(uiObject.container, false, false, true, true, false, false, false, false)
 
         addLeftIcons(menuItemsInitialValues, floatingObject)
         menuItemsInitialValues.push(
@@ -2733,9 +2733,9 @@ function newUiObjectConstructor () {
               )
         menuItemsInitialValues.push(
           {
-            action: 'Edit Session',
-            actionFunction: uiObject.codeEditor.activate,
-            label: 'Edit Session',
+            action: 'Configure Session',
+            actionFunction: uiObject.configEditor.activate,
+            label: 'Configure Session',
             visible: true,
             iconPathOn: 'html',
             iconPathOff: 'html',
@@ -2779,10 +2779,10 @@ function newUiObjectConstructor () {
         break
       }
       case 'Live Trading Session': {
-        uiObject.codeEditor = newCodeEditor()
-        uiObject.codeEditor.isVisibleFunction = uiObject.isVisibleFunction
-        uiObject.codeEditor.initialize()
-        uiObject.codeEditor.container.connectToParent(uiObject.container, false, false, true, true, false, false, false, false)
+        uiObject.configEditor = newConfigEditor()
+        uiObject.configEditor.isVisibleFunction = uiObject.isVisibleFunction
+        uiObject.configEditor.initialize()
+        uiObject.configEditor.container.connectToParent(uiObject.container, false, false, true, true, false, false, false, false)
 
         addLeftIcons(menuItemsInitialValues, floatingObject)
         menuItemsInitialValues.push(
@@ -2855,9 +2855,9 @@ function newUiObjectConstructor () {
                 )
         menuItemsInitialValues.push(
           {
-            action: 'Edit Session',
-            actionFunction: uiObject.codeEditor.activate,
-            label: 'Edit Session',
+            action: 'Configure Session',
+            actionFunction: uiObject.configEditor.activate,
+            label: 'Configure Session',
             visible: true,
             iconPathOn: 'html',
             iconPathOff: 'html',
@@ -2901,10 +2901,10 @@ function newUiObjectConstructor () {
         break
       }
       case 'Fordward Testing Session': {
-        uiObject.codeEditor = newCodeEditor()
-        uiObject.codeEditor.isVisibleFunction = uiObject.isVisibleFunction
-        uiObject.codeEditor.initialize()
-        uiObject.codeEditor.container.connectToParent(uiObject.container, false, false, true, true, false, false, false, false)
+        uiObject.configEditor = newConfigEditor()
+        uiObject.configEditor.isVisibleFunction = uiObject.isVisibleFunction
+        uiObject.configEditor.initialize()
+        uiObject.configEditor.container.connectToParent(uiObject.container, false, false, true, true, false, false, false, false)
 
         addLeftIcons(menuItemsInitialValues, floatingObject)
         menuItemsInitialValues.push(
@@ -2977,9 +2977,9 @@ function newUiObjectConstructor () {
                 )
         menuItemsInitialValues.push(
           {
-            action: 'Edit Session',
-            actionFunction: uiObject.codeEditor.activate,
-            label: 'Edit Session',
+            action: 'Configure Session',
+            actionFunction: uiObject.configEditor.activate,
+            label: 'Configure Session',
             visible: true,
             iconPathOn: 'html',
             iconPathOff: 'html',
@@ -3023,10 +3023,10 @@ function newUiObjectConstructor () {
         break
       }
       case 'Paper Trading Session': {
-        uiObject.codeEditor = newCodeEditor()
-        uiObject.codeEditor.isVisibleFunction = uiObject.isVisibleFunction
-        uiObject.codeEditor.initialize()
-        uiObject.codeEditor.container.connectToParent(uiObject.container, false, false, true, true, false, false, false, false)
+        uiObject.configEditor = newConfigEditor()
+        uiObject.configEditor.isVisibleFunction = uiObject.isVisibleFunction
+        uiObject.configEditor.initialize()
+        uiObject.configEditor.container.connectToParent(uiObject.container, false, false, true, true, false, false, false, false)
 
         addLeftIcons(menuItemsInitialValues, floatingObject)
         menuItemsInitialValues.push(
@@ -3099,9 +3099,9 @@ function newUiObjectConstructor () {
                 )
         menuItemsInitialValues.push(
           {
-            action: 'Edit Session',
-            actionFunction: uiObject.codeEditor.activate,
-            label: 'Edit Session',
+            action: 'Configure Session',
+            actionFunction: uiObject.configEditor.activate,
+            label: 'Configure Session',
             visible: true,
             iconPathOn: 'html',
             iconPathOff: 'html',
@@ -3244,17 +3244,17 @@ function newUiObjectConstructor () {
         break
       }
       case 'Exchange Account Key': {
-        uiObject.codeEditor = newCodeEditor()
-        uiObject.codeEditor.isVisibleFunction = uiObject.isVisibleFunction
-        uiObject.codeEditor.initialize()
-        uiObject.codeEditor.container.connectToParent(uiObject.container, false, false, true, true, false, false, false, false)
+        uiObject.configEditor = newConfigEditor()
+        uiObject.configEditor.isVisibleFunction = uiObject.isVisibleFunction
+        uiObject.configEditor.initialize()
+        uiObject.configEditor.container.connectToParent(uiObject.container, false, false, true, true, false, false, false, false)
 
         addLeftIcons(menuItemsInitialValues, floatingObject)
         menuItemsInitialValues.push(
           {
-            action: 'Edit Key Value',
-            actionFunction: uiObject.codeEditor.activate,
-            label: 'Edit Key Value',
+            action: 'Configure Key Value',
+            actionFunction: uiObject.configEditor.activate,
+            label: 'Configure Key Value',
             visible: true,
             iconPathOn: 'html',
             iconPathOff: 'html',
@@ -3393,17 +3393,17 @@ function newUiObjectConstructor () {
         break
       }
       case 'Base Asset': {
-        uiObject.codeEditor = newCodeEditor()
-        uiObject.codeEditor.isVisibleFunction = uiObject.isVisibleFunction
-        uiObject.codeEditor.initialize()
-        uiObject.codeEditor.container.connectToParent(uiObject.container, false, false, true, true, false, false, false, false)
+        uiObject.configEditor = newConfigEditor()
+        uiObject.configEditor.isVisibleFunction = uiObject.isVisibleFunction
+        uiObject.configEditor.initialize()
+        uiObject.configEditor.container.connectToParent(uiObject.container, false, false, true, true, false, false, false, false)
 
         addLeftIcons(menuItemsInitialValues, floatingObject)
         menuItemsInitialValues.push(
           {
-            action: 'Edit Base Asset',
-            actionFunction: uiObject.codeEditor.activate,
-            label: 'Edit Base Asset',
+            action: 'Configure Base Asset',
+            actionFunction: uiObject.configEditor.activate,
+            label: 'Configure Base Asset',
             visible: true,
             iconPathOn: 'settings',
             iconPathOff: 'settings',
@@ -3446,17 +3446,17 @@ function newUiObjectConstructor () {
         break
       }
       case 'Time Range': {
-        uiObject.codeEditor = newCodeEditor()
-        uiObject.codeEditor.isVisibleFunction = uiObject.isVisibleFunction
-        uiObject.codeEditor.initialize()
-        uiObject.codeEditor.container.connectToParent(uiObject.container, false, false, true, true, false, false, false, false)
+        uiObject.configEditor = newConfigEditor()
+        uiObject.configEditor.isVisibleFunction = uiObject.isVisibleFunction
+        uiObject.configEditor.initialize()
+        uiObject.configEditor.container.connectToParent(uiObject.container, false, false, true, true, false, false, false, false)
 
         addLeftIcons(menuItemsInitialValues, floatingObject)
         menuItemsInitialValues.push(
           {
-            action: 'Edit Time Range',
-            actionFunction: uiObject.codeEditor.activate,
-            label: 'Edit Time Range',
+            action: 'Configure Time Range',
+            actionFunction: uiObject.configEditor.activate,
+            label: 'Configure Time Range',
             visible: true,
             iconPathOn: 'settings',
             iconPathOff: 'settings',
@@ -3499,17 +3499,17 @@ function newUiObjectConstructor () {
         break
       }
       case 'Time Period': {
-        uiObject.codeEditor = newCodeEditor()
-        uiObject.codeEditor.isVisibleFunction = uiObject.isVisibleFunction
-        uiObject.codeEditor.initialize()
-        uiObject.codeEditor.container.connectToParent(uiObject.container, false, false, true, true, false, false, false, false)
+        uiObject.configEditor = newConfigEditor()
+        uiObject.configEditor.isVisibleFunction = uiObject.isVisibleFunction
+        uiObject.configEditor.initialize()
+        uiObject.configEditor.container.connectToParent(uiObject.container, false, false, true, true, false, false, false, false)
 
         addLeftIcons(menuItemsInitialValues, floatingObject)
         menuItemsInitialValues.push(
           {
-            action: 'Edit Time Period',
-            actionFunction: uiObject.codeEditor.activate,
-            label: 'Edit Time Period',
+            action: 'Configure Time Period',
+            actionFunction: uiObject.configEditor.activate,
+            label: 'Configure Time Period',
             visible: true,
             iconPathOn: 'settings',
             iconPathOff: 'settings',
@@ -3552,17 +3552,17 @@ function newUiObjectConstructor () {
         break
       }
       case 'Slippage': {
-        uiObject.codeEditor = newCodeEditor()
-        uiObject.codeEditor.isVisibleFunction = uiObject.isVisibleFunction
-        uiObject.codeEditor.initialize()
-        uiObject.codeEditor.container.connectToParent(uiObject.container, false, false, true, true, false, false, false, false)
+        uiObject.configEditor = newConfigEditor()
+        uiObject.configEditor.isVisibleFunction = uiObject.isVisibleFunction
+        uiObject.configEditor.initialize()
+        uiObject.configEditor.container.connectToParent(uiObject.container, false, false, true, true, false, false, false, false)
 
         addLeftIcons(menuItemsInitialValues, floatingObject)
         menuItemsInitialValues.push(
           {
-            action: 'Edit Slippage',
-            actionFunction: uiObject.codeEditor.activate,
-            label: 'Edit Slippage',
+            action: 'Configure Slippage',
+            actionFunction: uiObject.configEditor.activate,
+            label: 'Configure Slippage',
             visible: true,
             iconPathOn: 'settings',
             iconPathOff: 'settings',
@@ -3605,17 +3605,17 @@ function newUiObjectConstructor () {
         break
       }
       case 'Fee Structure': {
-        uiObject.codeEditor = newCodeEditor()
-        uiObject.codeEditor.isVisibleFunction = uiObject.isVisibleFunction
-        uiObject.codeEditor.initialize()
-        uiObject.codeEditor.container.connectToParent(uiObject.container, false, false, true, true, false, false, false, false)
+        uiObject.configEditor = newConfigEditor()
+        uiObject.configEditor.isVisibleFunction = uiObject.isVisibleFunction
+        uiObject.configEditor.initialize()
+        uiObject.configEditor.container.connectToParent(uiObject.container, false, false, true, true, false, false, false, false)
 
         addLeftIcons(menuItemsInitialValues, floatingObject)
         menuItemsInitialValues.push(
           {
-            action: 'Edit Fee Structure',
-            actionFunction: uiObject.codeEditor.activate,
-            label: 'Edit Fee Structure',
+            action: 'Configure Fee Structure',
+            actionFunction: uiObject.configEditor.activate,
+            label: 'Configure Fee Structure',
             visible: true,
             iconPathOn: 'settings',
             iconPathOff: 'settings',
@@ -4424,16 +4424,16 @@ function newUiObjectConstructor () {
         break
       }
       case 'Formula': {
-        uiObject.codeEditor = newCodeEditor()
-        uiObject.codeEditor.isVisibleFunction = uiObject.isVisibleFunction
-        uiObject.codeEditor.initialize()
-        uiObject.codeEditor.container.connectToParent(uiObject.container, false, false, true, true, false, false, false, false)
+        uiObject.formulaEditor = newFormulaEditor()
+        uiObject.formulaEditor.isVisibleFunction = uiObject.isVisibleFunction
+        uiObject.formulaEditor.initialize()
+        uiObject.formulaEditor.container.connectToParent(uiObject.container, false, false, true, true, false, false, false, false)
 
         addLeftIcons(menuItemsInitialValues, floatingObject)
         menuItemsInitialValues.push(
           {
             action: 'Edit Formula',
-            actionFunction: uiObject.codeEditor.activate,
+            actionFunction: uiObject.formulaEditor.activate,
             label: 'Edit Formula',
             visible: true,
             iconPathOn: 'html',
@@ -4572,7 +4572,27 @@ function newUiObjectConstructor () {
         break
       }
       case 'Condition': {
+        uiObject.conditionEditor = newConditionEditor()
+        uiObject.conditionEditor.isVisibleFunction = uiObject.isVisibleFunction
+        uiObject.conditionEditor.initialize()
+        uiObject.conditionEditor.container.connectToParent(uiObject.container, false, false, true, true, false, false, false, false)
+
         addLeftIcons(menuItemsInitialValues, floatingObject)
+        menuItemsInitialValues.push(
+          {
+            action: 'Edit Condition',
+            actionFunction: uiObject.conditionEditor.activate,
+            label: 'Edit Condition',
+            visible: true,
+            iconPathOn: 'html',
+            iconPathOff: 'html',
+            rawRadius: 8,
+            targetRadius: 0,
+            currentRadius: 0,
+            angle: -60,
+            dontShowAtFullscreen: true
+          }
+        )
         menuItemsInitialValues.push(
           {
             action: 'Add Code',
@@ -4585,7 +4605,7 @@ function newUiObjectConstructor () {
             rawRadius: 8,
             targetRadius: 0,
             currentRadius: 0,
-            angle: -40
+            angle: -20
           }
         )
         menuItemsInitialValues.push(
@@ -4601,7 +4621,7 @@ function newUiObjectConstructor () {
             rawRadius: 8,
             targetRadius: 0,
             currentRadius: 0,
-            angle: 0
+            angle: 20
           }
         )
         menuItemsInitialValues.push(
@@ -4615,7 +4635,7 @@ function newUiObjectConstructor () {
             rawRadius: 8,
             targetRadius: 0,
             currentRadius: 0,
-            angle: 40
+            angle: 60
           }
         )
         break