arrangementStyle 2

DesignSpace/Workspace/FunctionLibraries/CCXTFunctions.js

@@ -52,9 +52,9 @@ function newCCXTFunctions () {
           newExchange.exchangeAssets.payload.floatingObject.distanceToParent = DISTANCE_TO_PARENT.PARENT_050X
           newExchange.exchangeMarkets.payload.floatingObject.distanceToParent = DISTANCE_TO_PARENT.PARENT_100X
           newExchange.exchangeAccounts.payload.floatingObject.distanceToParent = DISTANCE_TO_PARENT.PARENT_025X
-          newExchange.exchangeAssets.payload.floatingObject.arrangementStyle = ARRANGEMENT_STYLE.CIRCULAR
-          newExchange.exchangeMarkets.payload.floatingObject.arrangementStyle = ARRANGEMENT_STYLE.CIRCULAR
-          newExchange.exchangeAccounts.payload.floatingObject.arrangementStyle = ARRANGEMENT_STYLE.CIRCULAR
+          newExchange.exchangeAssets.payload.floatingObject.arrangementStyle = ARRANGEMENT_STYLE.CONCAVE
+          newExchange.exchangeMarkets.payload.floatingObject.arrangementStyle = ARRANGEMENT_STYLE.CONCAVE
+          newExchange.exchangeAccounts.payload.floatingObject.arrangementStyle = ARRANGEMENT_STYLE.CONCAVE
         }
       }
     }
@@ -117,7 +117,7 @@ function newCCXTFunctions () {
             newAsseet.code = '{ \n\"codeName\": \"' + name + '\"\n}'
             newAsseet.payload.floatingObject.angleToParent = ANGLE_TO_PARENT.RANGE_360
             newAsseet.payload.floatingObject.distanceToParent = DISTANCE_TO_PARENT.PARENT_200X
-            newAsseet.payload.floatingObject.arrangementStyle = ARRANGEMENT_STYLE.CIRCULAR
+            newAsseet.payload.floatingObject.arrangementStyle = ARRANGEMENT_STYLE.CONCAVE
           }
         }
       }
