Look and Feel

This commit is contained in:
Luis Fernando Molina committed 2020-08-28 18:04:59 +02:00
1 parent 61fb1bb053
commit 77cee92451
8 files changed
+123 -74

No files matched your search

+2 -2
View File
@@ -58,8 +58,8 @@ function loadSuperalgos() {
'font-size: 12px;' +
'background-color: rgb(255, 255, 255);' +
'color:rgb(255, 255, 255);' +
'width: ' + 800 + 'px;' +
'height: ' + 600 + 'px'
'width: ' + 600 + 'px;' +
'height: ' + 400 + 'px'
let textAreaDiv = document.getElementById('textAreaDiv');
textAreaDiv.appendChild(textArea);
+12 -6
View File
@@ -156,8 +156,7 @@ function newCircularMenuItem() {
function physics() {
if (thisObject.dontShowAtFullscreen === true && AT_FULL_SCREEN_MODE === true) { return }
let INCREASE_STEP = 2 // (thisObject.targetRadius - thisObject.rawRadius) / 4
// if (INCREASE_STEP === 0) { INCREASE_STEP = 2 }
let INCREASE_STEP = 2
if (Math.abs(thisObject.currentRadius - thisObject.targetRadius) >= INCREASE_STEP) {
if (thisObject.currentRadius < thisObject.targetRadius) {
@@ -191,8 +190,17 @@ function newCircularMenuItem() {
radiusGrowthFactor = 4
}
thisObject.container.frame.position.x = thisObject.payload.floatingObject.targetRadius * radiusGrowthFactor / 7 * Math.cos(toRadians(thisObject.angle)) - thisObject.currentRadius * 1.5
thisObject.container.frame.position.y = thisObject.payload.floatingObject.targetRadius * radiusGrowthFactor / 7 * Math.sin(toRadians(thisObject.angle)) - thisObject.container.frame.height / 2
thisObject.container.frame.position.x =
thisObject.payload.floatingObject.targetRadius *
radiusGrowthFactor / 7
* Math.cos(toRadians(thisObject.angle)) -
thisObject.currentRadius * 1.5
thisObject.container.frame.position.y =
thisObject.payload.floatingObject.targetRadius *
radiusGrowthFactor / 7
* Math.sin(toRadians(thisObject.angle)) -
thisObject.container.frame.height / 2
temporaryStatusPhysics()
@@ -428,7 +436,6 @@ function newCircularMenuItem() {
menuPosition = thisObject.container.frame.frameThisPoint(menuPosition)
/* Menu Item */
let iconSize
if (isMouseOver === true) {
iconSize = thisObject.currentRadius + EXTRA_MOUSE_OVER_ICON_SIZE
@@ -441,7 +448,6 @@ function newCircularMenuItem() {
browserCanvasContext.drawImage(thisObject.icon, menuPosition.x - iconSize, menuPosition.y - iconSize, iconSize * 2, iconSize * 2)
/* Menu Label */
if (thisObject.type === 'Icon & Text') {
label = labelToPrint
if (thisObject.shorcutNumber !== undefined) {
+5 -4
View File
@@ -32,7 +32,7 @@ function newCodeEditor() {
thisObject.container.frame.position.y = 0
let isMouseOver = false
let SIZE_FACTOR = 1.4
let SIZE_FACTOR = 1.0
return thisObject
@@ -113,7 +113,7 @@ function newCodeEditor() {
thisObject.container.frame.position.x = 0
thisObject.container.frame.position.y = 0
thisObject.container.frame.width = thisObject.container.frame.radius * 1.8 * SIZE_FACTOR
thisObject.container.frame.width = thisObject.container.frame.radius * 1 * SIZE_FACTOR
thisObject.container.frame.height = thisObject.container.frame.radius * 1 * SIZE_FACTOR
let textAreaPosition = {
@@ -150,19 +150,20 @@ function newCodeEditor() {
if (radius > 0.5) {
browserCanvasContext.beginPath()
browserCanvasContext.arc(position.x, position.y, radius * 1.3 + 3, 0, Math.PI * 2, true)
browserCanvasContext.arc(position.x, position.y, radius + 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.arc(position.x, position.y, radius , 0, Math.PI * 2, true)
browserCanvasContext.closePath()
browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', ' + 1 + ')'
browserCanvasContext.fill()
}
}
}
function drawForeground() {
let iconPosition = {
x: 0,
+3 -3
View File
@@ -119,7 +119,7 @@ function newConfigEditor() {
thisObject.container.frame.position.x = 0
thisObject.container.frame.position.y = 0
thisObject.container.frame.width = thisObject.container.frame.radius * 1.8 * SIZE_FACTOR
thisObject.container.frame.width = thisObject.container.frame.radius * 1 * SIZE_FACTOR
thisObject.container.frame.height = thisObject.container.frame.radius * 1 * SIZE_FACTOR
let textAreaPosition = {
@@ -156,13 +156,13 @@ function newConfigEditor() {
if (radius > 0.5) {
browserCanvasContext.beginPath()
browserCanvasContext.arc(position.x, position.y, radius * 1.3 + 3, 0, Math.PI * 2, true)
browserCanvasContext.arc(position.x, position.y, radius + 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.arc(position.x, position.y, radius , 0, Math.PI * 2, true)
browserCanvasContext.closePath()
browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK_TURQUOISE + ', ' + 1 + ')'
browserCanvasContext.fill()
+4 -4
View File
@@ -32,7 +32,7 @@ function newFormulaEditor() {
thisObject.container.frame.position.y = 0
let isMouseOver = false
let SIZE_FACTOR = 1.2
let SIZE_FACTOR = 1.0
return thisObject
@@ -113,7 +113,7 @@ function newFormulaEditor() {
thisObject.container.frame.position.x = 0
thisObject.container.frame.position.y = 0
thisObject.container.frame.width = thisObject.container.frame.radius * 1.8 * SIZE_FACTOR
thisObject.container.frame.width = thisObject.container.frame.radius * 1 * SIZE_FACTOR
thisObject.container.frame.height = thisObject.container.frame.radius * 1 * SIZE_FACTOR
let textAreaPosition = {
@@ -150,13 +150,13 @@ function newFormulaEditor() {
if (radius > 0.5) {
browserCanvasContext.beginPath()
browserCanvasContext.arc(position.x, position.y, radius * 1.3 + 3, 0, Math.PI * 2, true)
browserCanvasContext.arc(position.x, position.y, radius + 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.arc(position.x, position.y, radius , 0, Math.PI * 2, true)
browserCanvasContext.closePath()
browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.MANGANESE_PURPLE + ', ' + 1 + ')'
browserCanvasContext.fill()
+77 -52
View File
@@ -488,7 +488,7 @@ function newUiObject() {
}
}
if (foundCompatible === false) {
if (distance < thisObject.container.frame.radius * 1.5 + floatingObject.container.frame.radius * 1.5) {
if (distance < thisObject.payload.floatingObject.container.frame.radius * 1.5 + floatingObject.container.frame.radius * 1.5) {
nearbyNode.payload.uiObject.getReadyToChainAttach()
isChainAttaching = true
chainAttachToNode = nearbyNode
@@ -595,7 +595,7 @@ function newUiObject() {
let nearbyNode = floatingObject.payload.node
if (compatibleTypes.indexOf('->' + nearbyNode.type + '->') >= 0) {
if (foundCompatible === false) {
if (distance < thisObject.container.frame.radius * 1.5 + floatingObject.container.frame.radius * 1.5) {
if (distance < thisObject.payload.floatingObject.container.frame.radius * 1.5 + floatingObject.container.frame.radius * 1.5) {
nearbyNode.payload.uiObject.getReadyToReferenceAttach()
isReferenceAttaching = true
referenceAttachToNode = nearbyNode
@@ -738,6 +738,27 @@ function newUiObject() {
thisObject.hasError = true
if (duration === undefined) { duration = 1 }
errorMessageCounter = 100 * duration
/*
Next, we are going to try to inform the parent that this
node has an error, as a way to show the end user where the
node with error is. This is useful to detect errors in nodes
that are located at braches that are collapsed.
*/
if (thisObject.payload !== undefined) {
if (thisObject.payload.parentNode !== undefined) {
if (thisObject.payload.parentNode.payload !== undefined) {
if (thisObject.payload.parentNode.payload.floatingObject !== undefined) {
if (thisObject.payload.parentNode.payload.floatingObject.isCollapsed === true || thisObject.payload.parentNode.payload.floatingObject.isParentCollapsed === true) {
if (thisObject.payload.parentNode.payload.uiObject !== true) {
thisObject.payload.parentNode.payload.uiObject.setErrorMessage('Error Inside this Branch')
}
}
}
}
}
}
}
}
@@ -1054,7 +1075,7 @@ function newUiObject() {
if (thisObject.isOnFocus === false) {
drawReferenceLine()
drawChainLine()
if (isDragging === false && thisObject.isOnFocus === true) {
thisObject.menu.drawBackground()
}
@@ -1182,7 +1203,7 @@ function newUiObject() {
position = canvas.floatingSpace.transformPointToMap(position)
}
if (thisObject.container.frame.radius > 1) {
if (thisObject.payload.floatingObject.container.frame.radius > 1) {
let LINE_STYLE = UI_COLOR.TITANIUM_YELLOW
if (thisObject.payload.floatingObject.angleToParent !== ANGLE_TO_PARENT.NOT_FIXED) {
LINE_STYLE = UI_COLOR.GOLDEN_ORANGE
@@ -1222,7 +1243,7 @@ function newUiObject() {
browserCanvasContext.setLineDash([0, 0])
}
if (thisObject.container.frame.radius > 0.5) {
if (thisObject.payload.floatingObject.container.frame.radius > 0.5) {
let radius = 1
browserCanvasContext.beginPath()
@@ -1264,7 +1285,7 @@ function newUiObject() {
let LINE_STYLE = UI_COLOR.GREY
if (thisObject.container.frame.radius > 1) {
if (thisObject.payload.floatingObject.container.frame.radius > 1) {
browserCanvasContext.beginPath()
browserCanvasContext.moveTo(position.x, position.y)
browserCanvasContext.lineTo(targetPoint.x, targetPoint.y)
@@ -1284,7 +1305,7 @@ function newUiObject() {
browserCanvasContext.setLineDash([0, 0])
}
if (thisObject.container.frame.radius > 0.5) {
if (thisObject.payload.floatingObject.container.frame.radius > 0.5) {
let radius = 1
browserCanvasContext.beginPath()
@@ -1346,7 +1367,7 @@ function newUiObject() {
labelPoint = {
x: position.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO - 5,
y: position.y + radius * 4 / 5 + fontSize * FONT_ASPECT_RATIO + 15
y: position.y + radius * 2 / 3 + fontSize * FONT_ASPECT_RATIO + 15
}
if (canvas.floatingSpace.inMapMode === true) {
@@ -1384,7 +1405,7 @@ function newUiObject() {
position = canvas.floatingSpace.transformPointToMap(position)
}
let radius = thisObject.container.frame.radius * 2.5
let radius = thisObject.payload.floatingObject.container.frame.radius * 2.5
/* Label Text */
let labelPoint
let fontSize = thisObject.payload.floatingObject.currentFontSize * 3 / 4
@@ -1433,7 +1454,7 @@ function newUiObject() {
position = canvas.floatingSpace.transformPointToMap(position)
}
let radius = thisObject.container.frame.radius * 1.00
let radius = thisObject.payload.floatingObject.container.frame.radius * 1.00
/* Label Text */
let labelPoint
let fontSize = thisObject.payload.floatingObject.currentFontSize * 8 / 7
@@ -1487,7 +1508,7 @@ function newUiObject() {
position = canvas.floatingSpace.transformPointToMap(position)
}
let radius = thisObject.container.frame.radius * 1.30
let radius = thisObject.payload.floatingObject.container.frame.radius * 1.30
/* Label Text */
let labelPoint
let fontSize = thisObject.payload.floatingObject.currentFontSize * 6 / 4
@@ -1530,7 +1551,7 @@ function newUiObject() {
position = canvas.floatingSpace.transformPointToMap(position)
}
let radius = thisObject.container.frame.radius * 0.8
let radius = thisObject.payload.floatingObject.container.frame.radius * 0.8
/* Label Text */
let labelPoint
let fontSize = thisObject.payload.floatingObject.currentFontSize * 6 / 4 / 2
@@ -1636,7 +1657,7 @@ function newUiObject() {
position = canvas.floatingSpace.transformPointToMap(position)
}
let radius = thisObject.container.frame.radius
let radius = thisObject.payload.floatingObject.container.frame.radius
if (radius > 0.5) {
let VISIBLE_RADIUS = 5
@@ -1673,40 +1694,14 @@ function newUiObject() {
browserCanvasContext.fill()
let nodeDefinition = getNodeDefinition(thisObject.payload.node)
if (nodeDefinition !== undefined) {
/* Hierarchy Head Ring */
if (nodeDefinition.isHierarchyHead === true) {
VISIBLE_RADIUS = thisObject.payload.floatingObject.currentHierarchyRing * 3.8
if (canvas.floatingSpace.inMapMode === true) {
VISIBLE_RADIUS = canvas.floatingSpace.transformRadiusToMap(VISIBLE_RADIUS)
}
let OPACITY = 0.5
browserCanvasContext.beginPath()
browserCanvasContext.arc(visiblePosition.x, visiblePosition.y, VISIBLE_RADIUS, 0, Math.PI * 2, true)
browserCanvasContext.closePath()
browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.LIGHT_GREY + ', ' + OPACITY + ')'
browserCanvasContext.lineWidth = 10
browserCanvasContext.setLineDash([1, 10])
browserCanvasContext.stroke()
browserCanvasContext.beginPath()
browserCanvasContext.arc(visiblePosition.x, visiblePosition.y, VISIBLE_RADIUS, 0, Math.PI * 2, true)
browserCanvasContext.closePath()
browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.LIGHT_GREY + ', ' + OPACITY + ')'
browserCanvasContext.lineWidth = 1
if (thisObject.payload.node.isIncluded === true) {
browserCanvasContext.setLineDash([0, 0])
} else {
browserCanvasContext.setLineDash([10, 20])
}
browserCanvasContext.stroke()
}
if (nodeDefinition === undefined) {
console.log('Node ' + thisObject.payload.node + ' without Node Definition at APP SCHEMA.')
return
}
if (thisObject.isOnFocus === true) {
/* Black Translucent Background when node is in focus */
VISIBLE_RADIUS = thisObject.container.frame.radius * 1.5
VISIBLE_RADIUS = thisObject.payload.floatingObject.container.frame.radius
browserCanvasContext.beginPath()
browserCanvasContext.arc(visiblePosition.x, visiblePosition.y, VISIBLE_RADIUS, 0, Math.PI * 2, true)
browserCanvasContext.closePath()
@@ -1721,7 +1716,7 @@ function newUiObject() {
browserCanvasContext.lineWidth = 3
browserCanvasContext.setLineDash([0, 0])
browserCanvasContext.stroke()
browserCanvasContext.beginPath()
browserCanvasContext.arc(visiblePosition.x, visiblePosition.y, VISIBLE_RADIUS - 1, 0, Math.PI * 2, true)
browserCanvasContext.closePath()
@@ -1733,8 +1728,38 @@ function newUiObject() {
}
}
/* Hierarchy Head Ring */
if (nodeDefinition.isHierarchyHead === true) {
VISIBLE_RADIUS = thisObject.payload.floatingObject.currentHierarchyRing * 3.8
if (canvas.floatingSpace.inMapMode === true) {
VISIBLE_RADIUS = canvas.floatingSpace.transformRadiusToMap(VISIBLE_RADIUS)
}
let OPACITY = 0.5
browserCanvasContext.beginPath()
browserCanvasContext.arc(visiblePosition.x, visiblePosition.y, VISIBLE_RADIUS, 0, Math.PI * 2, true)
browserCanvasContext.closePath()
browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.LIGHT_GREY + ', ' + OPACITY + ')'
browserCanvasContext.lineWidth = 10
browserCanvasContext.setLineDash([1, 10])
browserCanvasContext.stroke()
browserCanvasContext.beginPath()
browserCanvasContext.arc(visiblePosition.x, visiblePosition.y, VISIBLE_RADIUS, 0, Math.PI * 2, true)
browserCanvasContext.closePath()
browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.LIGHT_GREY + ', ' + OPACITY + ')'
browserCanvasContext.lineWidth = 1
if (thisObject.payload.node.isIncluded === true) {
browserCanvasContext.setLineDash([0, 0])
} else {
browserCanvasContext.setLineDash([10, 20])
}
browserCanvasContext.stroke()
}
if (thisObject.hasError === true) {
VISIBLE_RADIUS = thisObject.container.frame.radius * 1.5
VISIBLE_RADIUS = thisObject.payload.floatingObject.container.frame.radius
if (canvas.floatingSpace.inMapMode === true) {
VISIBLE_RADIUS = canvas.floatingSpace.transformRadiusToMap(VISIBLE_RADIUS)
}
@@ -1749,7 +1774,7 @@ function newUiObject() {
}
if (isHighlighted === true) {
VISIBLE_RADIUS = thisObject.container.frame.radius * 1
VISIBLE_RADIUS = thisObject.payload.floatingObject.container.frame.radius
let OPACITY = highlightCounter / 10
browserCanvasContext.beginPath()
@@ -1764,7 +1789,7 @@ function newUiObject() {
}
if (isReadyToChainAttach === true) {
VISIBLE_RADIUS = thisObject.container.frame.radius * 2.5 + readyToChainAttachDisplayCounter - readyToChainAttachDisplayCounter / 2
VISIBLE_RADIUS = thisObject.payload.floatingObject.container.frame.radius * 2.5 + readyToChainAttachDisplayCounter - readyToChainAttachDisplayCounter / 2
let OPACITY = readyToChainAttachCounter / 10
browserCanvasContext.beginPath()
@@ -1793,7 +1818,7 @@ function newUiObject() {
}
if (isAvailableToChainAttach === true && isReadyToChainAttach === false) {
VISIBLE_RADIUS = thisObject.container.frame.radius * 2.5
VISIBLE_RADIUS = thisObject.payload.floatingObject.container.frame.radius * 2.5
let OPACITY = availableToChainAttachCounter / 10
browserCanvasContext.beginPath()
@@ -1814,7 +1839,7 @@ function newUiObject() {
}
if (isReadyToReferenceAttach === true) {
VISIBLE_RADIUS = thisObject.container.frame.radius * 2.5 + readyToReferenceAttachDisplayCounter - readyToReferenceAttachDisplayCounter / 2
VISIBLE_RADIUS = thisObject.payload.floatingObject.container.frame.radius * 2.5 + readyToReferenceAttachDisplayCounter - readyToReferenceAttachDisplayCounter / 2
let OPACITY = readyToReferenceAttachCounter / 10
browserCanvasContext.beginPath()
@@ -1843,7 +1868,7 @@ function newUiObject() {
}
if (isAvailableToReferenceAttach === true && isReadyToReferenceAttach === false) {
VISIBLE_RADIUS = thisObject.container.frame.radius * 2.5
VISIBLE_RADIUS = thisObject.payload.floatingObject.container.frame.radius * 2.5
let OPACITY = availableToReferenceAttachCounter / 10
browserCanvasContext.beginPath()
@@ -1896,8 +1921,8 @@ function newUiObject() {
if (executingIcon !== undefined) {
if (executingIcon.canDrawIcon === true) {
if (isRunningAtBackend === true) {
const DISTANCE_FROM_CENTER = thisObject.container.frame.radius / 3 + 50
const EXECUTING_ICON_SIZE = 20 + thisObject.container.frame.radius / 6
const DISTANCE_FROM_CENTER = thisObject.payload.floatingObject.container.frame.radius / 3 + 50
const EXECUTING_ICON_SIZE = 20 + thisObject.payload.floatingObject.container.frame.radius / 6
browserCanvasContext.drawImage(
executingIcon, position.x - EXECUTING_ICON_SIZE / 2,
@@ -488,7 +488,7 @@ function newUiObjectConstructor() {
const FRICTION = 0.95
const INITIAL_FRICTION = 0.97
const INITIAL_FONT_SIZE = 12 * 1.5
const INITIAL_RADIOUS = 45 * 1.5
const INITIAL_RADIOUS = 100
const INITIAL_IMAGE_SIZE = 80 * 1.2
const INITIAL_HIERARCHY_RING = 20
+19 -2
View File
@@ -86,6 +86,16 @@
/* We need to find at which network node is running the process that we need to hear from when it finished. */
let network = global.TASK_NETWORK
/*
Notice that the first task that matches the dependency is going to be considered.
This means that if the same task, with the same process, pointing to the same
process definition in the same data mine, with the same exchange and market
configured, is at two different network nodes at the same time, the current task
is going to depend on the first one found, not necesarily the one running at the
same network node. If you need to control witch task specifically to depend on
and need to exactly the same task to exist, you should split the network in two
different networks, each one with unique tasks so as to avoid confussion.
*/
for (let i = 0; i < network.networkNodes.length; i++) {
let networkNode = network.networkNodes[i]
if (networkNode.dataMining !== undefined) {
@@ -111,13 +121,20 @@
/* We found where the task that runs the process definition we are waiting for is located on the network. */
thisObject.networkNode = networkNode
if (global.LOG_CONTROL[MODULE_NAME].logInfo === true) { logger.write(MODULE_NAME, "[INFO] initialize -> Connecting to Websockets Server " + networkNode.name + " -> host = " + networkNode.config.host + ' -> port = ' + networkNode.config.webSocketsPort + '.'); }
if (global.LOG_CONTROL[MODULE_NAME].logInfo === true) {
logger.write(MODULE_NAME,
"[INFO] initialize -> Connecting to Websockets Server " + networkNode.name +
" -> host = " + networkNode.config.host +
' -> port = ' + networkNode.config.webSocketsPort + '.'); }
eventServerClient = EVENT_SERVER_CLIENT.newEventsServerClient(networkNode.config.host, networkNode.config.webSocketsPort)
eventServerClient.initialize(onConnected)
function onConnected() {
if (global.LOG_CONTROL[MODULE_NAME].logInfo === true) { logger.write(MODULE_NAME, "[INFO] initialize -> Connected to Websockets Server " + networkNode.name + " -> host = " + networkNode.config.host + ' -> port = ' + networkNode.config.webSocketsPort + '.'); }
if (global.LOG_CONTROL[MODULE_NAME].logInfo === true) {
logger.write(MODULE_NAME, "[INFO] initialize -> Connected to Websockets Server " + networkNode.name +
" -> host = " + networkNode.config.host +
' -> port = ' + networkNode.config.webSocketsPort + '.'); }
callBackFunction(global.DEFAULT_OK_RESPONSE);
return