Look and Feel
This commit is contained in:
1 parent
4e1b3def3c
commit
9f573728dd
6 files changed
+64
-53
No files matched your search
@@ -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) {
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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()
|
||||
|
||||
@@ -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
@@ -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()
|
||||
|
||||
@@ -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
|
||||
|
||||
|
||||
Reference in new issue
Block a user