Look and Feel

This commit is contained in:
Luis Fernando Molina committed 2020-08-28 16:18:42 +02:00
1 parent 4e1b3def3c
commit 9f573728dd
6 files changed
+64 -53

No files matched your search

+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()
+39 -35
View File
@@ -1075,7 +1075,7 @@ function newUiObject() {
if (thisObject.isOnFocus === false) {
drawReferenceLine()
drawChainLine()
if (isDragging === false && thisObject.isOnFocus === true) {
thisObject.menu.drawBackground()
}
@@ -1367,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) {
@@ -1694,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.container.frame.radius
browserCanvasContext.beginPath()
browserCanvasContext.arc(visiblePosition.x, visiblePosition.y, VISIBLE_RADIUS, 0, Math.PI * 2, true)
browserCanvasContext.closePath()
@@ -1742,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()
@@ -1754,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.container.frame.radius
if (canvas.floatingSpace.inMapMode === true) {
VISIBLE_RADIUS = canvas.floatingSpace.transformRadiusToMap(VISIBLE_RADIUS)
}
@@ -1770,7 +1774,7 @@ function newUiObject() {
}
if (isHighlighted === true) {
VISIBLE_RADIUS = thisObject.container.frame.radius * 1
VISIBLE_RADIUS = thisObject.container.frame.radius
let OPACITY = highlightCounter / 10
browserCanvasContext.beginPath()
+1 -1
View File
@@ -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