diff --git a/CanvasApp/DesignSpace/Workspace/FunctionLibraries/CCXTFunctions.js b/CanvasApp/DesignSpace/Workspace/FunctionLibraries/CCXTFunctions.js index f02a1733a..96ce572f7 100644 --- a/CanvasApp/DesignSpace/Workspace/FunctionLibraries/CCXTFunctions.js +++ b/CanvasApp/DesignSpace/Workspace/FunctionLibraries/CCXTFunctions.js @@ -52,6 +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.CONCAVE + newExchange.exchangeMarkets.payload.floatingObject.arrangementStyle = ARRANGEMENT_STYLE.CONCAVE + newExchange.exchangeAccounts.payload.floatingObject.arrangementStyle = ARRANGEMENT_STYLE.CONCAVE } } } @@ -114,6 +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.CONCAVE } } } @@ -184,10 +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.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.CONCAVE + newMarket.quotedAsset.payload.floatingObject.arrangementStyle = ARRANGEMENT_STYLE.CONCAVE newMarket.baseAsset.payload.referenceParent = baseAsset newMarket.quotedAsset.payload.referenceParent = quotedAsset diff --git a/CanvasApp/DesignSpace/Workspace/FunctionLibraries/NodeCloning.js b/CanvasApp/DesignSpace/Workspace/FunctionLibraries/NodeCloning.js index 72d458dcf..fce49b44f 100644 --- a/CanvasApp/DesignSpace/Workspace/FunctionLibraries/NodeCloning.js +++ b/CanvasApp/DesignSpace/Workspace/FunctionLibraries/NodeCloning.js @@ -146,7 +146,8 @@ function newNodeCloning () { isFrozen: (node.payload.floatingObject.isFrozen && node.payload.floatingObject.frozenManually), isCollapsed: (node.payload.floatingObject.isCollapsed && node.payload.floatingObject.collapsedManually), angleToParent: (node.payload.floatingObject.angleToParent), - distanceToParent: (node.payload.floatingObject.distanceToParent) + distanceToParent: (node.payload.floatingObject.distanceToParent), + arrangementStyle: (node.payload.floatingObject.arrangementStyle) }, uiObject: { isRunning: node.payload.uiObject.isRunning, diff --git a/CanvasApp/DesignSpace/Workspace/FunctionLibraries/ProtocolNode.js b/CanvasApp/DesignSpace/Workspace/FunctionLibraries/ProtocolNode.js index 4eaf8ec8c..3fff812a4 100644 --- a/CanvasApp/DesignSpace/Workspace/FunctionLibraries/ProtocolNode.js +++ b/CanvasApp/DesignSpace/Workspace/FunctionLibraries/ProtocolNode.js @@ -149,7 +149,8 @@ function newProtocolNode () { isFrozen: (node.payload.floatingObject.isFrozen && node.payload.floatingObject.frozenManually), isCollapsed: (node.payload.floatingObject.isCollapsed && node.payload.floatingObject.collapsedManually), angleToParent: (node.payload.floatingObject.angleToParent), - distanceToParent: (node.payload.floatingObject.distanceToParent) + distanceToParent: (node.payload.floatingObject.distanceToParent), + arrangementStyle: (node.payload.floatingObject.arrangementStyle) }, uiObject: { isRunning: node.payload.uiObject.isRunning, diff --git a/CanvasApp/FloatingSpace/FloatingObject.js b/CanvasApp/FloatingSpace/FloatingObject.js index 54d7544fc..661e6ae01 100644 --- a/CanvasApp/FloatingSpace/FloatingObject.js +++ b/CanvasApp/FloatingSpace/FloatingObject.js @@ -24,6 +24,7 @@ function newFloatingObject () { isFrozen: false, angleToParent: undefined, distanceToParent: undefined, + arrangementStyle: ARRANGEMENT_STYLE.CONCAVE, isCollapsed: false, isParentCollapsed: false, frozenManually: false, @@ -33,6 +34,7 @@ function newFloatingObject () { getCollapseStatus: getCollapseStatus, getAngleToParent: getAngleToParent, getDistanceToParent: getDistanceToParent, + getArrangementStyle: getArrangementStyle, nearbyFloatingObjects: [], setPosition: setPosition, pinToggle: pinToggle, @@ -40,6 +42,7 @@ function newFloatingObject () { collapseToggle: collapseToggle, angleToParentToggle: angleToParentToggle, distanceToParentToggle: distanceToParentToggle, + arrangementStyleToggle: arrangementStyleToggle, physics: physics, invisiblePhysics: invisiblePhysics, initializeMass: initializeMass, @@ -153,6 +156,10 @@ function newFloatingObject () { return thisObject.distanceToParent } + function getArrangementStyle () { + return thisObject.arrangementStyle + } + function freezeToggle () { if (thisObject.isFrozen !== true) { thisObject.isFrozen = true @@ -222,6 +229,31 @@ function newFloatingObject () { return thisObject.distanceToParent } + function arrangementStyleToggle () { + switch (thisObject.arrangementStyle) { + case ARRANGEMENT_STYLE.CONCAVE: + thisObject.arrangementStyle = ARRANGEMENT_STYLE.CONVEX + break + case ARRANGEMENT_STYLE.CONVEX: + thisObject.arrangementStyle = ARRANGEMENT_STYLE.VERTICAL_RIGHT + break + 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 + } + + return thisObject.arrangementStyle + } + function invisiblePhysics () { if (thisObject.payload.uiObject !== undefined) { thisObject.payload.uiObject.invisiblePhysics() @@ -331,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 } diff --git a/CanvasApp/FloatingSpace/UiObjectConstructor.js b/CanvasApp/FloatingSpace/UiObjectConstructor.js index 38da1216d..b5ad3a8ec 100644 --- a/CanvasApp/FloatingSpace/UiObjectConstructor.js +++ b/CanvasApp/FloatingSpace/UiObjectConstructor.js @@ -63,6 +63,9 @@ function newUiObjectConstructor () { if (payload.node.savedPayload.floatingObject.distanceToParent !== undefined) { floatingObject.distanceToParent = payload.node.savedPayload.floatingObject.distanceToParent } + if (payload.node.savedPayload.floatingObject.arrangementStyle !== undefined) { + floatingObject.arrangementStyle = payload.node.savedPayload.floatingObject.arrangementStyle + } } /* @@ -83,6 +86,7 @@ function newUiObjectConstructor () { if (closestSibling !== undefined) { floatingObject.angleToParent = closestSibling.payload.floatingObject.angleToParent floatingObject.distanceToParent = closestSibling.payload.floatingObject.distanceToParent + floatingObject.arrangementStyle = closestSibling.payload.floatingObject.arrangementStyle break } } @@ -98,6 +102,7 @@ function newUiObjectConstructor () { if (closestSibling !== undefined) { floatingObject.angleToParent = closestSibling.payload.floatingObject.angleToParent floatingObject.distanceToParent = closestSibling.payload.floatingObject.distanceToParent + floatingObject.arrangementStyle = closestSibling.payload.floatingObject.arrangementStyle break } } @@ -106,6 +111,7 @@ function newUiObjectConstructor () { if (closestSibling !== undefined) { floatingObject.angleToParent = closestSibling.payload.floatingObject.angleToParent floatingObject.distanceToParent = closestSibling.payload.floatingObject.distanceToParent + floatingObject.arrangementStyle = closestSibling.payload.floatingObject.arrangementStyle break } } @@ -120,6 +126,7 @@ function newUiObjectConstructor () { if (closestSibling !== undefined) { floatingObject.angleToParent = closestSibling.payload.floatingObject.angleToParent floatingObject.distanceToParent = closestSibling.payload.floatingObject.distanceToParent + floatingObject.arrangementStyle = closestSibling.payload.floatingObject.arrangementStyle break } } @@ -128,6 +135,7 @@ function newUiObjectConstructor () { if (closestSibling !== undefined) { floatingObject.angleToParent = closestSibling.payload.floatingObject.angleToParent floatingObject.distanceToParent = closestSibling.payload.floatingObject.distanceToParent + floatingObject.arrangementStyle = closestSibling.payload.floatingObject.arrangementStyle break } } @@ -138,6 +146,7 @@ function newUiObjectConstructor () { if (floatingObject.angleToParent === undefined) { floatingObject.angleToParent = payload.parentNode.payload.floatingObject.angleToParent floatingObject.distanceToParent = payload.parentNode.payload.floatingObject.distanceToParent + floatingObject.arrangementStyle = payload.parentNode.payload.floatingObject.arrangementStyle } } @@ -240,6 +249,21 @@ function newUiObjectConstructor () { ring: 1 } ) + menuItemsInitialValues.push( + { + action: 'change Arrangement Style', + actionFunction: floatingObject.arrangementStyleToggle, + actionStatus: floatingObject.getArrangementStyle, + currentStatus: true, + label: undefined, + visible: true, + icons: ['shapes-polygon', 'shapes-polygon-body', 'shapes-polygon-border', 'clone', 'layer-manager', 'process'], + rawRadius: 12, + targetRadius: 0, + currentRadius: 0, + ring: 1 + } + ) menuItemsInitialValues.push( { action: 'Freeze / Unfreeze', diff --git a/CanvasApp/Globals.js b/CanvasApp/Globals.js index 4c4fd5ecc..cc1ec296a 100644 --- a/CanvasApp/Globals.js +++ b/CanvasApp/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 @@ -72,6 +72,15 @@ const DISTANCE_TO_PARENT = { PARENT_200X: 5 } +const ARRANGEMENT_STYLE = { + CONCAVE: 0, + CONVEX: 1, + VERTICAL_RIGHT: 2, + VERTICAL_LEFT: 3, + HORIZONTAL_BOTTOM: 4, + HORIZONTAL_TOP: 5 +} + /* User Interface Panels */ const UI_PANEL = {