Running without menues

FloatingSpace/StrategyPart.js

@@ -4,6 +4,7 @@ function newStrategyPart () {
 
   let thisObject = {
     type: undefined,
+    menu: undefined,
     container: undefined,
     physics: physics,
     drawBackground: drawBackground,
@@ -20,7 +21,6 @@ function newStrategyPart () {
   thisObject.container.frame.position.x = 0
   thisObject.container.frame.position.y = 0
 
-  let ballStringMenu = []
   let floatingLayer
   let isMouseOver = false
   let image
@@ -31,10 +31,11 @@ function newStrategyPart () {
   function initialize (pFloatingLayer, pType) {
     floatingLayer = pFloatingLayer
 
+    let menuItemsInitialValues = []
     switch (pType) {
       case 'Strategy': {
         imagePath = 'Images/icons/style-01/quality.png'
-        ballStringMenu = [
+        menuItemsInitialValues = [
           {
             label: 'Settings',
             visible: false,
@@ -59,7 +60,7 @@ function newStrategyPart () {
       }
       case 'Strategy Entry': {
         imagePath = 'Images/icons/style-01/startup.png'
-        ballStringMenu = [
+        menuItemsInitialValues = [
           {
             label: 'Add Situation',
             visible: false,
@@ -74,7 +75,7 @@ function newStrategyPart () {
       }
       case 'Strategy Exit': {
         imagePath = 'Images/icons/style-01/support.png'
-        ballStringMenu = [
+        menuItemsInitialValues = [
           {
             label: 'Add Situation',
             visible: false,
@@ -89,7 +90,7 @@ function newStrategyPart () {
       }
       case 'Trade Entry': {
         imagePath = 'Images/icons/style-01/compass.png'
-        ballStringMenu = [
+        menuItemsInitialValues = [
           {
             label: 'Add Situation',
             visible: false,
@@ -104,7 +105,7 @@ function newStrategyPart () {
       }
       case 'Trade Exit': {
         imagePath = 'Images/icons/style-01/broken-link.png'
-        ballStringMenu = [
+        menuItemsInitialValues = [
           {
             label: 'Add Situation',
             visible: false,
@@ -119,7 +120,7 @@ function newStrategyPart () {
       }
       case 'Stop': {
         imagePath = 'Images/icons/style-01/pixel.png'
-        ballStringMenu = [
+        menuItemsInitialValues = [
           {
             label: 'Add Phase',
             visible: false,
@@ -134,7 +135,7 @@ function newStrategyPart () {
       }
       case 'Take Profit': {
         imagePath = 'Images/icons/style-01/competition.png'
-        ballStringMenu = [
+        menuItemsInitialValues = [
           {
             label: 'Add Phase',
             visible: false,
@@ -149,7 +150,7 @@ function newStrategyPart () {
       }
       case 'Phase': {
         imagePath = 'Images/icons/style-01/placeholder.png'
-        ballStringMenu = [
+        menuItemsInitialValues = [
           {
             label: 'Edit Code',
             visible: false,
@@ -184,7 +185,7 @@ function newStrategyPart () {
       }
       case 'Situation': {
         imagePath = 'Images/icons/style-01/attractive.png'
-        ballStringMenu = [
+        menuItemsInitialValues = [
           {
             label: 'Add Condition',
             visible: false,
@@ -209,7 +210,7 @@ function newStrategyPart () {
       }
       case 'Condition': {
         imagePath = 'Images/icons/style-01/testing.png'
-        ballStringMenu = [
+        menuItemsInitialValues = [
           {
             label: 'Edit Code',
             visible: false,
@@ -237,6 +238,9 @@ function newStrategyPart () {
       }
     }
 
+    thisObject.menu = newCircularMenu()
+    thisObject.menu.initialize(menuItemsInitialValues)
+
 /* Load Part Image */
 
     if (imagePath !== undefined) {
@@ -249,129 +253,48 @@ function newStrategyPart () {
       image.src = window.canvasApp.urlPrefix + imagePath
     }
 
-/* Load Menu Images */
-
-    for (let i = 0; i < ballStringMenu.length; i++) {
-      let menuItem = ballStringMenu[i]
-      menuItem.iconOn = new Image()
-      menuItem.iconOn.onload = onImageLoad
-
-      function onImageLoad () {
-        menuItem.iconOff = new Image()
-        menuItem.iconOff.onload = onImageLoad
-
-        function onImageLoad () {
-          menuItem.canDrawIcon = true
-        }
-        menuItem.iconOff.src = window.canvasApp.urlPrefix + menuItem.imagePathOff
-      }
-      menuItem.iconOn.src = window.canvasApp.urlPrefix + menuItem.imagePathOn
-      menuItem.icon = menuItem.iconOn // The default value is ON.
-    }
-
     thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver)
     thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick)
     thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver)
   }
 
   function getContainer (point) {
-    return undefined
+    let container
+
+    container = thisObject.menu.getContainer(point)
+    if (container !== undefined) { return container }
+
+    if (thisObject.container.frame.isThisPointHere(point, true) === true) {
+      return thisObject.container
+    } else {
+      return undefined
+    }
   }
 
   function physics () {
-        // The menuItems also have a target.
-
-    for (let i = 0; i < ballStringMenu.length; i++) {
-      let menuItem = ballStringMenu[i]
-
-      if (Math.abs(menuItem.currentRadius - menuItem.targetRadius) >= 0.5) {
-        if (menuItem.currentRadius < menuItem.targetRadius) {
-          menuItem.currentRadius = menuItem.currentRadius + 0.5
-        } else {
-          menuItem.currentRadius = menuItem.currentRadius - 0.5
-        }
-      }
-    }
+    thisObject.menu.physics()
   }
 
   function onMouseOver () {
-    for (let i = 0; i < ballStringMenu.length; i++) {
-      let menuItem = ballStringMenu[i]
-
-      menuItem.targetRadius = menuItem.rawRadius * 1.5
-    }
-
+    thisObject.menu.container.eventHandler.raiseEvent('onMouseOver')
     isMouseOver = true
   }
 
   function onMouseNotOver () {
-    for (let i = 0; i < ballStringMenu.length; i++) {
-      let menuItem = ballStringMenu[i]
-
-      menuItem.targetRadius = menuItem.rawRadius * 0 - i * 5
-    }
-
+    thisObject.menu.container.eventHandler.raiseEvent('onMouseNotOver')
     isMouseOver = false
   }
 
   function onMouseClick (event) {
-        /* What we need to do here is to check which menu item was clicked, if any. */
 
-    pPoint = event.point
-    pFloatingObject = event.parent
-
-    let menuItemIndex
-
-    for (let i = 0; i < ballStringMenu.length; i++) {
-      let menuItem = ballStringMenu[i]
-
-      if (menuItem.canDrawIcon === true && menuItem.currentRadius > 1) {
-        let position = {
-          x: pFloatingObject.container.frame.position.x + pFloatingObject.container.frame.radius * 3 / 4 * Math.cos(toRadians(menuItem.angle)),
-          y: pFloatingObject.container.frame.position.y - pFloatingObject.container.frame.radius * 3 / 4 * Math.sin(toRadians(menuItem.angle))
-        }
-
-        browserCanvasContext.drawImage(menuItem.icon, position.x, position.y, menuItem.currentRadius * 2, menuItem.currentRadius * 2)
-
-        let distance = Math.sqrt(Math.pow(position.x - pPoint.x, 2) + Math.pow(position.y - pPoint.y, 2))
-
-        if (distance < menuItem.currentRadius) {
-          menuItemIndex = i
-        }
-      }
-    }
-
-    if (menuItemIndex !== undefined) {
-      switch (menuItemIndex) {
-
-        case 0: {
- // This menu item is to turn ON / OFF the plotting of this bot.
-
-          if (pFloatingObject.payload.profile.plot === true) {
-            pFloatingObject.payload.profile.plot = false
-
-            let menuItem = ballStringMenu[0]
-            menuItem.icon = menuItem.iconOff
-          } else {
-            pFloatingObject.payload.profile.plot = true
-
-            let menuItem = ballStringMenu[0]
-            menuItem.icon = menuItem.iconOn
-          }
-
-          break
-        }
-
-        case 1: {
- // This menu item is to turn ON the Debug Log pannel for the bot.
-
-          break
-        }
-      }
-    }
   }
 
   function drawBackground (pFloatingObject) {
+    drawPartBackground(pFloatingObject)
+    thisObject.menu.drawBackground()
+  }
+
+  function drawPartBackground (pFloatingObject) {
     if (pFloatingObject.payload.parentNode === undefined) { return }
 
     /* Here we do the trick of recalculation the position of the anchor by setting it to the position of its parent */
@@ -405,7 +328,7 @@ function newStrategyPart () {
     if (pFloatingObject.container.frame.radius > 0.5) {
             /* Target Spot */
 
-      var radius = 1
+      let radius = 1
 
       browserCanvasContext.beginPath()
       browserCanvasContext.arc(point.x, point.y, radius, 0, Math.PI * 2, true)
@@ -416,6 +339,11 @@ function newStrategyPart () {
   }
 
   function drawForeground (pFloatingObject) {
+    drawPartForeground(pFloatingObject)
+    thisObject.menu.drawForeground()
+  }
+
+  function drawPartForeground (pFloatingObject) {
     let position = {
       x: pFloatingObject.container.frame.position.x,
       y: pFloatingObject.container.frame.position.y
@@ -423,18 +351,6 @@ function newStrategyPart () {
 
     let radius = pFloatingObject.container.frame.radius
 
-    if (radius > 5) {
-            /* Contourn */
-/*
-      browserCanvasContext.beginPath()
-      browserCanvasContext.arc(position.x, position.y, radius, 0, Math.PI * 2, true)
-      browserCanvasContext.closePath()
-      browserCanvasContext.strokeStyle = 'rgba(30, 30, 30, 0.75)'
-      browserCanvasContext.lineWidth = 1
-      browserCanvasContext.stroke()
-      */
-    }
-
     if (radius > 0.5 && image === undefined) {
             /* Main FloatingObject */
 
@@ -463,38 +379,6 @@ function newStrategyPart () {
       }
     }
 
-        /* StringBall Menu */
-
-    for (let i = 0; i < ballStringMenu.length; i++) {
-      let menuItem = ballStringMenu[i]
-
-      if (menuItem.canDrawIcon === true && menuItem.currentRadius > 1) {
-        let menuPosition = {
-          x: position.x + radius * 3 / 4 * Math.cos(toRadians(menuItem.angle)),
-          y: position.y - radius * 3 / 4 * Math.sin(toRadians(menuItem.angle)) }
-
-        browserCanvasContext.drawImage(menuItem.icon, menuPosition.x - menuItem.currentRadius, menuPosition.y - menuItem.currentRadius, menuItem.currentRadius * 2, menuItem.currentRadius * 2)
-
-        /* Menu Label */
-
-        let labelPoint
-        let fontSize = 10
-
-        browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
-
-        if (menuItem.label !== undefined && menuItem.currentRadius >= menuItem.targetRadius) {
-          labelPoint = {
-            x: menuPosition.x + menuItem.currentRadius + 10,
-            y: menuPosition.y + fontSize * FONT_ASPECT_RATIO
-          }
-
-          browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
-          browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)'
-          browserCanvasContext.fillText(menuItem.label, labelPoint.x, labelPoint.y)
-        }
-      }
-    }
-
         /* Label Text */
 
     if (radius > 6 && isMouseOver === true) {