@@ -188,13 +188,13 @@ function newCCXTFunctions () {
             newMarket.code = '{ \n\"codeName\": \"' + name + '\"\n}'
             newMarket.payload.floatingObject.angleToParent = ANGLE_TO_PARENT.RANGE_180
             newMarket.payload.floatingObject.distanceToParent = DISTANCE_TO_PARENT.PARENT_050X
-            newMarket.payload.floatingObject.arrangementStyle = ARRANGEMENT_STYLE.CIRCULAR
+            newMarket.payload.floatingObject.arrangementStyle = ARRANGEMENT_STYLE.CONCAVE
             newMarket.baseAsset.payload.floatingObject.angleToParent = ANGLE_TO_PARENT.RANGE_45
             newMarket.quotedAsset.payload.floatingObject.angleToParent = ANGLE_TO_PARENT.RANGE_45
             newMarket.baseAsset.payload.floatingObject.distanceToParent = DISTANCE_TO_PARENT.PARENT_100X
             newMarket.quotedAsset.payload.floatingObject.distanceToParent = DISTANCE_TO_PARENT.PARENT_150X
-            newMarket.baseAsset.payload.floatingObject.arrangementStyle = ARRANGEMENT_STYLE.CIRCULAR
-            newMarket.quotedAsset.payload.floatingObject.arrangementStyle = ARRANGEMENT_STYLE.CIRCULAR
+            newMarket.baseAsset.payload.floatingObject.arrangementStyle = ARRANGEMENT_STYLE.CONCAVE
+            newMarket.quotedAsset.payload.floatingObject.arrangementStyle = ARRANGEMENT_STYLE.CONCAVE
             newMarket.baseAsset.payload.referenceParent = baseAsset
             newMarket.quotedAsset.payload.referenceParent = quotedAsset
 

FloatingSpace/FloatingObject.js

@@ -24,7 +24,7 @@ function newFloatingObject () {
     isFrozen: false,
     angleToParent: undefined,
     distanceToParent: undefined,
-    arrangementStyle: ARRANGEMENT_STYLE.CIRCULAR,
+    arrangementStyle: ARRANGEMENT_STYLE.CONCAVE,
     isCollapsed: false,
     isParentCollapsed: false,
     frozenManually: false,
@@ -231,14 +231,23 @@ function newFloatingObject () {
 
   function arrangementStyleToggle () {
     switch (thisObject.arrangementStyle) {
-      case ARRANGEMENT_STYLE.CIRCULAR:
-        thisObject.arrangementStyle = ARRANGEMENT_STYLE.VERTICAL
+      case ARRANGEMENT_STYLE.CONCAVE:
+        thisObject.arrangementStyle = ARRANGEMENT_STYLE.CONVEX
         break
-      case ARRANGEMENT_STYLE.VERTICAL:
-        thisObject.arrangementStyle = ARRANGEMENT_STYLE.HORIZONTAL
+      case ARRANGEMENT_STYLE.CONVEX:
+        thisObject.arrangementStyle = ARRANGEMENT_STYLE.VERTICAL_RIGHT
         break
-      case ARRANGEMENT_STYLE.HORIZONTAL:
-        thisObject.arrangementStyle = ARRANGEMENT_STYLE.CIRCULAR
+      case ARRANGEMENT_STYLE.VERTICAL_RIGHT:
+        thisObject.arrangementStyle = ARRANGEMENT_STYLE.VERTICAL_LEFT
+        break
+      case ARRANGEMENT_STYLE.VERTICAL_LEFT:
+        thisObject.arrangementStyle = ARRANGEMENT_STYLE.HORIZONTAL_BOTTOM
+        break
+      case ARRANGEMENT_STYLE.HORIZONTAL_BOTTOM:
+        thisObject.arrangementStyle = ARRANGEMENT_STYLE.HORIZONTAL_TOP
+        break
+      case ARRANGEMENT_STYLE.HORIZONTAL_TOP:
+        thisObject.arrangementStyle = ARRANGEMENT_STYLE.CONCAVE
         break
     }
 
@@ -354,10 +363,51 @@ function newFloatingObject () {
 
       if (distanceToParent > 3000 || thisObject.isPinned === true) { return } // this is introduced to avoid edges cases when importing workspaces.
 
-      newPosition = {
-        x: parent.payload.position.x + distanceToParent * Math.cos(toRadians(thisObject.payload.angle)),
-        y: parent.payload.position.y + distanceToParent * Math.sin(toRadians(thisObject.payload.angle))
+      switch (thisObject.arrangementStyle) {
+        case ARRANGEMENT_STYLE.CONCAVE: {
+          newPosition = {
+            x: parent.payload.position.x + distanceToParent * Math.cos(toRadians(thisObject.payload.angle)),
+            y: parent.payload.position.y + distanceToParent * Math.sin(toRadians(thisObject.payload.angle))
+          }
+          break
+        }
+        case ARRANGEMENT_STYLE.CONVEX: {
+          newPosition = {
+            x: parent.payload.position.x + 2 * distanceToParent * Math.cos(toRadians(lastParentAngle)) + distanceToParent * Math.cos(toRadians(thisObject.payload.angle + 180)),
+            y: parent.payload.position.y + 2 * distanceToParent * Math.sin(toRadians(lastParentAngle)) + distanceToParent * Math.sin(toRadians(thisObject.payload.angle + 180))
+          }
+          break
+        }
+        case ARRANGEMENT_STYLE.HORIZONTAL_BOTTOM: {
+          newPosition = {
+            x: parent.payload.position.x + distanceToParent * Math.tan(toRadians(thisObject.payload.angle)),
+            y: parent.payload.position.y + distanceToParent
+          }
+          break
+        }
+        case ARRANGEMENT_STYLE.HORIZONTAL_TOP: {
+          newPosition = {
+            x: parent.payload.position.x - distanceToParent * Math.tan(toRadians(thisObject.payload.angle)),
+            y: parent.payload.position.y - distanceToParent
+          }
+          break
+        }
+        case ARRANGEMENT_STYLE.VERTICAL_RIGHT: {
+          newPosition = {
+            x: parent.payload.position.x + distanceToParent,
+            y: parent.payload.position.y + distanceToParent * Math.tan(toRadians(thisObject.payload.angle))
+          }
+          break
+        }
+        case ARRANGEMENT_STYLE.VERTICAL_LEFT: {
+          newPosition = {
+            x: parent.payload.position.x - distanceToParent,
+            y: parent.payload.position.y - distanceToParent * Math.tan(toRadians(thisObject.payload.angle))
+          }
+          break
+        }
       }
+
       if (isNaN(newPosition.x) === false) {
         thisObject.container.frame.position.x = newPosition.x
       }

FloatingSpace/UiObjectConstructor.js

@@ -146,7 +146,7 @@ function newUiObjectConstructor () {
       if (floatingObject.angleToParent === undefined) {
         floatingObject.angleToParent = payload.parentNode.payload.floatingObject.angleToParent
         floatingObject.distanceToParent = payload.parentNode.payload.floatingObject.distanceToParent
-        floatingObject.arrangementStyle = closestSibling.payload.floatingObject.arrangementStyle
+        floatingObject.arrangementStyle = payload.parentNode.payload.floatingObject.arrangementStyle
       }
     }
 
@@ -257,7 +257,7 @@ function newUiObjectConstructor () {
         currentStatus: true,
         label: undefined,
         visible: true,
-        icons: ['shapes-polygon', 'shapes-polygon-body', 'shapes-polygon-border'],
+        icons: ['shapes-polygon', 'shapes-polygon-body', 'shapes-polygon-border', 'clone', 'layer-manager', 'process'],
         rawRadius: 12,
         targetRadius: 0,
         currentRadius: 0,

Globals.js

@@ -37,8 +37,8 @@ const DOUBLE_CLICK_ZOOM_IN_IN_LEVEL = 7
 
 const DEBUG = {}
 const ZOOM_OUT_THRESHOLD_FOR_NOT_HIDDING_PANELS = 12
-const ZOOM_OUT_THRESHOLD_FOR_HIDDING_PANELS = 7 
-const ZOOM_OUT_THRESHOLD_FOR_HIDDING_CHARTS_LABELS = 7 
+const ZOOM_OUT_THRESHOLD_FOR_HIDDING_PANELS = 7
+const ZOOM_OUT_THRESHOLD_FOR_HIDDING_CHARTS_LABELS = 7
 const ZOOM_OUT_THRESHOLD_FOR_CHANGING_TIME_FRAME = 3  // This help regulate when to change the Time Frame base on the level of zoom out.
 const ZOOM_OUT_THRESHOLD_FOR_PACKING_OBJECTS_AT_THE_BOTTOM_OR_TOP_OF_VIEWPORT = 2
 const ZOOM_OUT_THRESHOLD_FOR_PLOTTING_IN_LOW_RESOLUTION = 3
@@ -73,9 +73,12 @@ const DISTANCE_TO_PARENT = {
 }
 
 const ARRANGEMENT_STYLE = {
-  CIRCULAR: 0,
-  VERTICAL: 1,
-  HORIZONTAL: 2
+  CONCAVE: 0,
+  CONVEX: 1,
+  VERTICAL_RIGHT: 2,
+  VERTICAL_LEFT: 3,
+  HORIZONTAL_BOTTOM: 4,
+  HORIZONTAL_TOP: 5
 }
 
 /* User Interface Panels */