Change in Code Indentation
This commit is contained in:
Luis Fernando Molina committed
1 parent
1a52e5494e
commit
199a71a4e5
89 files changed
+22093
-22093
No files matched your search
@@ -1,72 +1,72 @@
|
||||
|
||||
function newBusyProgressBar () {
|
||||
const MODULE_NAME = 'Circular Progress Bar'
|
||||
function newBusyProgressBar() {
|
||||
const MODULE_NAME = 'Circular Progress Bar'
|
||||
|
||||
let thisObject = {
|
||||
container: undefined,
|
||||
isDeployed: undefined,
|
||||
visible: undefined,
|
||||
physics: physics,
|
||||
draw: draw,
|
||||
finalize: finalize,
|
||||
initialize: initialize
|
||||
}
|
||||
|
||||
let position
|
||||
let addRadius
|
||||
|
||||
let eventSubscriptionHeartbeat
|
||||
|
||||
return thisObject
|
||||
|
||||
function finalize () {
|
||||
thisObject.payload = undefined
|
||||
thisObject.fitFunction = undefined
|
||||
}
|
||||
|
||||
function initialize (pPosition) {
|
||||
position = pPosition
|
||||
|
||||
addRadius = 0
|
||||
}
|
||||
|
||||
function physics () {
|
||||
addRadius = addRadius + 20
|
||||
}
|
||||
|
||||
function draw () {
|
||||
if (thisObject.visible !== true) { return }
|
||||
|
||||
let visiblePosition = {
|
||||
x: position.x,
|
||||
y: position.y
|
||||
let thisObject = {
|
||||
container: undefined,
|
||||
isDeployed: undefined,
|
||||
visible: undefined,
|
||||
physics: physics,
|
||||
draw: draw,
|
||||
finalize: finalize,
|
||||
initialize: initialize
|
||||
}
|
||||
|
||||
visiblePosition = thisObject.fitFunction(visiblePosition)
|
||||
let position
|
||||
let addRadius
|
||||
|
||||
const RADIUS = 10 + addRadius
|
||||
let OPACITY = 1
|
||||
let eventSubscriptionHeartbeat
|
||||
|
||||
let initialAngle = 0
|
||||
let finalAngle = Math.PI * 2
|
||||
return thisObject
|
||||
|
||||
browserCanvasContext.beginPath()
|
||||
function finalize() {
|
||||
thisObject.payload = undefined
|
||||
thisObject.fitFunction = undefined
|
||||
}
|
||||
|
||||
browserCanvasContext.arc(visiblePosition.x, visiblePosition.y, RADIUS, initialAngle, finalAngle, false)
|
||||
browserCanvasContext.closePath()
|
||||
function initialize(pPosition) {
|
||||
position = pPosition
|
||||
|
||||
browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.PATINATED_TURQUOISE + ', 1)'
|
||||
addRadius = 0
|
||||
}
|
||||
|
||||
browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.GOLDEN_ORANGE + ', ' + OPACITY * 2 + ')'
|
||||
browserCanvasContext.lineWidth = 15
|
||||
browserCanvasContext.setLineDash([3, 4])
|
||||
function physics() {
|
||||
addRadius = addRadius + 20
|
||||
}
|
||||
|
||||
browserCanvasContext.stroke()
|
||||
function draw() {
|
||||
if (thisObject.visible !== true) { return }
|
||||
|
||||
browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.DARK_TURQUOISE + ', ' + OPACITY + ')'
|
||||
browserCanvasContext.lineWidth = 10
|
||||
browserCanvasContext.setLineDash([3, 4])
|
||||
browserCanvasContext.stroke()
|
||||
}
|
||||
let visiblePosition = {
|
||||
x: position.x,
|
||||
y: position.y
|
||||
}
|
||||
|
||||
visiblePosition = thisObject.fitFunction(visiblePosition)
|
||||
|
||||
const RADIUS = 10 + addRadius
|
||||
let OPACITY = 1
|
||||
|
||||
let initialAngle = 0
|
||||
let finalAngle = Math.PI * 2
|
||||
|
||||
browserCanvasContext.beginPath()
|
||||
|
||||
browserCanvasContext.arc(visiblePosition.x, visiblePosition.y, RADIUS, initialAngle, finalAngle, false)
|
||||
browserCanvasContext.closePath()
|
||||
|
||||
browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.PATINATED_TURQUOISE + ', 1)'
|
||||
|
||||
browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.GOLDEN_ORANGE + ', ' + OPACITY * 2 + ')'
|
||||
browserCanvasContext.lineWidth = 15
|
||||
browserCanvasContext.setLineDash([3, 4])
|
||||
|
||||
browserCanvasContext.stroke()
|
||||
|
||||
browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.DARK_TURQUOISE + ', ' + OPACITY + ')'
|
||||
browserCanvasContext.lineWidth = 10
|
||||
browserCanvasContext.setLineDash([3, 4])
|
||||
browserCanvasContext.stroke()
|
||||
}
|
||||
}
|
||||
|
||||
+193
-193
@@ -1,224 +1,224 @@
|
||||
|
||||
function newCircularMenu () {
|
||||
const MODULE_NAME = 'Circular Menu'
|
||||
function newCircularMenu() {
|
||||
const MODULE_NAME = 'Circular Menu'
|
||||
|
||||
let thisObject = {
|
||||
container: undefined,
|
||||
isDeployed: undefined,
|
||||
internalClick: internalClick,
|
||||
physics: physics,
|
||||
invisiblePhysics: invisiblePhysics,
|
||||
drawBackground: drawBackground,
|
||||
drawForeground: drawForeground,
|
||||
getContainer: getContainer,
|
||||
finalize: finalize,
|
||||
initialize: initialize
|
||||
}
|
||||
|
||||
thisObject.container = newContainer()
|
||||
thisObject.container.initialize(MODULE_NAME, 'Circle')
|
||||
thisObject.container.isClickeable = false
|
||||
thisObject.container.isDraggeable = false
|
||||
thisObject.container.frame.radius = 0
|
||||
thisObject.container.frame.position.x = 0
|
||||
thisObject.container.frame.position.y = 0
|
||||
|
||||
let menuItems = []
|
||||
|
||||
let selfFocusEventSubscriptionId
|
||||
let selfNotFocuskEventSubscriptionId
|
||||
|
||||
return thisObject
|
||||
|
||||
function finalize () {
|
||||
thisObject.container.eventHandler.stopListening(selfFocusEventSubscriptionId)
|
||||
thisObject.container.eventHandler.stopListening(selfNotFocuskEventSubscriptionId)
|
||||
|
||||
thisObject.container.finalize()
|
||||
thisObject.container = undefined
|
||||
|
||||
for (let i = 0; i < menuItems.length; i++) {
|
||||
let menuItem = menuItems[i]
|
||||
menuItem.finalize()
|
||||
let thisObject = {
|
||||
container: undefined,
|
||||
isDeployed: undefined,
|
||||
internalClick: internalClick,
|
||||
physics: physics,
|
||||
invisiblePhysics: invisiblePhysics,
|
||||
drawBackground: drawBackground,
|
||||
drawForeground: drawForeground,
|
||||
getContainer: getContainer,
|
||||
finalize: finalize,
|
||||
initialize: initialize
|
||||
}
|
||||
|
||||
menuItems = undefined
|
||||
}
|
||||
thisObject.container = newContainer()
|
||||
thisObject.container.initialize(MODULE_NAME, 'Circle')
|
||||
thisObject.container.isClickeable = false
|
||||
thisObject.container.isDraggeable = false
|
||||
thisObject.container.frame.radius = 0
|
||||
thisObject.container.frame.position.x = 0
|
||||
thisObject.container.frame.position.y = 0
|
||||
|
||||
function initialize (menuItemsInitialValues, payload) {
|
||||
/* Create the array of Menu Items */
|
||||
let menuItems = []
|
||||
|
||||
let iconAndTextArray = []
|
||||
let iconOnlyArray
|
||||
let ringsArray = [[], [], [], []]
|
||||
let selfFocusEventSubscriptionId
|
||||
let selfNotFocuskEventSubscriptionId
|
||||
|
||||
for (let i = 0; i < menuItemsInitialValues.length; i++) {
|
||||
let menuItem = newCircularMenuItem()
|
||||
let menuItemInitialValue = menuItemsInitialValues[i]
|
||||
return thisObject
|
||||
|
||||
menuItem.action = menuItemInitialValue.action
|
||||
menuItem.actionFunction = menuItemInitialValue.actionFunction
|
||||
menuItem.actionStatus = menuItemInitialValue.actionStatus
|
||||
menuItem.label = menuItemInitialValue.label
|
||||
menuItem.workingLabel = menuItemInitialValue.workingLabel
|
||||
menuItem.workDoneLabel = menuItemInitialValue.workDoneLabel
|
||||
menuItem.workFailedLabel = menuItemInitialValue.workFailedLabel
|
||||
menuItem.secondaryAction = menuItemInitialValue.secondaryAction
|
||||
menuItem.secondaryLabel = menuItemInitialValue.secondaryLabel
|
||||
menuItem.secondaryWorkingLabel = menuItemInitialValue.secondaryWorkingLabel
|
||||
menuItem.secondaryWorkDoneLabel = menuItemInitialValue.secondaryWorkDoneLabel
|
||||
menuItem.secondaryWorkFailedLabel = menuItemInitialValue.secondaryWorkFailedLabel
|
||||
menuItem.secondaryIcon = menuItemInitialValue.secondaryIcon
|
||||
menuItem.visible = menuItemInitialValue.visible
|
||||
menuItem.iconPathOn = menuItemInitialValue.iconPathOn
|
||||
menuItem.iconPathOff = menuItemInitialValue.iconPathOff
|
||||
menuItem.rawRadius = menuItemInitialValue.rawRadius
|
||||
menuItem.targetRadius = menuItemInitialValue.label
|
||||
menuItem.currentRadius = menuItemInitialValue.currentRadius
|
||||
menuItem.angle = menuItemInitialValue.angle
|
||||
menuItem.currentStatus = menuItemInitialValue.currentStatus
|
||||
menuItem.relatedUiObject = menuItemInitialValue.relatedUiObject
|
||||
menuItem.dontShowAtFullscreen = menuItemInitialValue.dontShowAtFullscreen
|
||||
menuItem.askConfirmation = menuItemInitialValue.askConfirmation
|
||||
menuItem.confirmationLabel = menuItemInitialValue.confirmationLabel
|
||||
menuItem.disableIfPropertyIsDefined = menuItemInitialValue.disableIfPropertyIsDefined
|
||||
menuItem.propertyToCheckFor = menuItemInitialValue.propertyToCheckFor
|
||||
menuItem.ring = menuItemInitialValue.ring
|
||||
menuItem.icons = menuItemInitialValue.icons
|
||||
function finalize() {
|
||||
thisObject.container.eventHandler.stopListening(selfFocusEventSubscriptionId)
|
||||
thisObject.container.eventHandler.stopListening(selfNotFocuskEventSubscriptionId)
|
||||
|
||||
if (menuItem.label === undefined) {
|
||||
menuItem.type = 'Icon Only'
|
||||
thisObject.container.finalize()
|
||||
thisObject.container = undefined
|
||||
|
||||
if (menuItem.ring === undefined) {
|
||||
menutItem.ring = 1
|
||||
for (let i = 0; i < menuItems.length; i++) {
|
||||
let menuItem = menuItems[i]
|
||||
menuItem.finalize()
|
||||
}
|
||||
iconOnlyArray = ringsArray[menuItem.ring - 1]
|
||||
iconOnlyArray.push(menuItem)
|
||||
} else {
|
||||
menuItem.type = 'Icon & Text'
|
||||
iconAndTextArray.push(menuItem)
|
||||
}
|
||||
|
||||
menuItem.initialize(payload)
|
||||
menuItem.container.connectToParent(thisObject.container, false, false, true, true, false, false, true, true)
|
||||
menuItems.push(menuItem)
|
||||
menuItems = undefined
|
||||
}
|
||||
|
||||
/* There are 4 possible rings of icons, we will go through each of them here. */
|
||||
let amplitudeArray = [80, 50, 40, 80]
|
||||
let initialAngleArray = [220, 205, 200, 180]
|
||||
for (let j = 1; j < ringsArray.length + 1; j++) {
|
||||
let iconOnlyArray = ringsArray[j - 1]
|
||||
/* Here we calculate the angles for each menu item, and then apply it if it was not previously defined. */
|
||||
let amplitude = amplitudeArray[j - 1]
|
||||
let initialAngle = initialAngleArray[j - 1]
|
||||
let step = amplitude / (iconOnlyArray.length - 1)
|
||||
if (iconOnlyArray.length === 1) {
|
||||
step = 0
|
||||
}
|
||||
function initialize(menuItemsInitialValues, payload) {
|
||||
/* Create the array of Menu Items */
|
||||
|
||||
for (let i = 0; i < iconOnlyArray.length; i++) {
|
||||
let menuItem = iconOnlyArray[i]
|
||||
let angle = initialAngle - step * i
|
||||
if (menuItem.angle === undefined) {
|
||||
menuItem.angle = angle
|
||||
let iconAndTextArray = []
|
||||
let iconOnlyArray
|
||||
let ringsArray = [[], [], [], []]
|
||||
|
||||
for (let i = 0; i < menuItemsInitialValues.length; i++) {
|
||||
let menuItem = newCircularMenuItem()
|
||||
let menuItemInitialValue = menuItemsInitialValues[i]
|
||||
|
||||
menuItem.action = menuItemInitialValue.action
|
||||
menuItem.actionFunction = menuItemInitialValue.actionFunction
|
||||
menuItem.actionStatus = menuItemInitialValue.actionStatus
|
||||
menuItem.label = menuItemInitialValue.label
|
||||
menuItem.workingLabel = menuItemInitialValue.workingLabel
|
||||
menuItem.workDoneLabel = menuItemInitialValue.workDoneLabel
|
||||
menuItem.workFailedLabel = menuItemInitialValue.workFailedLabel
|
||||
menuItem.secondaryAction = menuItemInitialValue.secondaryAction
|
||||
menuItem.secondaryLabel = menuItemInitialValue.secondaryLabel
|
||||
menuItem.secondaryWorkingLabel = menuItemInitialValue.secondaryWorkingLabel
|
||||
menuItem.secondaryWorkDoneLabel = menuItemInitialValue.secondaryWorkDoneLabel
|
||||
menuItem.secondaryWorkFailedLabel = menuItemInitialValue.secondaryWorkFailedLabel
|
||||
menuItem.secondaryIcon = menuItemInitialValue.secondaryIcon
|
||||
menuItem.visible = menuItemInitialValue.visible
|
||||
menuItem.iconPathOn = menuItemInitialValue.iconPathOn
|
||||
menuItem.iconPathOff = menuItemInitialValue.iconPathOff
|
||||
menuItem.rawRadius = menuItemInitialValue.rawRadius
|
||||
menuItem.targetRadius = menuItemInitialValue.label
|
||||
menuItem.currentRadius = menuItemInitialValue.currentRadius
|
||||
menuItem.angle = menuItemInitialValue.angle
|
||||
menuItem.currentStatus = menuItemInitialValue.currentStatus
|
||||
menuItem.relatedUiObject = menuItemInitialValue.relatedUiObject
|
||||
menuItem.dontShowAtFullscreen = menuItemInitialValue.dontShowAtFullscreen
|
||||
menuItem.askConfirmation = menuItemInitialValue.askConfirmation
|
||||
menuItem.confirmationLabel = menuItemInitialValue.confirmationLabel
|
||||
menuItem.disableIfPropertyIsDefined = menuItemInitialValue.disableIfPropertyIsDefined
|
||||
menuItem.propertyToCheckFor = menuItemInitialValue.propertyToCheckFor
|
||||
menuItem.ring = menuItemInitialValue.ring
|
||||
menuItem.icons = menuItemInitialValue.icons
|
||||
|
||||
if (menuItem.label === undefined) {
|
||||
menuItem.type = 'Icon Only'
|
||||
|
||||
if (menuItem.ring === undefined) {
|
||||
menutItem.ring = 1
|
||||
}
|
||||
iconOnlyArray = ringsArray[menuItem.ring - 1]
|
||||
iconOnlyArray.push(menuItem)
|
||||
} else {
|
||||
menuItem.type = 'Icon & Text'
|
||||
iconAndTextArray.push(menuItem)
|
||||
}
|
||||
|
||||
menuItem.initialize(payload)
|
||||
menuItem.container.connectToParent(thisObject.container, false, false, true, true, false, false, true, true)
|
||||
menuItems.push(menuItem)
|
||||
}
|
||||
}
|
||||
}
|
||||
/* Text and Icon */
|
||||
let amplitude = 140
|
||||
let initialAngle = -70
|
||||
step = amplitude / 7
|
||||
let currentItem = (7 - iconAndTextArray.length) / 2 + 1
|
||||
for (let i = 0; i < iconAndTextArray.length; i++) {
|
||||
let menuItem = iconAndTextArray[i]
|
||||
let angle = initialAngle + step * (currentItem - 0.5)
|
||||
currentItem++
|
||||
if (menuItem.angle === undefined) {
|
||||
menuItem.angle = angle
|
||||
}
|
||||
}
|
||||
|
||||
iconOnlyArray = undefined
|
||||
iconAndTextArray = undefined
|
||||
/* There are 4 possible rings of icons, we will go through each of them here. */
|
||||
let amplitudeArray = [80, 50, 40, 80]
|
||||
let initialAngleArray = [220, 205, 200, 180]
|
||||
for (let j = 1; j < ringsArray.length + 1; j++) {
|
||||
let iconOnlyArray = ringsArray[j - 1]
|
||||
/* Here we calculate the angles for each menu item, and then apply it if it was not previously defined. */
|
||||
let amplitude = amplitudeArray[j - 1]
|
||||
let initialAngle = initialAngleArray[j - 1]
|
||||
let step = amplitude / (iconOnlyArray.length - 1)
|
||||
if (iconOnlyArray.length === 1) {
|
||||
step = 0
|
||||
}
|
||||
|
||||
/* Listen to events */
|
||||
selfFocusEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onFocus', onFocus)
|
||||
selfNotFocuskEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onNotFocus', onNotFocus)
|
||||
}
|
||||
|
||||
function getContainer (point) {
|
||||
let container
|
||||
|
||||
if (thisObject.isDeployed === true) {
|
||||
for (let i = 0; i < menuItems.length; i++) {
|
||||
let menuItem = menuItems[i]
|
||||
if (menuItem.visible === true) {
|
||||
container = menuItem.getContainer(point)
|
||||
for (let i = 0; i < iconOnlyArray.length; i++) {
|
||||
let menuItem = iconOnlyArray[i]
|
||||
let angle = initialAngle - step * i
|
||||
if (menuItem.angle === undefined) {
|
||||
menuItem.angle = angle
|
||||
}
|
||||
}
|
||||
}
|
||||
if (container !== undefined) { return container }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function internalClick (action) {
|
||||
for (let i = 0; i < menuItems.length; i++) {
|
||||
let menuItem = menuItems[i]
|
||||
if (menuItem.visible === true) {
|
||||
if (menuItem.nextAction === action) {
|
||||
menuItem.internalClick()
|
||||
/* Text and Icon */
|
||||
let amplitude = 140
|
||||
let initialAngle = -70
|
||||
step = amplitude / 7
|
||||
let currentItem = (7 - iconAndTextArray.length) / 2 + 1
|
||||
for (let i = 0; i < iconAndTextArray.length; i++) {
|
||||
let menuItem = iconAndTextArray[i]
|
||||
let angle = initialAngle + step * (currentItem - 0.5)
|
||||
currentItem++
|
||||
if (menuItem.angle === undefined) {
|
||||
menuItem.angle = angle
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function invisiblePhysics () {
|
||||
for (let i = 0; i < menuItems.length; i++) {
|
||||
let menuItem = menuItems[i]
|
||||
menuItem.invisiblePhysics()
|
||||
}
|
||||
}
|
||||
iconOnlyArray = undefined
|
||||
iconAndTextArray = undefined
|
||||
|
||||
function physics () {
|
||||
for (let i = 0; i < menuItems.length; i++) {
|
||||
let menuItem = menuItems[i]
|
||||
menuItem.physics()
|
||||
/* Listen to events */
|
||||
selfFocusEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onFocus', onFocus)
|
||||
selfNotFocuskEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onNotFocus', onNotFocus)
|
||||
}
|
||||
}
|
||||
|
||||
function onFocus () {
|
||||
for (let i = 0; i < menuItems.length; i++) {
|
||||
let menuItem = menuItems[i]
|
||||
menuItem.targetRadius = menuItem.rawRadius * 1.5
|
||||
menuItem.isDeployed = true
|
||||
}
|
||||
thisObject.isDeployed = true
|
||||
}
|
||||
function getContainer(point) {
|
||||
let container
|
||||
|
||||
function onNotFocus () {
|
||||
for (let i = 0; i < menuItems.length; i++) {
|
||||
let menuItem = menuItems[i]
|
||||
menuItem.targetRadius = menuItem.rawRadius * 0 - i * 1.5
|
||||
menuItem.isDeployed = false
|
||||
if (thisObject.isDeployed === true) {
|
||||
for (let i = 0; i < menuItems.length; i++) {
|
||||
let menuItem = menuItems[i]
|
||||
if (menuItem.visible === true) {
|
||||
container = menuItem.getContainer(point)
|
||||
}
|
||||
if (container !== undefined) { return container }
|
||||
}
|
||||
}
|
||||
}
|
||||
thisObject.isDeployed = false
|
||||
}
|
||||
|
||||
function drawBackground (pFloatingObject) {
|
||||
for (let i = 0; i < menuItems.length; i++) {
|
||||
let menuItem = menuItems[i]
|
||||
if (menuItem.visible === true) {
|
||||
menuItem.drawBackground()
|
||||
}
|
||||
function internalClick(action) {
|
||||
for (let i = 0; i < menuItems.length; i++) {
|
||||
let menuItem = menuItems[i]
|
||||
if (menuItem.visible === true) {
|
||||
if (menuItem.nextAction === action) {
|
||||
menuItem.internalClick()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function drawForeground (pFloatingObject) {
|
||||
for (let i = 0; i < menuItems.length; i++) {
|
||||
let menuItem = menuItems[i]
|
||||
if (menuItem.visible === true) {
|
||||
menuItem.drawForeground()
|
||||
}
|
||||
function invisiblePhysics() {
|
||||
for (let i = 0; i < menuItems.length; i++) {
|
||||
let menuItem = menuItems[i]
|
||||
menuItem.invisiblePhysics()
|
||||
}
|
||||
}
|
||||
|
||||
function physics() {
|
||||
for (let i = 0; i < menuItems.length; i++) {
|
||||
let menuItem = menuItems[i]
|
||||
menuItem.physics()
|
||||
}
|
||||
}
|
||||
|
||||
function onFocus() {
|
||||
for (let i = 0; i < menuItems.length; i++) {
|
||||
let menuItem = menuItems[i]
|
||||
menuItem.targetRadius = menuItem.rawRadius * 1.5
|
||||
menuItem.isDeployed = true
|
||||
}
|
||||
thisObject.isDeployed = true
|
||||
}
|
||||
|
||||
function onNotFocus() {
|
||||
for (let i = 0; i < menuItems.length; i++) {
|
||||
let menuItem = menuItems[i]
|
||||
menuItem.targetRadius = menuItem.rawRadius * 0 - i * 1.5
|
||||
menuItem.isDeployed = false
|
||||
}
|
||||
thisObject.isDeployed = false
|
||||
}
|
||||
|
||||
function drawBackground(pFloatingObject) {
|
||||
for (let i = 0; i < menuItems.length; i++) {
|
||||
let menuItem = menuItems[i]
|
||||
if (menuItem.visible === true) {
|
||||
menuItem.drawBackground()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function drawForeground(pFloatingObject) {
|
||||
for (let i = 0; i < menuItems.length; i++) {
|
||||
let menuItem = menuItems[i]
|
||||
if (menuItem.visible === true) {
|
||||
menuItem.drawForeground()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
+411
-411
@@ -1,469 +1,469 @@
|
||||
|
||||
function newCircularMenuItem () {
|
||||
const MODULE_NAME = 'Circular Menu Iem'
|
||||
function newCircularMenuItem() {
|
||||
const MODULE_NAME = 'Circular Menu Iem'
|
||||
|
||||
let thisObject = {
|
||||
type: undefined,
|
||||
isDeployed: undefined,
|
||||
askConfirmation: undefined,
|
||||
confirmationLabel: undefined,
|
||||
iconOn: undefined,
|
||||
iconOff: undefined,
|
||||
icons: undefined,
|
||||
currentIcon: undefined,
|
||||
disableIfPropertyIsDefined: undefined,
|
||||
propertyToCheckFor: undefined,
|
||||
action: undefined,
|
||||
actionFunction: undefined,
|
||||
actionStatus: undefined,
|
||||
label: undefined,
|
||||
workingLabel: undefined,
|
||||
workDoneLabel: undefined,
|
||||
workFailedLabel: undefined,
|
||||
secondaryAction: undefined,
|
||||
secondaryLabel: undefined,
|
||||
secondaryWorkingLabel: undefined,
|
||||
secondaryWorkDoneLabel: undefined,
|
||||
secondaryWorkFailedLabel: undefined,
|
||||
secondaryIcon: undefined,
|
||||
nextAction: undefined,
|
||||
visible: false,
|
||||
iconPathOn: undefined,
|
||||
iconPathOff: undefined,
|
||||
rawRadius: undefined,
|
||||
targetRadius: undefined,
|
||||
currentRadius: undefined,
|
||||
angle: undefined,
|
||||
container: undefined,
|
||||
payload: undefined,
|
||||
relatedUiObject: undefined,
|
||||
dontShowAtFullscreen: undefined,
|
||||
isEnabled: true,
|
||||
shorcutNumber: undefined,
|
||||
internalClick: internalClick,
|
||||
physics: physics,
|
||||
invisiblePhysics: invisiblePhysics,
|
||||
drawBackground: drawBackground,
|
||||
drawForeground: drawForeground,
|
||||
getContainer: getContainer,
|
||||
finalize: finalize,
|
||||
initialize: initialize
|
||||
}
|
||||
|
||||
thisObject.container = newContainer()
|
||||
thisObject.container.initialize(MODULE_NAME)
|
||||
thisObject.container.isClickeable = true
|
||||
thisObject.container.isDraggeable = false
|
||||
thisObject.container.detectMouseOver = true
|
||||
thisObject.container.frame.radius = 0
|
||||
thisObject.container.frame.position.x = 0
|
||||
thisObject.container.frame.position.y = 0
|
||||
thisObject.container.frame.width = 0
|
||||
thisObject.container.frame.height = 40
|
||||
|
||||
let isMouseOver = false
|
||||
|
||||
let selfMouseOverEventSubscriptionId
|
||||
let selfMouseClickEventSubscriptionId
|
||||
let selfMouseNotOverEventSubscriptionId
|
||||
|
||||
let labelToPrint = ''
|
||||
let defaultBackgroudColor = UI_COLOR.RED
|
||||
let backgroundColorToUse = UI_COLOR.RED
|
||||
let temporaryStatus = 0
|
||||
let temporaryStatusCounter = 0
|
||||
|
||||
const EXTRA_MOUSE_OVER_ICON_SIZE = 6
|
||||
|
||||
const STATUS_NO_ACTION_TAKEN_YET = 0
|
||||
const STATUS_PRIMARY_ACTION_WORKING = -1
|
||||
const STATUS_SECONDARY_ACTION_WORKING = -2
|
||||
const STATUS_PRIMARY_WORK_DONE = -3
|
||||
const STATUS_PRIMARY_WORK_FAILED = -4
|
||||
const STATUS_WAITING_CONFIRMATION = -5
|
||||
const STATUS_SECONDARY_WORK_DONE = -6
|
||||
const STATUS_SECONDARY_WORK_FAILED = -7
|
||||
|
||||
return thisObject
|
||||
|
||||
function finalize () {
|
||||
thisObject.container.eventHandler.stopListening(selfMouseOverEventSubscriptionId)
|
||||
thisObject.container.eventHandler.stopListening(selfMouseClickEventSubscriptionId)
|
||||
thisObject.container.eventHandler.stopListening(selfMouseNotOverEventSubscriptionId)
|
||||
|
||||
thisObject.container.finalize()
|
||||
thisObject.container = undefined
|
||||
thisObject.iconOn = undefined
|
||||
thisObject.iconOff = undefined
|
||||
thisObject.icons = undefined
|
||||
thisObject.currentIcon = undefined
|
||||
thisObject.payload = undefined
|
||||
thisObject.actionFunction = undefined
|
||||
thisObject.actionStatus = undefined
|
||||
thisObject.disableIfPropertyIsDefined = undefined
|
||||
thisObject.propertyToCheckFor = undefined
|
||||
}
|
||||
|
||||
function initialize (pPayload) {
|
||||
thisObject.payload = pPayload
|
||||
|
||||
iconPhysics()
|
||||
|
||||
selfMouseOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver)
|
||||
selfMouseClickEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick)
|
||||
selfMouseNotOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver)
|
||||
|
||||
if (thisObject.type === 'Icon & Text') {
|
||||
thisObject.container.frame.width = 220
|
||||
} else {
|
||||
thisObject.container.frame.width = 50
|
||||
let thisObject = {
|
||||
type: undefined,
|
||||
isDeployed: undefined,
|
||||
askConfirmation: undefined,
|
||||
confirmationLabel: undefined,
|
||||
iconOn: undefined,
|
||||
iconOff: undefined,
|
||||
icons: undefined,
|
||||
currentIcon: undefined,
|
||||
disableIfPropertyIsDefined: undefined,
|
||||
propertyToCheckFor: undefined,
|
||||
action: undefined,
|
||||
actionFunction: undefined,
|
||||
actionStatus: undefined,
|
||||
label: undefined,
|
||||
workingLabel: undefined,
|
||||
workDoneLabel: undefined,
|
||||
workFailedLabel: undefined,
|
||||
secondaryAction: undefined,
|
||||
secondaryLabel: undefined,
|
||||
secondaryWorkingLabel: undefined,
|
||||
secondaryWorkDoneLabel: undefined,
|
||||
secondaryWorkFailedLabel: undefined,
|
||||
secondaryIcon: undefined,
|
||||
nextAction: undefined,
|
||||
visible: false,
|
||||
iconPathOn: undefined,
|
||||
iconPathOff: undefined,
|
||||
rawRadius: undefined,
|
||||
targetRadius: undefined,
|
||||
currentRadius: undefined,
|
||||
angle: undefined,
|
||||
container: undefined,
|
||||
payload: undefined,
|
||||
relatedUiObject: undefined,
|
||||
dontShowAtFullscreen: undefined,
|
||||
isEnabled: true,
|
||||
shorcutNumber: undefined,
|
||||
internalClick: internalClick,
|
||||
physics: physics,
|
||||
invisiblePhysics: invisiblePhysics,
|
||||
drawBackground: drawBackground,
|
||||
drawForeground: drawForeground,
|
||||
getContainer: getContainer,
|
||||
finalize: finalize,
|
||||
initialize: initialize
|
||||
}
|
||||
|
||||
thisObject.nextAction = thisObject.action
|
||||
}
|
||||
thisObject.container = newContainer()
|
||||
thisObject.container.initialize(MODULE_NAME)
|
||||
thisObject.container.isClickeable = true
|
||||
thisObject.container.isDraggeable = false
|
||||
thisObject.container.detectMouseOver = true
|
||||
thisObject.container.frame.radius = 0
|
||||
thisObject.container.frame.position.x = 0
|
||||
thisObject.container.frame.position.y = 0
|
||||
thisObject.container.frame.width = 0
|
||||
thisObject.container.frame.height = 40
|
||||
|
||||
function getContainer (point) {
|
||||
if (thisObject.dontShowAtFullscreen === true && AT_FULL_SCREEN_MODE === true) { return }
|
||||
let isMouseOver = false
|
||||
|
||||
let container
|
||||
if (thisObject.isDeployed === true) {
|
||||
if (thisObject.container.frame.isThisPointHere(point, true, false) === true) {
|
||||
return thisObject.container
|
||||
} else {
|
||||
return undefined
|
||||
}
|
||||
}
|
||||
}
|
||||
let selfMouseOverEventSubscriptionId
|
||||
let selfMouseClickEventSubscriptionId
|
||||
let selfMouseNotOverEventSubscriptionId
|
||||
|
||||
function invisiblePhysics () {
|
||||
temporaryStatusPhysics()
|
||||
}
|
||||
let labelToPrint = ''
|
||||
let defaultBackgroudColor = UI_COLOR.RED
|
||||
let backgroundColorToUse = UI_COLOR.RED
|
||||
let temporaryStatus = 0
|
||||
let temporaryStatusCounter = 0
|
||||
|
||||
function temporaryStatusPhysics () {
|
||||
/* Temporary Status impacts on the label to use and the background of that label */
|
||||
if (temporaryStatusCounter > 0) {
|
||||
temporaryStatusCounter--
|
||||
const EXTRA_MOUSE_OVER_ICON_SIZE = 6
|
||||
|
||||
const STATUS_NO_ACTION_TAKEN_YET = 0
|
||||
const STATUS_PRIMARY_ACTION_WORKING = -1
|
||||
const STATUS_SECONDARY_ACTION_WORKING = -2
|
||||
const STATUS_PRIMARY_WORK_DONE = -3
|
||||
const STATUS_PRIMARY_WORK_FAILED = -4
|
||||
const STATUS_WAITING_CONFIRMATION = -5
|
||||
const STATUS_SECONDARY_WORK_DONE = -6
|
||||
const STATUS_SECONDARY_WORK_FAILED = -7
|
||||
|
||||
return thisObject
|
||||
|
||||
function finalize() {
|
||||
thisObject.container.eventHandler.stopListening(selfMouseOverEventSubscriptionId)
|
||||
thisObject.container.eventHandler.stopListening(selfMouseClickEventSubscriptionId)
|
||||
thisObject.container.eventHandler.stopListening(selfMouseNotOverEventSubscriptionId)
|
||||
|
||||
thisObject.container.finalize()
|
||||
thisObject.container = undefined
|
||||
thisObject.iconOn = undefined
|
||||
thisObject.iconOff = undefined
|
||||
thisObject.icons = undefined
|
||||
thisObject.currentIcon = undefined
|
||||
thisObject.payload = undefined
|
||||
thisObject.actionFunction = undefined
|
||||
thisObject.actionStatus = undefined
|
||||
thisObject.disableIfPropertyIsDefined = undefined
|
||||
thisObject.propertyToCheckFor = undefined
|
||||
}
|
||||
|
||||
if (temporaryStatusCounter === 0) {
|
||||
temporaryStatus = STATUS_NO_ACTION_TAKEN_YET
|
||||
labelToPrint = thisObject.label
|
||||
backgroundColorToUse = defaultBackgroudColor
|
||||
thisObject.nextAction = thisObject.action
|
||||
}
|
||||
}
|
||||
function initialize(pPayload) {
|
||||
thisObject.payload = pPayload
|
||||
|
||||
function physics () {
|
||||
if (thisObject.dontShowAtFullscreen === true && AT_FULL_SCREEN_MODE === true) { return }
|
||||
iconPhysics()
|
||||
|
||||
let INCREASE_STEP = 2 // (thisObject.targetRadius - thisObject.rawRadius) / 4
|
||||
// if (INCREASE_STEP === 0) { INCREASE_STEP = 2 }
|
||||
selfMouseOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver)
|
||||
selfMouseClickEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick)
|
||||
selfMouseNotOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver)
|
||||
|
||||
if (Math.abs(thisObject.currentRadius - thisObject.targetRadius) >= INCREASE_STEP) {
|
||||
if (thisObject.currentRadius < thisObject.targetRadius) {
|
||||
thisObject.currentRadius = thisObject.currentRadius + INCREASE_STEP
|
||||
} else {
|
||||
thisObject.currentRadius = thisObject.currentRadius - INCREASE_STEP
|
||||
}
|
||||
}
|
||||
|
||||
let radiusGrowthFactor
|
||||
if (thisObject.type === 'Icon Only') {
|
||||
switch (thisObject.ring) {
|
||||
case 1: {
|
||||
radiusGrowthFactor = 5.5
|
||||
break
|
||||
}
|
||||
case 2: {
|
||||
radiusGrowthFactor = 4.0
|
||||
break
|
||||
}
|
||||
case 3: {
|
||||
radiusGrowthFactor = 3.0
|
||||
break
|
||||
}
|
||||
case 4: {
|
||||
radiusGrowthFactor = 2.0
|
||||
break
|
||||
}
|
||||
}
|
||||
} else {
|
||||
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
|
||||
|
||||
temporaryStatusPhysics()
|
||||
|
||||
/* Here we will check if we need to monitor a property that influences the status of the Menu Item. */
|
||||
if (thisObject.disableIfPropertyIsDefined === true) {
|
||||
if (thisObject.payload.node[thisObject.propertyToCheckFor] === undefined) {
|
||||
/* This menu item is enabled. */
|
||||
thisObject.isEnabled = true
|
||||
} else {
|
||||
/* This menu item is disabled. */
|
||||
thisObject.isEnabled = false
|
||||
}
|
||||
}
|
||||
iconPhysics()
|
||||
}
|
||||
|
||||
function iconPhysics () {
|
||||
if (
|
||||
(
|
||||
temporaryStatus === STATUS_PRIMARY_WORK_DONE ||
|
||||
temporaryStatus === STATUS_SECONDARY_ACTION_WORKING ||
|
||||
temporaryStatus === STATUS_SECONDARY_WORK_DONE ||
|
||||
temporaryStatus === STATUS_SECONDARY_WORK_FAILED
|
||||
) && thisObject.secondaryAction !== undefined
|
||||
) {
|
||||
thisObject.iconOn = canvas.designSpace.iconCollection.get(thisObject.secondaryIcon)
|
||||
thisObject.iconOff = canvas.designSpace.iconCollection.get(thisObject.secondaryIcon)
|
||||
} else {
|
||||
if (thisObject.relatedUiObject !== undefined) {
|
||||
thisObject.iconOn = canvas.designSpace.iconByUiObjectType.get(thisObject.relatedUiObject)
|
||||
thisObject.iconOff = canvas.designSpace.iconByUiObjectType.get(thisObject.relatedUiObject)
|
||||
} else {
|
||||
if (thisObject.iconPathOn !== undefined && thisObject.iconPathOff !== undefined) {
|
||||
thisObject.iconOn = canvas.designSpace.iconCollection.get(thisObject.iconPathOn)
|
||||
thisObject.iconOff = canvas.designSpace.iconCollection.get(thisObject.iconPathOff)
|
||||
if (thisObject.type === 'Icon & Text') {
|
||||
thisObject.container.frame.width = 220
|
||||
} else {
|
||||
thisObject.iconOn = canvas.designSpace.iconCollection.get(thisObject.icons[thisObject.actionStatus()])
|
||||
thisObject.iconOff = canvas.designSpace.iconCollection.get(thisObject.icons[thisObject.actionStatus()])
|
||||
thisObject.container.frame.width = 50
|
||||
}
|
||||
}
|
||||
|
||||
thisObject.nextAction = thisObject.action
|
||||
}
|
||||
|
||||
/* Current Status might be linked to some other object status */
|
||||
function getContainer(point) {
|
||||
if (thisObject.dontShowAtFullscreen === true && AT_FULL_SCREEN_MODE === true) { return }
|
||||
|
||||
if (thisObject.actionStatus !== undefined) {
|
||||
thisObject.currentStatus = thisObject.actionStatus()
|
||||
let container
|
||||
if (thisObject.isDeployed === true) {
|
||||
if (thisObject.container.frame.isThisPointHere(point, true, false) === true) {
|
||||
return thisObject.container
|
||||
} else {
|
||||
return undefined
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Current Status sets the icon to be used */
|
||||
|
||||
if (thisObject.currentStatus === true) {
|
||||
thisObject.icon = thisObject.iconOn
|
||||
} else {
|
||||
thisObject.icon = thisObject.iconOff
|
||||
}
|
||||
}
|
||||
|
||||
function onMouseOver (point) {
|
||||
if (thisObject.container.frame.isThisPointHere(point, true, false) === true) {
|
||||
isMouseOver = true
|
||||
} else {
|
||||
isMouseOver = false
|
||||
}
|
||||
MENU_ITEM_ON_FOCUS = thisObject
|
||||
}
|
||||
|
||||
function onMouseNotOver (point) {
|
||||
isMouseOver = false
|
||||
MENU_ITEM_ON_FOCUS = undefined
|
||||
}
|
||||
|
||||
function internalClick () {
|
||||
if (thisObject.shorcutNumber !== undefined) {
|
||||
let label = thisObject.payload.node.name + ' ' + labelToPrint
|
||||
canvas.cockpitSpace.setStatus(label, 50, canvas.cockpitSpace.statusTypes.ALL_GOOD)
|
||||
function invisiblePhysics() {
|
||||
temporaryStatusPhysics()
|
||||
}
|
||||
|
||||
onMouseClick()
|
||||
}
|
||||
function temporaryStatusPhysics() {
|
||||
/* Temporary Status impacts on the label to use and the background of that label */
|
||||
if (temporaryStatusCounter > 0) {
|
||||
temporaryStatusCounter--
|
||||
}
|
||||
|
||||
function onMouseClick () {
|
||||
if (thisObject.isEnabled === false) { return }
|
||||
|
||||
if (thisObject.label === undefined) {
|
||||
/* This is what we have in the case of menu items that are only Icons. In this situation there is no complex logic, just execute the specified action. */
|
||||
thisObject.actionFunction(thisObject.payload, thisObject.action, thisObject.relatedUiObject)
|
||||
return
|
||||
if (temporaryStatusCounter === 0) {
|
||||
temporaryStatus = STATUS_NO_ACTION_TAKEN_YET
|
||||
labelToPrint = thisObject.label
|
||||
backgroundColorToUse = defaultBackgroudColor
|
||||
thisObject.nextAction = thisObject.action
|
||||
}
|
||||
}
|
||||
|
||||
if (thisObject.askConfirmation !== true) { /* No confirmation is needed */
|
||||
if (temporaryStatus === STATUS_NO_ACTION_TAKEN_YET || temporaryStatus === STATUS_PRIMARY_WORK_DONE) {
|
||||
executeAction()
|
||||
} // Any click out of those states is ignored
|
||||
} else {
|
||||
/* Confirmation is needed */
|
||||
function physics() {
|
||||
if (thisObject.dontShowAtFullscreen === true && AT_FULL_SCREEN_MODE === true) { return }
|
||||
|
||||
/* The first click ask for confirmation. */
|
||||
if (temporaryStatus === STATUS_NO_ACTION_TAKEN_YET) {
|
||||
setStatus(thisObject.confirmationLabel, UI_COLOR.GOLDEN_ORANGE, 250, STATUS_WAITING_CONFIRMATION)
|
||||
return
|
||||
}
|
||||
/* A Click during confirmation executes the pre-defined action. */
|
||||
if (temporaryStatus === STATUS_WAITING_CONFIRMATION || temporaryStatus === STATUS_PRIMARY_WORK_DONE) {
|
||||
executeAction()
|
||||
if (thisObject.workDoneLabel !== undefined) {
|
||||
setStatus(thisObject.workDoneLabel, UI_COLOR.PATINATED_TURQUOISE, 100, STATUS_SECONDARY_WORK_DONE)
|
||||
let INCREASE_STEP = 2 // (thisObject.targetRadius - thisObject.rawRadius) / 4
|
||||
// if (INCREASE_STEP === 0) { INCREASE_STEP = 2 }
|
||||
|
||||
if (Math.abs(thisObject.currentRadius - thisObject.targetRadius) >= INCREASE_STEP) {
|
||||
if (thisObject.currentRadius < thisObject.targetRadius) {
|
||||
thisObject.currentRadius = thisObject.currentRadius + INCREASE_STEP
|
||||
} else {
|
||||
thisObject.currentRadius = thisObject.currentRadius - INCREASE_STEP
|
||||
}
|
||||
}
|
||||
|
||||
let radiusGrowthFactor
|
||||
if (thisObject.type === 'Icon Only') {
|
||||
switch (thisObject.ring) {
|
||||
case 1: {
|
||||
radiusGrowthFactor = 5.5
|
||||
break
|
||||
}
|
||||
case 2: {
|
||||
radiusGrowthFactor = 4.0
|
||||
break
|
||||
}
|
||||
case 3: {
|
||||
radiusGrowthFactor = 3.0
|
||||
break
|
||||
}
|
||||
case 4: {
|
||||
radiusGrowthFactor = 2.0
|
||||
break
|
||||
}
|
||||
}
|
||||
} else {
|
||||
setStatus('Done', UI_COLOR.PATINATED_TURQUOISE, 100, STATUS_SECONDARY_WORK_DONE)
|
||||
radiusGrowthFactor = 4
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
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()
|
||||
|
||||
/* Here we will check if we need to monitor a property that influences the status of the Menu Item. */
|
||||
if (thisObject.disableIfPropertyIsDefined === true) {
|
||||
if (thisObject.payload.node[thisObject.propertyToCheckFor] === undefined) {
|
||||
/* This menu item is enabled. */
|
||||
thisObject.isEnabled = true
|
||||
} else {
|
||||
/* This menu item is disabled. */
|
||||
thisObject.isEnabled = false
|
||||
}
|
||||
}
|
||||
iconPhysics()
|
||||
}
|
||||
|
||||
function executeAction () {
|
||||
if (temporaryStatus === STATUS_NO_ACTION_TAKEN_YET || temporaryStatus === STATUS_WAITING_CONFIRMATION) {
|
||||
/* We need to execute the main Action */
|
||||
/* If there is a working label defined, we use it here. */
|
||||
if (thisObject.workingLabel !== undefined) {
|
||||
setStatus(thisObject.workingLabel, UI_COLOR.GREY, undefined, STATUS_PRIMARY_ACTION_WORKING) // Status will not expire, will only change with a callback. Mouse Clicks will be ignored.
|
||||
function iconPhysics() {
|
||||
if (
|
||||
(
|
||||
temporaryStatus === STATUS_PRIMARY_WORK_DONE ||
|
||||
temporaryStatus === STATUS_SECONDARY_ACTION_WORKING ||
|
||||
temporaryStatus === STATUS_SECONDARY_WORK_DONE ||
|
||||
temporaryStatus === STATUS_SECONDARY_WORK_FAILED
|
||||
) && thisObject.secondaryAction !== undefined
|
||||
) {
|
||||
thisObject.iconOn = canvas.designSpace.iconCollection.get(thisObject.secondaryIcon)
|
||||
thisObject.iconOff = canvas.designSpace.iconCollection.get(thisObject.secondaryIcon)
|
||||
} else {
|
||||
if (thisObject.relatedUiObject !== undefined) {
|
||||
thisObject.iconOn = canvas.designSpace.iconByUiObjectType.get(thisObject.relatedUiObject)
|
||||
thisObject.iconOff = canvas.designSpace.iconByUiObjectType.get(thisObject.relatedUiObject)
|
||||
} else {
|
||||
if (thisObject.iconPathOn !== undefined && thisObject.iconPathOff !== undefined) {
|
||||
thisObject.iconOn = canvas.designSpace.iconCollection.get(thisObject.iconPathOn)
|
||||
thisObject.iconOff = canvas.designSpace.iconCollection.get(thisObject.iconPathOff)
|
||||
} else {
|
||||
thisObject.iconOn = canvas.designSpace.iconCollection.get(thisObject.icons[thisObject.actionStatus()])
|
||||
thisObject.iconOff = canvas.designSpace.iconCollection.get(thisObject.icons[thisObject.actionStatus()])
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Execute the action and wait for callbacks to update our statuus. */
|
||||
thisObject.actionFunction(thisObject.payload, thisObject.action, thisObject.relatedUiObject, onPrimaryCallBack)
|
||||
return
|
||||
}
|
||||
if (temporaryStatus === STATUS_PRIMARY_WORK_DONE && thisObject.secondaryAction !== undefined) {
|
||||
/* We need to execute the secondary action. */
|
||||
if (thisObject.secondaryWorkingLabel !== undefined) {
|
||||
setStatus(thisObject.secondaryWorkingLabel, UI_COLOR.GREY, undefined, STATUS_SECONDARY_ACTION_WORKING) // Status will not expire, will only change with a callback. Mouse Clicks will be ignored.
|
||||
/* Current Status might be linked to some other object status */
|
||||
|
||||
if (thisObject.actionStatus !== undefined) {
|
||||
thisObject.currentStatus = thisObject.actionStatus()
|
||||
}
|
||||
|
||||
/* Execute the action and wait for callbacks to update our statuus. */
|
||||
thisObject.actionFunction(thisObject.payload, thisObject.secondaryAction, thisObject.relatedUiObject, onSecondaryCallBack)
|
||||
return
|
||||
}
|
||||
/* Current Status sets the icon to be used */
|
||||
|
||||
function onPrimaryCallBack (err, event) {
|
||||
/* While the primary action is being executed some event might have happen. Following we process the ones we can */
|
||||
if (thisObject.currentStatus === true) {
|
||||
thisObject.icon = thisObject.iconOn
|
||||
} else {
|
||||
thisObject.icon = thisObject.iconOff
|
||||
}
|
||||
}
|
||||
|
||||
if (event !== undefined) {
|
||||
if (event.type === 'Secondary Action Already Executed') {
|
||||
setStatus(thisObject.secondaryWorkDoneLabel, UI_COLOR.PATINATED_TURQUOISE, 100, STATUS_SECONDARY_WORK_DONE)
|
||||
function onMouseOver(point) {
|
||||
if (thisObject.container.frame.isThisPointHere(point, true, false) === true) {
|
||||
isMouseOver = true
|
||||
} else {
|
||||
isMouseOver = false
|
||||
}
|
||||
MENU_ITEM_ON_FOCUS = thisObject
|
||||
}
|
||||
|
||||
function onMouseNotOver(point) {
|
||||
isMouseOver = false
|
||||
MENU_ITEM_ON_FOCUS = undefined
|
||||
}
|
||||
|
||||
function internalClick() {
|
||||
if (thisObject.shorcutNumber !== undefined) {
|
||||
let label = thisObject.payload.node.name + ' ' + labelToPrint
|
||||
canvas.cockpitSpace.setStatus(label, 50, canvas.cockpitSpace.statusTypes.ALL_GOOD)
|
||||
}
|
||||
|
||||
onMouseClick()
|
||||
}
|
||||
|
||||
function onMouseClick() {
|
||||
if (thisObject.isEnabled === false) { return }
|
||||
|
||||
if (thisObject.label === undefined) {
|
||||
/* This is what we have in the case of menu items that are only Icons. In this situation there is no complex logic, just execute the specified action. */
|
||||
thisObject.actionFunction(thisObject.payload, thisObject.action, thisObject.relatedUiObject)
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
/* If there is a secondary action we will act different that if there is not */
|
||||
if (thisObject.secondaryAction === undefined) { // This means there are no more possible actions.
|
||||
if (err.result === GLOBAL.DEFAULT_OK_RESPONSE.result) {
|
||||
if (thisObject.workDoneLabel !== undefined) {
|
||||
setStatus(thisObject.workDoneLabel, UI_COLOR.PATINATED_TURQUOISE, 100, STATUS_PRIMARY_WORK_DONE)
|
||||
}
|
||||
} else {
|
||||
if (thisObject.workFailedLabel != undefined) {
|
||||
setStatus(thisObject.workFailedLabel, UI_COLOR.TITANIUM_YELLOW, 100, STATUS_PRIMARY_WORK_FAILED)
|
||||
}
|
||||
}
|
||||
if (thisObject.askConfirmation !== true) { /* No confirmation is needed */
|
||||
if (temporaryStatus === STATUS_NO_ACTION_TAKEN_YET || temporaryStatus === STATUS_PRIMARY_WORK_DONE) {
|
||||
executeAction()
|
||||
} // Any click out of those states is ignored
|
||||
} else {
|
||||
if (err.result === GLOBAL.DEFAULT_OK_RESPONSE.result) {
|
||||
if (thisObject.workDoneLabel !== undefined) {
|
||||
thisObject.nextAction = thisObject.secondaryAction
|
||||
setStatus(thisObject.secondaryLabel, defaultBackgroudColor, undefined, STATUS_PRIMARY_WORK_DONE)
|
||||
/* Confirmation is needed */
|
||||
|
||||
/* The first click ask for confirmation. */
|
||||
if (temporaryStatus === STATUS_NO_ACTION_TAKEN_YET) {
|
||||
setStatus(thisObject.confirmationLabel, UI_COLOR.GOLDEN_ORANGE, 250, STATUS_WAITING_CONFIRMATION)
|
||||
return
|
||||
}
|
||||
} else {
|
||||
if (thisObject.workFailedLabel != undefined) {
|
||||
setStatus(thisObject.workFailedLabel, UI_COLOR.TITANIUM_YELLOW, 100, STATUS_PRIMARY_WORK_FAILED)
|
||||
/* A Click during confirmation executes the pre-defined action. */
|
||||
if (temporaryStatus === STATUS_WAITING_CONFIRMATION || temporaryStatus === STATUS_PRIMARY_WORK_DONE) {
|
||||
executeAction()
|
||||
if (thisObject.workDoneLabel !== undefined) {
|
||||
setStatus(thisObject.workDoneLabel, UI_COLOR.PATINATED_TURQUOISE, 100, STATUS_SECONDARY_WORK_DONE)
|
||||
} else {
|
||||
setStatus('Done', UI_COLOR.PATINATED_TURQUOISE, 100, STATUS_SECONDARY_WORK_DONE)
|
||||
}
|
||||
return
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
function onSecondaryCallBack (err) {
|
||||
if (err.result === GLOBAL.DEFAULT_OK_RESPONSE.result) {
|
||||
if (thisObject.secondaryWorkDoneLabel !== undefined) {
|
||||
setStatus(thisObject.secondaryWorkDoneLabel, UI_COLOR.PATINATED_TURQUOISE, 100, STATUS_SECONDARY_WORK_DONE)
|
||||
}
|
||||
} else {
|
||||
if (thisObject.secondaryWorkFailedLabel != undefined) {
|
||||
setStatus(thisObject.secondaryWorkFailedLabel, UI_COLOR.TITANIUM_YELLOW, 100, STATUS_SECONDARY_WORK_FAILED)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function setStatus (text, backgroundColor, waitingCycles, newStatus) {
|
||||
labelToPrint = text
|
||||
backgroundColorToUse = backgroundColor
|
||||
temporaryStatus = newStatus
|
||||
temporaryStatusCounter = newStatus // This will often put this into negatives numbers, which will disable the counting back and automatic reseting.
|
||||
if (waitingCycles !== undefined) { // This will override the often negative value with a positive one that will tend to zero onto the default state.
|
||||
temporaryStatusCounter = waitingCycles
|
||||
}
|
||||
}
|
||||
|
||||
function drawBackground () {
|
||||
if (thisObject.dontShowAtFullscreen === true && AT_FULL_SCREEN_MODE === true) { return }
|
||||
|
||||
if (thisObject.container.frame.position.x > 0 && thisObject.isDeployed === true && thisObject.currentRadius >= thisObject.targetRadius) {
|
||||
if (thisObject.type === 'Icon & Text') {
|
||||
let backgroundColor = backgroundColorToUse
|
||||
if (thisObject.isEnabled === false) {
|
||||
backgroundColor = UI_COLOR.GREY
|
||||
}
|
||||
let params = {
|
||||
cornerRadius: 5,
|
||||
lineWidth: 0.1,
|
||||
container: thisObject.container,
|
||||
borderColor: UI_COLOR.DARK,
|
||||
backgroundColor: backgroundColor,
|
||||
castShadow: false,
|
||||
xOffset: 60
|
||||
}
|
||||
|
||||
if (isMouseOver === true) {
|
||||
params.opacity = 1
|
||||
} else {
|
||||
params.opacity = 0.8
|
||||
function executeAction() {
|
||||
if (temporaryStatus === STATUS_NO_ACTION_TAKEN_YET || temporaryStatus === STATUS_WAITING_CONFIRMATION) {
|
||||
/* We need to execute the main Action */
|
||||
/* If there is a working label defined, we use it here. */
|
||||
if (thisObject.workingLabel !== undefined) {
|
||||
setStatus(thisObject.workingLabel, UI_COLOR.GREY, undefined, STATUS_PRIMARY_ACTION_WORKING) // Status will not expire, will only change with a callback. Mouse Clicks will be ignored.
|
||||
}
|
||||
|
||||
/* Execute the action and wait for callbacks to update our statuus. */
|
||||
thisObject.actionFunction(thisObject.payload, thisObject.action, thisObject.relatedUiObject, onPrimaryCallBack)
|
||||
return
|
||||
}
|
||||
if (temporaryStatus === STATUS_PRIMARY_WORK_DONE && thisObject.secondaryAction !== undefined) {
|
||||
/* We need to execute the secondary action. */
|
||||
if (thisObject.secondaryWorkingLabel !== undefined) {
|
||||
setStatus(thisObject.secondaryWorkingLabel, UI_COLOR.GREY, undefined, STATUS_SECONDARY_ACTION_WORKING) // Status will not expire, will only change with a callback. Mouse Clicks will be ignored.
|
||||
}
|
||||
|
||||
/* Execute the action and wait for callbacks to update our statuus. */
|
||||
thisObject.actionFunction(thisObject.payload, thisObject.secondaryAction, thisObject.relatedUiObject, onSecondaryCallBack)
|
||||
return
|
||||
}
|
||||
|
||||
function onPrimaryCallBack(err, event) {
|
||||
/* While the primary action is being executed some event might have happen. Following we process the ones we can */
|
||||
|
||||
if (event !== undefined) {
|
||||
if (event.type === 'Secondary Action Already Executed') {
|
||||
setStatus(thisObject.secondaryWorkDoneLabel, UI_COLOR.PATINATED_TURQUOISE, 100, STATUS_SECONDARY_WORK_DONE)
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
/* If there is a secondary action we will act different that if there is not */
|
||||
if (thisObject.secondaryAction === undefined) { // This means there are no more possible actions.
|
||||
if (err.result === GLOBAL.DEFAULT_OK_RESPONSE.result) {
|
||||
if (thisObject.workDoneLabel !== undefined) {
|
||||
setStatus(thisObject.workDoneLabel, UI_COLOR.PATINATED_TURQUOISE, 100, STATUS_PRIMARY_WORK_DONE)
|
||||
}
|
||||
} else {
|
||||
if (thisObject.workFailedLabel != undefined) {
|
||||
setStatus(thisObject.workFailedLabel, UI_COLOR.TITANIUM_YELLOW, 100, STATUS_PRIMARY_WORK_FAILED)
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (err.result === GLOBAL.DEFAULT_OK_RESPONSE.result) {
|
||||
if (thisObject.workDoneLabel !== undefined) {
|
||||
thisObject.nextAction = thisObject.secondaryAction
|
||||
setStatus(thisObject.secondaryLabel, defaultBackgroudColor, undefined, STATUS_PRIMARY_WORK_DONE)
|
||||
}
|
||||
} else {
|
||||
if (thisObject.workFailedLabel != undefined) {
|
||||
setStatus(thisObject.workFailedLabel, UI_COLOR.TITANIUM_YELLOW, 100, STATUS_PRIMARY_WORK_FAILED)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
function onSecondaryCallBack(err) {
|
||||
if (err.result === GLOBAL.DEFAULT_OK_RESPONSE.result) {
|
||||
if (thisObject.secondaryWorkDoneLabel !== undefined) {
|
||||
setStatus(thisObject.secondaryWorkDoneLabel, UI_COLOR.PATINATED_TURQUOISE, 100, STATUS_SECONDARY_WORK_DONE)
|
||||
}
|
||||
} else {
|
||||
if (thisObject.secondaryWorkFailedLabel != undefined) {
|
||||
setStatus(thisObject.secondaryWorkFailedLabel, UI_COLOR.TITANIUM_YELLOW, 100, STATUS_SECONDARY_WORK_FAILED)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
roundedCornersBackground(params)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function drawForeground () {
|
||||
if (thisObject.dontShowAtFullscreen === true && AT_FULL_SCREEN_MODE === true) { return }
|
||||
|
||||
let menuPosition = {
|
||||
x: thisObject.currentRadius * 1.5,
|
||||
y: thisObject.container.frame.height / 2
|
||||
}
|
||||
|
||||
menuPosition = thisObject.container.frame.frameThisPoint(menuPosition)
|
||||
function setStatus(text, backgroundColor, waitingCycles, newStatus) {
|
||||
labelToPrint = text
|
||||
backgroundColorToUse = backgroundColor
|
||||
temporaryStatus = newStatus
|
||||
temporaryStatusCounter = newStatus // This will often put this into negatives numbers, which will disable the counting back and automatic reseting.
|
||||
if (waitingCycles !== undefined) { // This will override the often negative value with a positive one that will tend to zero onto the default state.
|
||||
temporaryStatusCounter = waitingCycles
|
||||
}
|
||||
}
|
||||
|
||||
function drawBackground() {
|
||||
if (thisObject.dontShowAtFullscreen === true && AT_FULL_SCREEN_MODE === true) { return }
|
||||
|
||||
if (thisObject.container.frame.position.x > 0 && thisObject.isDeployed === true && thisObject.currentRadius >= thisObject.targetRadius) {
|
||||
if (thisObject.type === 'Icon & Text') {
|
||||
let backgroundColor = backgroundColorToUse
|
||||
if (thisObject.isEnabled === false) {
|
||||
backgroundColor = UI_COLOR.GREY
|
||||
}
|
||||
let params = {
|
||||
cornerRadius: 5,
|
||||
lineWidth: 0.1,
|
||||
container: thisObject.container,
|
||||
borderColor: UI_COLOR.DARK,
|
||||
backgroundColor: backgroundColor,
|
||||
castShadow: false,
|
||||
xOffset: 60
|
||||
}
|
||||
|
||||
if (isMouseOver === true) {
|
||||
params.opacity = 1
|
||||
} else {
|
||||
params.opacity = 0.8
|
||||
}
|
||||
|
||||
roundedCornersBackground(params)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function drawForeground() {
|
||||
if (thisObject.dontShowAtFullscreen === true && AT_FULL_SCREEN_MODE === true) { return }
|
||||
|
||||
let menuPosition = {
|
||||
x: thisObject.currentRadius * 1.5,
|
||||
y: thisObject.container.frame.height / 2
|
||||
}
|
||||
|
||||
menuPosition = thisObject.container.frame.frameThisPoint(menuPosition)
|
||||
|
||||
/* Menu Item */
|
||||
|
||||
let iconSize
|
||||
if (isMouseOver === true) {
|
||||
iconSize = thisObject.currentRadius + EXTRA_MOUSE_OVER_ICON_SIZE
|
||||
} else {
|
||||
iconSize = thisObject.currentRadius
|
||||
}
|
||||
|
||||
if (thisObject.icon === undefined) { return }
|
||||
if (thisObject.icon.canDrawIcon === true && thisObject.currentRadius > 1 && thisObject.isDeployed === true) {
|
||||
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) {
|
||||
label = '' + thisObject.shorcutNumber + '- ' + labelToPrint
|
||||
let iconSize
|
||||
if (isMouseOver === true) {
|
||||
iconSize = thisObject.currentRadius + EXTRA_MOUSE_OVER_ICON_SIZE
|
||||
} else {
|
||||
iconSize = thisObject.currentRadius
|
||||
}
|
||||
|
||||
let labelPoint
|
||||
let fontSize = 15
|
||||
if (thisObject.icon === undefined) { return }
|
||||
if (thisObject.icon.canDrawIcon === true && thisObject.currentRadius > 1 && thisObject.isDeployed === true) {
|
||||
browserCanvasContext.drawImage(thisObject.icon, menuPosition.x - iconSize, menuPosition.y - iconSize, iconSize * 2, iconSize * 2)
|
||||
|
||||
browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
|
||||
/* Menu Label */
|
||||
|
||||
if (thisObject.currentRadius >= thisObject.targetRadius) {
|
||||
labelPoint = {
|
||||
x: menuPosition.x + thisObject.currentRadius + 25,
|
||||
y: menuPosition.y + fontSize * FONT_ASPECT_RATIO
|
||||
}
|
||||
if (thisObject.type === 'Icon & Text') {
|
||||
label = labelToPrint
|
||||
if (thisObject.shorcutNumber !== undefined) {
|
||||
label = '' + thisObject.shorcutNumber + '- ' + labelToPrint
|
||||
}
|
||||
|
||||
browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
|
||||
browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)'
|
||||
browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y)
|
||||
let labelPoint
|
||||
let fontSize = 15
|
||||
|
||||
browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
|
||||
|
||||
if (thisObject.currentRadius >= thisObject.targetRadius) {
|
||||
labelPoint = {
|
||||
x: menuPosition.x + thisObject.currentRadius + 25,
|
||||
y: menuPosition.y + fontSize * FONT_ASPECT_RATIO
|
||||
}
|
||||
|
||||
browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
|
||||
browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)'
|
||||
browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,146 +1,146 @@
|
||||
|
||||
function newCircularProgressBar () {
|
||||
const MODULE_NAME = 'Circular Progress Bar'
|
||||
function newCircularProgressBar() {
|
||||
const MODULE_NAME = 'Circular Progress Bar'
|
||||
|
||||
let thisObject = {
|
||||
container: undefined,
|
||||
isDeployed: undefined,
|
||||
physics: physics,
|
||||
drawBackground: drawBackground,
|
||||
drawForeground: drawForeground,
|
||||
getContainer: getContainer,
|
||||
finalize: finalize,
|
||||
initialize: initialize
|
||||
}
|
||||
|
||||
thisObject.container = newContainer()
|
||||
thisObject.container.initialize(MODULE_NAME, 'Circle')
|
||||
thisObject.container.isClickeable = false
|
||||
thisObject.container.isDraggeable = false
|
||||
thisObject.container.frame.radius = 0
|
||||
thisObject.container.frame.position.x = 0
|
||||
thisObject.container.frame.position.y = 0
|
||||
|
||||
let opacityCounters = []
|
||||
let eventSubscriptionIdHeartbeat
|
||||
let needToDrawRing = true
|
||||
let eventsServerClient
|
||||
|
||||
return thisObject
|
||||
|
||||
function finalize () {
|
||||
finalizeEventsServerClient()
|
||||
|
||||
thisObject.container = undefined
|
||||
thisObject.payload = undefined
|
||||
thisObject.fitFunction = undefined
|
||||
}
|
||||
|
||||
function finalizeEventsServerClient () {
|
||||
if (eventsServerClient !== undefined) {
|
||||
let key = thisObject.payload.node.name + '-' + thisObject.payload.node.type + '-' + thisObject.payload.node.id
|
||||
if (eventSubscriptionIdHeartbeat !== undefined) {
|
||||
eventsServerClient.stopListening(key, eventSubscriptionIdHeartbeat)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function initialize (payload, pEventsServerClient) {
|
||||
thisObject.payload = payload
|
||||
|
||||
finalizeEventsServerClient()
|
||||
eventsServerClient = pEventsServerClient
|
||||
|
||||
for (let i = 0; i < 60; i++) {
|
||||
opacityCounters.push(0)
|
||||
let thisObject = {
|
||||
container: undefined,
|
||||
isDeployed: undefined,
|
||||
physics: physics,
|
||||
drawBackground: drawBackground,
|
||||
drawForeground: drawForeground,
|
||||
getContainer: getContainer,
|
||||
finalize: finalize,
|
||||
initialize: initialize
|
||||
}
|
||||
|
||||
let key = thisObject.payload.node.name + '-' + thisObject.payload.node.type + '-' + thisObject.payload.node.id
|
||||
eventsServerClient.listenToEvent(key, 'Heartbeat', undefined, key, onResponse, onHeartBeat)
|
||||
thisObject.container = newContainer()
|
||||
thisObject.container.initialize(MODULE_NAME, 'Circle')
|
||||
thisObject.container.isClickeable = false
|
||||
thisObject.container.isDraggeable = false
|
||||
thisObject.container.frame.radius = 0
|
||||
thisObject.container.frame.position.x = 0
|
||||
thisObject.container.frame.position.y = 0
|
||||
|
||||
function onResponse (message) {
|
||||
eventSubscriptionIdHeartbeat = message.eventSubscriptionId
|
||||
}
|
||||
}
|
||||
let opacityCounters = []
|
||||
let eventSubscriptionIdHeartbeat
|
||||
let needToDrawRing = true
|
||||
let eventsServerClient
|
||||
|
||||
function onHeartBeat (message) {
|
||||
if (thisObject.payload === undefined) { return }
|
||||
if (thisObject.payload.uiObject === undefined) { return }
|
||||
opacityCounters[message.event.seconds] = 2000
|
||||
if (message.event.processingDate !== undefined) {
|
||||
thisObject.payload.uiObject.setValue(message.event.processingDate, 2000)
|
||||
}
|
||||
if (message.event.percentage !== undefined) {
|
||||
thisObject.payload.uiObject.setPercentage(message.event.percentage, 2000)
|
||||
}
|
||||
if (message.event.status !== undefined) {
|
||||
needToDrawRing = false
|
||||
thisObject.payload.uiObject.setStatus(message.event.status, 200000)
|
||||
return thisObject
|
||||
|
||||
function finalize() {
|
||||
finalizeEventsServerClient()
|
||||
|
||||
thisObject.container = undefined
|
||||
thisObject.payload = undefined
|
||||
thisObject.fitFunction = undefined
|
||||
}
|
||||
|
||||
thisObject.payload.uiObject.heartBeat()
|
||||
}
|
||||
|
||||
function getContainer (point) {
|
||||
if (canvas.floatingSpace.inMapMode === true) { return }
|
||||
let container
|
||||
|
||||
for (let i = 0; i < menuItems.length; i++) {
|
||||
let menutItem = menuItems[i]
|
||||
container = menutItem.getContainer(point)
|
||||
if (container !== undefined) { return container }
|
||||
}
|
||||
}
|
||||
|
||||
function physics () {
|
||||
for (let i = 0; i < 60; i++) {
|
||||
opacityCounters[i] = opacityCounters[i] - 2
|
||||
|
||||
if (opacityCounters[i] < 0) {
|
||||
opacityCounters[i] = 0
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function drawForeground (pFloatingObject) {
|
||||
|
||||
}
|
||||
|
||||
function drawBackground (pFloatingObject) {
|
||||
if (canvas.floatingSpace.inMapMode === true) { return }
|
||||
if (needToDrawRing !== true) { return }
|
||||
|
||||
const VISIBLE_RADIUS = thisObject.container.frame.radius * 2
|
||||
|
||||
let visiblePosition = {
|
||||
x: thisObject.container.frame.position.x,
|
||||
y: thisObject.container.frame.position.y
|
||||
function finalizeEventsServerClient() {
|
||||
if (eventsServerClient !== undefined) {
|
||||
let key = thisObject.payload.node.name + '-' + thisObject.payload.node.type + '-' + thisObject.payload.node.id
|
||||
if (eventSubscriptionIdHeartbeat !== undefined) {
|
||||
eventsServerClient.stopListening(key, eventSubscriptionIdHeartbeat)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
visiblePosition = thisObject.container.frame.frameThisPoint(visiblePosition)
|
||||
visiblePosition = thisObject.fitFunction(visiblePosition)
|
||||
function initialize(payload, pEventsServerClient) {
|
||||
thisObject.payload = payload
|
||||
|
||||
for (let i = 0; i < 60; i++) {
|
||||
let OPACITY = opacityCounters[i] / 1000
|
||||
finalizeEventsServerClient()
|
||||
eventsServerClient = pEventsServerClient
|
||||
|
||||
if (OPACITY === 0) { continue }
|
||||
for (let i = 0; i < 60; i++) {
|
||||
opacityCounters.push(0)
|
||||
}
|
||||
|
||||
let initialAngle = Math.PI * 2 / 60 * i - Math.PI / 2
|
||||
let finalAngle = Math.PI * 2 / 60 * (i + 1) - Math.PI / 2
|
||||
let key = thisObject.payload.node.name + '-' + thisObject.payload.node.type + '-' + thisObject.payload.node.id
|
||||
eventsServerClient.listenToEvent(key, 'Heartbeat', undefined, key, onResponse, onHeartBeat)
|
||||
|
||||
browserCanvasContext.beginPath()
|
||||
browserCanvasContext.arc(visiblePosition.x, visiblePosition.y, VISIBLE_RADIUS, initialAngle, finalAngle, false)
|
||||
browserCanvasContext.closePath()
|
||||
|
||||
browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.GOLDEN_ORANGE + ', ' + OPACITY * 2 + ')'
|
||||
browserCanvasContext.lineWidth = 6 + opacityCounters[i] / 100 / 2
|
||||
browserCanvasContext.setLineDash([3, 4])
|
||||
browserCanvasContext.stroke()
|
||||
|
||||
browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.DARK_TURQUOISE + ', ' + OPACITY + ')'
|
||||
browserCanvasContext.lineWidth = 0 + opacityCounters[i] / 100 / 2
|
||||
browserCanvasContext.setLineDash([3, 4])
|
||||
browserCanvasContext.stroke()
|
||||
function onResponse(message) {
|
||||
eventSubscriptionIdHeartbeat = message.eventSubscriptionId
|
||||
}
|
||||
}
|
||||
|
||||
function onHeartBeat(message) {
|
||||
if (thisObject.payload === undefined) { return }
|
||||
if (thisObject.payload.uiObject === undefined) { return }
|
||||
opacityCounters[message.event.seconds] = 2000
|
||||
if (message.event.processingDate !== undefined) {
|
||||
thisObject.payload.uiObject.setValue(message.event.processingDate, 2000)
|
||||
}
|
||||
if (message.event.percentage !== undefined) {
|
||||
thisObject.payload.uiObject.setPercentage(message.event.percentage, 2000)
|
||||
}
|
||||
if (message.event.status !== undefined) {
|
||||
needToDrawRing = false
|
||||
thisObject.payload.uiObject.setStatus(message.event.status, 200000)
|
||||
}
|
||||
|
||||
thisObject.payload.uiObject.heartBeat()
|
||||
}
|
||||
|
||||
function getContainer(point) {
|
||||
if (canvas.floatingSpace.inMapMode === true) { return }
|
||||
let container
|
||||
|
||||
for (let i = 0; i < menuItems.length; i++) {
|
||||
let menutItem = menuItems[i]
|
||||
container = menutItem.getContainer(point)
|
||||
if (container !== undefined) { return container }
|
||||
}
|
||||
}
|
||||
|
||||
function physics() {
|
||||
for (let i = 0; i < 60; i++) {
|
||||
opacityCounters[i] = opacityCounters[i] - 2
|
||||
|
||||
if (opacityCounters[i] < 0) {
|
||||
opacityCounters[i] = 0
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function drawForeground(pFloatingObject) {
|
||||
|
||||
}
|
||||
|
||||
function drawBackground(pFloatingObject) {
|
||||
if (canvas.floatingSpace.inMapMode === true) { return }
|
||||
if (needToDrawRing !== true) { return }
|
||||
|
||||
const VISIBLE_RADIUS = thisObject.container.frame.radius * 2
|
||||
|
||||
let visiblePosition = {
|
||||
x: thisObject.container.frame.position.x,
|
||||
y: thisObject.container.frame.position.y
|
||||
}
|
||||
|
||||
visiblePosition = thisObject.container.frame.frameThisPoint(visiblePosition)
|
||||
visiblePosition = thisObject.fitFunction(visiblePosition)
|
||||
|
||||
for (let i = 0; i < 60; i++) {
|
||||
let OPACITY = opacityCounters[i] / 1000
|
||||
|
||||
if (OPACITY === 0) { continue }
|
||||
|
||||
let initialAngle = Math.PI * 2 / 60 * i - Math.PI / 2
|
||||
let finalAngle = Math.PI * 2 / 60 * (i + 1) - Math.PI / 2
|
||||
|
||||
browserCanvasContext.beginPath()
|
||||
browserCanvasContext.arc(visiblePosition.x, visiblePosition.y, VISIBLE_RADIUS, initialAngle, finalAngle, false)
|
||||
browserCanvasContext.closePath()
|
||||
|
||||
browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.GOLDEN_ORANGE + ', ' + OPACITY * 2 + ')'
|
||||
browserCanvasContext.lineWidth = 6 + opacityCounters[i] / 100 / 2
|
||||
browserCanvasContext.setLineDash([3, 4])
|
||||
browserCanvasContext.stroke()
|
||||
|
||||
browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.DARK_TURQUOISE + ', ' + OPACITY + ')'
|
||||
browserCanvasContext.lineWidth = 0 + opacityCounters[i] / 100 / 2
|
||||
browserCanvasContext.setLineDash([3, 4])
|
||||
browserCanvasContext.stroke()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
+177
-177
@@ -1,199 +1,199 @@
|
||||
|
||||
function newCodeEditor () {
|
||||
const MODULE_NAME = 'Code Editor'
|
||||
function newCodeEditor() {
|
||||
const MODULE_NAME = 'Code Editor'
|
||||
|
||||
let thisObject = {
|
||||
isVisibleFunction: undefined,
|
||||
visible: false,
|
||||
imagePathOK: undefined,
|
||||
imagePathNOT_OK: undefined,
|
||||
rawRadius: undefined,
|
||||
targetRadius: undefined,
|
||||
currentRadius: undefined,
|
||||
container: undefined,
|
||||
payload: undefined,
|
||||
deactivate: deactivate,
|
||||
activate: activate,
|
||||
physics: physics,
|
||||
drawBackground: drawBackground,
|
||||
drawForeground: drawForeground,
|
||||
getContainer: getContainer,
|
||||
finalize: finalize,
|
||||
initialize: initialize
|
||||
}
|
||||
|
||||
thisObject.container = newContainer()
|
||||
thisObject.container.initialize(MODULE_NAME)
|
||||
thisObject.container.isClickeable = false
|
||||
thisObject.container.isDraggeable = false
|
||||
thisObject.container.detectMouseOver = false
|
||||
thisObject.container.frame.radius = 0
|
||||
thisObject.container.frame.position.x = 0
|
||||
thisObject.container.frame.position.y = 0
|
||||
|
||||
let isMouseOver = false
|
||||
let SIZE_FACTOR = 1.4
|
||||
|
||||
return thisObject
|
||||
|
||||
function finalize () {
|
||||
thisObject.container.finalize()
|
||||
thisObject.container = undefined
|
||||
thisObject.payload = undefined
|
||||
thisObject.isVisibleFunction = undefined
|
||||
}
|
||||
|
||||
function initialize () {
|
||||
|
||||
}
|
||||
|
||||
function deactivate () {
|
||||
if (thisObject.visible === true) {
|
||||
thisObject.visible = false
|
||||
let textArea = document.getElementById('textArea')
|
||||
textArea.style.display = 'none'
|
||||
thisObject.payload.node.code = textArea.value
|
||||
}
|
||||
EDITOR_ON_FOCUS = false
|
||||
}
|
||||
|
||||
function activate (payload) {
|
||||
thisObject.visible = true
|
||||
thisObject.payload = payload
|
||||
thisObject.rawRadius = 8
|
||||
thisObject.targetRadius = thisObject.container.frame.radius
|
||||
thisObject.currentRadius = 0
|
||||
thisObject.payload.uiObject.setErrorMessage('', 0)
|
||||
|
||||
let textArea = document.getElementById('textArea')
|
||||
textArea.value = payload.node.code
|
||||
textArea.style = 'resize: none;' +
|
||||
' border: none;' +
|
||||
' outline: none;' +
|
||||
'box-shadow: none;' +
|
||||
'overflow:hidden;' +
|
||||
'font-family: ' + UI_FONT.PRIMARY + ';' +
|
||||
'font-size: 14px;' +
|
||||
'background-color: rgb(' + UI_COLOR.RUSTED_RED + ');' +
|
||||
'color:rgb(255, 255, 255);' +
|
||||
'width: ' + thisObject.container.frame.width + 'px;' +
|
||||
'height: ' + thisObject.container.frame.height + 'px'
|
||||
textArea.style.display = 'block'
|
||||
textArea.focus()
|
||||
EDITOR_ON_FOCUS = true
|
||||
}
|
||||
|
||||
function getContainer (point) {
|
||||
let container
|
||||
if (thisObject.visible === true) {
|
||||
if (point.x === VERY_LARGE_NUMBER) {
|
||||
/* The the mouse leaves the canvas, and event of mouse over with a ridiculous coordinate is triggered so that
|
||||
anyone can react. In our case, the code editor has a text area that is not part of the canvas, so the event is
|
||||
triggered. We compensate recognizing this coordinate and returning our container. */
|
||||
return thisObject.container
|
||||
}
|
||||
|
||||
if (thisObject.container.frame.isThisPointHere(point, true, false) === true) {
|
||||
return thisObject.container
|
||||
} else {
|
||||
return undefined
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function physics () {
|
||||
if (Math.abs(thisObject.currentRadius - thisObject.targetRadius) >= 0.5) {
|
||||
if (thisObject.currentRadius < thisObject.targetRadius) {
|
||||
thisObject.currentRadius = thisObject.currentRadius + 0.5
|
||||
} else {
|
||||
thisObject.currentRadius = thisObject.currentRadius - 0.5
|
||||
}
|
||||
let thisObject = {
|
||||
isVisibleFunction: undefined,
|
||||
visible: false,
|
||||
imagePathOK: undefined,
|
||||
imagePathNOT_OK: undefined,
|
||||
rawRadius: undefined,
|
||||
targetRadius: undefined,
|
||||
currentRadius: undefined,
|
||||
container: undefined,
|
||||
payload: undefined,
|
||||
deactivate: deactivate,
|
||||
activate: activate,
|
||||
physics: physics,
|
||||
drawBackground: drawBackground,
|
||||
drawForeground: drawForeground,
|
||||
getContainer: getContainer,
|
||||
finalize: finalize,
|
||||
initialize: initialize
|
||||
}
|
||||
|
||||
thisObject.container = newContainer()
|
||||
thisObject.container.initialize(MODULE_NAME)
|
||||
thisObject.container.isClickeable = false
|
||||
thisObject.container.isDraggeable = false
|
||||
thisObject.container.detectMouseOver = false
|
||||
thisObject.container.frame.radius = 0
|
||||
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.height = thisObject.container.frame.radius * 1 * SIZE_FACTOR
|
||||
let isMouseOver = false
|
||||
let SIZE_FACTOR = 1.4
|
||||
|
||||
let textAreaPosition = {
|
||||
x: 0 - thisObject.container.frame.width / 2,
|
||||
y: 0 - thisObject.container.frame.height * 3 / 7 + CURRENT_TOP_MARGIN
|
||||
return thisObject
|
||||
|
||||
function finalize() {
|
||||
thisObject.container.finalize()
|
||||
thisObject.container = undefined
|
||||
thisObject.payload = undefined
|
||||
thisObject.isVisibleFunction = undefined
|
||||
}
|
||||
|
||||
textAreaPosition = thisObject.container.frame.frameThisPoint(textAreaPosition)
|
||||
if (thisObject.visible === true) {
|
||||
let checkPosition = {
|
||||
x: textAreaPosition.x,
|
||||
y: textAreaPosition.y - CURRENT_TOP_MARGIN
|
||||
}
|
||||
if (thisObject.isVisibleFunction(checkPosition) === false) {
|
||||
deactivate()
|
||||
}
|
||||
}
|
||||
if (thisObject.visible === true) {
|
||||
let textAreaDiv = document.getElementById('textAreaDiv')
|
||||
textAreaDiv.style = 'position:fixed; top:' + textAreaPosition.y + 'px; left:' + textAreaPosition.x + 'px; z-index:1; '
|
||||
}
|
||||
}
|
||||
function initialize() {
|
||||
|
||||
function drawBackground () {
|
||||
if (thisObject.visible === true) {
|
||||
let position = {
|
||||
x: 0,
|
||||
y: 0
|
||||
}
|
||||
|
||||
position = thisObject.container.frame.frameThisPoint(position)
|
||||
|
||||
let radius = thisObject.container.frame.radius * SIZE_FACTOR
|
||||
|
||||
if (radius > 0.5) {
|
||||
browserCanvasContext.beginPath()
|
||||
browserCanvasContext.arc(position.x, position.y, radius * 1.3 + 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.closePath()
|
||||
browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', ' + 1 + ')'
|
||||
browserCanvasContext.fill()
|
||||
}
|
||||
}
|
||||
}
|
||||
function drawForeground () {
|
||||
let iconPosition = {
|
||||
x: 0,
|
||||
y: thisObject.currentRadius * 1.5
|
||||
}
|
||||
|
||||
iconPosition = thisObject.container.frame.frameThisPoint(iconPosition)
|
||||
function deactivate() {
|
||||
if (thisObject.visible === true) {
|
||||
thisObject.visible = false
|
||||
let textArea = document.getElementById('textArea')
|
||||
textArea.style.display = 'none'
|
||||
thisObject.payload.node.code = textArea.value
|
||||
}
|
||||
EDITOR_ON_FOCUS = false
|
||||
}
|
||||
|
||||
/* Menu Item */
|
||||
function activate(payload) {
|
||||
thisObject.visible = true
|
||||
thisObject.payload = payload
|
||||
thisObject.rawRadius = 8
|
||||
thisObject.targetRadius = thisObject.container.frame.radius
|
||||
thisObject.currentRadius = 0
|
||||
thisObject.payload.uiObject.setErrorMessage('', 0)
|
||||
|
||||
if (thisObject.canDrawIcon === true && thisObject.currentRadius > 1) {
|
||||
browserCanvasContext.drawImage(thisObject.icon, iconPosition.x - thisObject.currentRadius, iconPosition.y - thisObject.currentRadius, thisObject.currentRadius * 2, thisObject.currentRadius * 2)
|
||||
let textArea = document.getElementById('textArea')
|
||||
textArea.value = payload.node.code
|
||||
textArea.style = 'resize: none;' +
|
||||
' border: none;' +
|
||||
' outline: none;' +
|
||||
'box-shadow: none;' +
|
||||
'overflow:hidden;' +
|
||||
'font-family: ' + UI_FONT.PRIMARY + ';' +
|
||||
'font-size: 14px;' +
|
||||
'background-color: rgb(' + UI_COLOR.RUSTED_RED + ');' +
|
||||
'color:rgb(255, 255, 255);' +
|
||||
'width: ' + thisObject.container.frame.width + 'px;' +
|
||||
'height: ' + thisObject.container.frame.height + 'px'
|
||||
textArea.style.display = 'block'
|
||||
textArea.focus()
|
||||
EDITOR_ON_FOCUS = true
|
||||
}
|
||||
|
||||
/* Menu Label */
|
||||
function getContainer(point) {
|
||||
let container
|
||||
if (thisObject.visible === true) {
|
||||
if (point.x === VERY_LARGE_NUMBER) {
|
||||
/* The the mouse leaves the canvas, and event of mouse over with a ridiculous coordinate is triggered so that
|
||||
anyone can react. In our case, the code editor has a text area that is not part of the canvas, so the event is
|
||||
triggered. We compensate recognizing this coordinate and returning our container. */
|
||||
return thisObject.container
|
||||
}
|
||||
|
||||
let label = 'Code looks good!'
|
||||
let labelPoint
|
||||
let fontSize = 10
|
||||
if (thisObject.container.frame.isThisPointHere(point, true, false) === true) {
|
||||
return thisObject.container
|
||||
} else {
|
||||
return undefined
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
|
||||
|
||||
if (label !== undefined && thisObject.currentRadius >= thisObject.targetRadius) {
|
||||
labelPoint = {
|
||||
x: iconPosition.x + thisObject.currentRadius + 10,
|
||||
y: iconPosition.y + fontSize * FONT_ASPECT_RATIO
|
||||
function physics() {
|
||||
if (Math.abs(thisObject.currentRadius - thisObject.targetRadius) >= 0.5) {
|
||||
if (thisObject.currentRadius < thisObject.targetRadius) {
|
||||
thisObject.currentRadius = thisObject.currentRadius + 0.5
|
||||
} else {
|
||||
thisObject.currentRadius = thisObject.currentRadius - 0.5
|
||||
}
|
||||
}
|
||||
|
||||
browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
|
||||
browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)'
|
||||
browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y)
|
||||
}
|
||||
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.height = thisObject.container.frame.radius * 1 * SIZE_FACTOR
|
||||
|
||||
let textAreaPosition = {
|
||||
x: 0 - thisObject.container.frame.width / 2,
|
||||
y: 0 - thisObject.container.frame.height * 3 / 7 + CURRENT_TOP_MARGIN
|
||||
}
|
||||
|
||||
textAreaPosition = thisObject.container.frame.frameThisPoint(textAreaPosition)
|
||||
if (thisObject.visible === true) {
|
||||
let checkPosition = {
|
||||
x: textAreaPosition.x,
|
||||
y: textAreaPosition.y - CURRENT_TOP_MARGIN
|
||||
}
|
||||
if (thisObject.isVisibleFunction(checkPosition) === false) {
|
||||
deactivate()
|
||||
}
|
||||
}
|
||||
if (thisObject.visible === true) {
|
||||
let textAreaDiv = document.getElementById('textAreaDiv')
|
||||
textAreaDiv.style = 'position:fixed; top:' + textAreaPosition.y + 'px; left:' + textAreaPosition.x + 'px; z-index:1; '
|
||||
}
|
||||
}
|
||||
|
||||
function drawBackground() {
|
||||
if (thisObject.visible === true) {
|
||||
let position = {
|
||||
x: 0,
|
||||
y: 0
|
||||
}
|
||||
|
||||
position = thisObject.container.frame.frameThisPoint(position)
|
||||
|
||||
let radius = thisObject.container.frame.radius * SIZE_FACTOR
|
||||
|
||||
if (radius > 0.5) {
|
||||
browserCanvasContext.beginPath()
|
||||
browserCanvasContext.arc(position.x, position.y, radius * 1.3 + 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.closePath()
|
||||
browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', ' + 1 + ')'
|
||||
browserCanvasContext.fill()
|
||||
}
|
||||
}
|
||||
}
|
||||
function drawForeground() {
|
||||
let iconPosition = {
|
||||
x: 0,
|
||||
y: thisObject.currentRadius * 1.5
|
||||
}
|
||||
|
||||
iconPosition = thisObject.container.frame.frameThisPoint(iconPosition)
|
||||
|
||||
/* Menu Item */
|
||||
|
||||
if (thisObject.canDrawIcon === true && thisObject.currentRadius > 1) {
|
||||
browserCanvasContext.drawImage(thisObject.icon, iconPosition.x - thisObject.currentRadius, iconPosition.y - thisObject.currentRadius, thisObject.currentRadius * 2, thisObject.currentRadius * 2)
|
||||
|
||||
/* Menu Label */
|
||||
|
||||
let label = 'Code looks good!'
|
||||
let labelPoint
|
||||
let fontSize = 10
|
||||
|
||||
browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
|
||||
|
||||
if (label !== undefined && thisObject.currentRadius >= thisObject.targetRadius) {
|
||||
labelPoint = {
|
||||
x: iconPosition.x + thisObject.currentRadius + 10,
|
||||
y: iconPosition.y + fontSize * FONT_ASPECT_RATIO
|
||||
}
|
||||
|
||||
browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
|
||||
browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)'
|
||||
browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
+1103
-1103
File diff suppressed because it is too large.
Load diff
+182
-182
@@ -1,205 +1,205 @@
|
||||
|
||||
function newConfigEditor () {
|
||||
const MODULE_NAME = 'Config Editor'
|
||||
function newConfigEditor() {
|
||||
const MODULE_NAME = 'Config Editor'
|
||||
|
||||
let thisObject = {
|
||||
isVisibleFunction: undefined,
|
||||
visible: false,
|
||||
imagePathOK: undefined,
|
||||
imagePathNOT_OK: undefined,
|
||||
rawRadius: undefined,
|
||||
targetRadius: undefined,
|
||||
currentRadius: undefined,
|
||||
container: undefined,
|
||||
payload: undefined,
|
||||
deactivate: deactivate,
|
||||
activate: activate,
|
||||
physics: physics,
|
||||
drawBackground: drawBackground,
|
||||
drawForeground: drawForeground,
|
||||
getContainer: getContainer,
|
||||
finalize: finalize,
|
||||
initialize: initialize
|
||||
}
|
||||
|
||||
thisObject.container = newContainer()
|
||||
thisObject.container.initialize(MODULE_NAME)
|
||||
thisObject.container.isClickeable = false
|
||||
thisObject.container.isDraggeable = false
|
||||
thisObject.container.detectMouseOver = false
|
||||
thisObject.container.frame.radius = 0
|
||||
thisObject.container.frame.position.x = 0
|
||||
thisObject.container.frame.position.y = 0
|
||||
|
||||
let isMouseOver = false
|
||||
let SIZE_FACTOR = 1
|
||||
|
||||
return thisObject
|
||||
|
||||
function finalize () {
|
||||
thisObject.container.finalize()
|
||||
thisObject.container = undefined
|
||||
thisObject.payload = undefined
|
||||
thisObject.isVisibleFunction = undefined
|
||||
}
|
||||
|
||||
function initialize () {
|
||||
|
||||
}
|
||||
|
||||
function deactivate () {
|
||||
if (thisObject.visible === true) {
|
||||
thisObject.visible = false
|
||||
let textArea = document.getElementById('textArea')
|
||||
textArea.style.display = 'none'
|
||||
thisObject.payload.node.config = textArea.value
|
||||
|
||||
try {
|
||||
let config = JSON.parse(thisObject.payload.node.config)
|
||||
} catch (err) {
|
||||
thisObject.payload.uiObject.setErrorMessage(err.message, 10)
|
||||
}
|
||||
}
|
||||
EDITOR_ON_FOCUS = false
|
||||
}
|
||||
|
||||
function activate (payload) {
|
||||
thisObject.visible = true
|
||||
thisObject.payload = payload
|
||||
thisObject.rawRadius = 8
|
||||
thisObject.targetRadius = thisObject.container.frame.radius
|
||||
thisObject.currentRadius = 0
|
||||
thisObject.payload.uiObject.setErrorMessage('', 0)
|
||||
|
||||
let textArea = document.getElementById('textArea')
|
||||
textArea.value = payload.node.config
|
||||
textArea.style = 'resize: none;' +
|
||||
' border: none;' +
|
||||
' outline: none;' +
|
||||
'box-shadow: none;' +
|
||||
'overflow:hidden;' +
|
||||
'font-family: ' + UI_FONT.PRIMARY + ';' +
|
||||
'font-size: 14px;' +
|
||||
'background-color: rgb(' + UI_COLOR.DARK_TURQUOISE + ');' +
|
||||
'color:rgb(255, 255, 255);' +
|
||||
'width: ' + thisObject.container.frame.width + 'px;' +
|
||||
'height: ' + thisObject.container.frame.height + 'px'
|
||||
textArea.style.display = 'block'
|
||||
textArea.focus()
|
||||
EDITOR_ON_FOCUS = true
|
||||
}
|
||||
|
||||
function getContainer (point) {
|
||||
let container
|
||||
if (thisObject.visible === true) {
|
||||
if (point.x === VERY_LARGE_NUMBER) {
|
||||
/* The the mouse leaves the canvas, and event of mouse over with a ridiculous coordinate is triggered so that
|
||||
anyone can react. In our case, the config editor has a text area that is not part of the canvas, so the event is
|
||||
triggered. We compensate recognizing this coordinate and returning our container. */
|
||||
return thisObject.container
|
||||
}
|
||||
|
||||
if (thisObject.container.frame.isThisPointHere(point, true, false) === true) {
|
||||
return thisObject.container
|
||||
} else {
|
||||
return undefined
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function physics () {
|
||||
if (Math.abs(thisObject.currentRadius - thisObject.targetRadius) >= 0.5) {
|
||||
if (thisObject.currentRadius < thisObject.targetRadius) {
|
||||
thisObject.currentRadius = thisObject.currentRadius + 0.5
|
||||
} else {
|
||||
thisObject.currentRadius = thisObject.currentRadius - 0.5
|
||||
}
|
||||
let thisObject = {
|
||||
isVisibleFunction: undefined,
|
||||
visible: false,
|
||||
imagePathOK: undefined,
|
||||
imagePathNOT_OK: undefined,
|
||||
rawRadius: undefined,
|
||||
targetRadius: undefined,
|
||||
currentRadius: undefined,
|
||||
container: undefined,
|
||||
payload: undefined,
|
||||
deactivate: deactivate,
|
||||
activate: activate,
|
||||
physics: physics,
|
||||
drawBackground: drawBackground,
|
||||
drawForeground: drawForeground,
|
||||
getContainer: getContainer,
|
||||
finalize: finalize,
|
||||
initialize: initialize
|
||||
}
|
||||
|
||||
thisObject.container = newContainer()
|
||||
thisObject.container.initialize(MODULE_NAME)
|
||||
thisObject.container.isClickeable = false
|
||||
thisObject.container.isDraggeable = false
|
||||
thisObject.container.detectMouseOver = false
|
||||
thisObject.container.frame.radius = 0
|
||||
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.height = thisObject.container.frame.radius * 1 * SIZE_FACTOR
|
||||
let isMouseOver = false
|
||||
let SIZE_FACTOR = 1
|
||||
|
||||
let textAreaPosition = {
|
||||
x: 0 - thisObject.container.frame.width / 2,
|
||||
y: 0 - thisObject.container.frame.height * 3 / 7 + CURRENT_TOP_MARGIN
|
||||
return thisObject
|
||||
|
||||
function finalize() {
|
||||
thisObject.container.finalize()
|
||||
thisObject.container = undefined
|
||||
thisObject.payload = undefined
|
||||
thisObject.isVisibleFunction = undefined
|
||||
}
|
||||
|
||||
textAreaPosition = thisObject.container.frame.frameThisPoint(textAreaPosition)
|
||||
if (thisObject.visible === true) {
|
||||
let checkPosition = {
|
||||
x: textAreaPosition.x,
|
||||
y: textAreaPosition.y - CURRENT_TOP_MARGIN
|
||||
}
|
||||
if (thisObject.isVisibleFunction(checkPosition) === false) {
|
||||
deactivate()
|
||||
}
|
||||
}
|
||||
if (thisObject.visible === true) {
|
||||
let textAreaDiv = document.getElementById('textAreaDiv')
|
||||
textAreaDiv.style = 'position:fixed; top:' + textAreaPosition.y + 'px; left:' + textAreaPosition.x + 'px; z-index:1; '
|
||||
}
|
||||
}
|
||||
function initialize() {
|
||||
|
||||
function drawBackground () {
|
||||
if (thisObject.visible === true) {
|
||||
let position = {
|
||||
x: 0,
|
||||
y: 0
|
||||
}
|
||||
|
||||
position = thisObject.container.frame.frameThisPoint(position)
|
||||
|
||||
let radius = thisObject.container.frame.radius * SIZE_FACTOR
|
||||
|
||||
if (radius > 0.5) {
|
||||
browserCanvasContext.beginPath()
|
||||
browserCanvasContext.arc(position.x, position.y, radius * 1.3 + 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.closePath()
|
||||
browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK_TURQUOISE + ', ' + 1 + ')'
|
||||
browserCanvasContext.fill()
|
||||
}
|
||||
}
|
||||
}
|
||||
function drawForeground () {
|
||||
let iconPosition = {
|
||||
x: 0,
|
||||
y: thisObject.currentRadius * 1.5
|
||||
}
|
||||
|
||||
iconPosition = thisObject.container.frame.frameThisPoint(iconPosition)
|
||||
function deactivate() {
|
||||
if (thisObject.visible === true) {
|
||||
thisObject.visible = false
|
||||
let textArea = document.getElementById('textArea')
|
||||
textArea.style.display = 'none'
|
||||
thisObject.payload.node.config = textArea.value
|
||||
|
||||
/* Menu Item */
|
||||
try {
|
||||
let config = JSON.parse(thisObject.payload.node.config)
|
||||
} catch (err) {
|
||||
thisObject.payload.uiObject.setErrorMessage(err.message, 10)
|
||||
}
|
||||
}
|
||||
EDITOR_ON_FOCUS = false
|
||||
}
|
||||
|
||||
if (thisObject.canDrawIcon === true && thisObject.currentRadius > 1) {
|
||||
browserCanvasContext.drawImage(thisObject.icon, iconPosition.x - thisObject.currentRadius, iconPosition.y - thisObject.currentRadius, thisObject.currentRadius * 2, thisObject.currentRadius * 2)
|
||||
function activate(payload) {
|
||||
thisObject.visible = true
|
||||
thisObject.payload = payload
|
||||
thisObject.rawRadius = 8
|
||||
thisObject.targetRadius = thisObject.container.frame.radius
|
||||
thisObject.currentRadius = 0
|
||||
thisObject.payload.uiObject.setErrorMessage('', 0)
|
||||
|
||||
/* Menu Label */
|
||||
let textArea = document.getElementById('textArea')
|
||||
textArea.value = payload.node.config
|
||||
textArea.style = 'resize: none;' +
|
||||
' border: none;' +
|
||||
' outline: none;' +
|
||||
'box-shadow: none;' +
|
||||
'overflow:hidden;' +
|
||||
'font-family: ' + UI_FONT.PRIMARY + ';' +
|
||||
'font-size: 14px;' +
|
||||
'background-color: rgb(' + UI_COLOR.DARK_TURQUOISE + ');' +
|
||||
'color:rgb(255, 255, 255);' +
|
||||
'width: ' + thisObject.container.frame.width + 'px;' +
|
||||
'height: ' + thisObject.container.frame.height + 'px'
|
||||
textArea.style.display = 'block'
|
||||
textArea.focus()
|
||||
EDITOR_ON_FOCUS = true
|
||||
}
|
||||
|
||||
let label = 'Code looks good!'
|
||||
let labelPoint
|
||||
let fontSize = 10
|
||||
function getContainer(point) {
|
||||
let container
|
||||
if (thisObject.visible === true) {
|
||||
if (point.x === VERY_LARGE_NUMBER) {
|
||||
/* The the mouse leaves the canvas, and event of mouse over with a ridiculous coordinate is triggered so that
|
||||
anyone can react. In our case, the config editor has a text area that is not part of the canvas, so the event is
|
||||
triggered. We compensate recognizing this coordinate and returning our container. */
|
||||
return thisObject.container
|
||||
}
|
||||
|
||||
browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
|
||||
if (thisObject.container.frame.isThisPointHere(point, true, false) === true) {
|
||||
return thisObject.container
|
||||
} else {
|
||||
return undefined
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (label !== undefined && thisObject.currentRadius >= thisObject.targetRadius) {
|
||||
labelPoint = {
|
||||
x: iconPosition.x + thisObject.currentRadius + 10,
|
||||
y: iconPosition.y + fontSize * FONT_ASPECT_RATIO
|
||||
function physics() {
|
||||
if (Math.abs(thisObject.currentRadius - thisObject.targetRadius) >= 0.5) {
|
||||
if (thisObject.currentRadius < thisObject.targetRadius) {
|
||||
thisObject.currentRadius = thisObject.currentRadius + 0.5
|
||||
} else {
|
||||
thisObject.currentRadius = thisObject.currentRadius - 0.5
|
||||
}
|
||||
}
|
||||
|
||||
browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
|
||||
browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)'
|
||||
browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y)
|
||||
}
|
||||
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.height = thisObject.container.frame.radius * 1 * SIZE_FACTOR
|
||||
|
||||
let textAreaPosition = {
|
||||
x: 0 - thisObject.container.frame.width / 2,
|
||||
y: 0 - thisObject.container.frame.height * 3 / 7 + CURRENT_TOP_MARGIN
|
||||
}
|
||||
|
||||
textAreaPosition = thisObject.container.frame.frameThisPoint(textAreaPosition)
|
||||
if (thisObject.visible === true) {
|
||||
let checkPosition = {
|
||||
x: textAreaPosition.x,
|
||||
y: textAreaPosition.y - CURRENT_TOP_MARGIN
|
||||
}
|
||||
if (thisObject.isVisibleFunction(checkPosition) === false) {
|
||||
deactivate()
|
||||
}
|
||||
}
|
||||
if (thisObject.visible === true) {
|
||||
let textAreaDiv = document.getElementById('textAreaDiv')
|
||||
textAreaDiv.style = 'position:fixed; top:' + textAreaPosition.y + 'px; left:' + textAreaPosition.x + 'px; z-index:1; '
|
||||
}
|
||||
}
|
||||
|
||||
function drawBackground() {
|
||||
if (thisObject.visible === true) {
|
||||
let position = {
|
||||
x: 0,
|
||||
y: 0
|
||||
}
|
||||
|
||||
position = thisObject.container.frame.frameThisPoint(position)
|
||||
|
||||
let radius = thisObject.container.frame.radius * SIZE_FACTOR
|
||||
|
||||
if (radius > 0.5) {
|
||||
browserCanvasContext.beginPath()
|
||||
browserCanvasContext.arc(position.x, position.y, radius * 1.3 + 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.closePath()
|
||||
browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK_TURQUOISE + ', ' + 1 + ')'
|
||||
browserCanvasContext.fill()
|
||||
}
|
||||
}
|
||||
}
|
||||
function drawForeground() {
|
||||
let iconPosition = {
|
||||
x: 0,
|
||||
y: thisObject.currentRadius * 1.5
|
||||
}
|
||||
|
||||
iconPosition = thisObject.container.frame.frameThisPoint(iconPosition)
|
||||
|
||||
/* Menu Item */
|
||||
|
||||
if (thisObject.canDrawIcon === true && thisObject.currentRadius > 1) {
|
||||
browserCanvasContext.drawImage(thisObject.icon, iconPosition.x - thisObject.currentRadius, iconPosition.y - thisObject.currentRadius, thisObject.currentRadius * 2, thisObject.currentRadius * 2)
|
||||
|
||||
/* Menu Label */
|
||||
|
||||
let label = 'Code looks good!'
|
||||
let labelPoint
|
||||
let fontSize = 10
|
||||
|
||||
browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
|
||||
|
||||
if (label !== undefined && thisObject.currentRadius >= thisObject.targetRadius) {
|
||||
labelPoint = {
|
||||
x: iconPosition.x + thisObject.currentRadius + 10,
|
||||
y: iconPosition.y + fontSize * FONT_ASPECT_RATIO
|
||||
}
|
||||
|
||||
browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
|
||||
browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)'
|
||||
browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
+528
-528
File diff suppressed because it is too large.
Load diff
+644
-644
File diff suppressed because it is too large.
Load diff
+177
-177
@@ -1,199 +1,199 @@
|
||||
|
||||
function newFormulaEditor () {
|
||||
const MODULE_NAME = 'Formula Editor'
|
||||
function newFormulaEditor() {
|
||||
const MODULE_NAME = 'Formula Editor'
|
||||
|
||||
let thisObject = {
|
||||
isVisibleFunction: undefined,
|
||||
visible: false,
|
||||
imagePathOK: undefined,
|
||||
imagePathNOT_OK: undefined,
|
||||
rawRadius: undefined,
|
||||
targetRadius: undefined,
|
||||
currentRadius: undefined,
|
||||
container: undefined,
|
||||
payload: undefined,
|
||||
deactivate: deactivate,
|
||||
activate: activate,
|
||||
physics: physics,
|
||||
drawBackground: drawBackground,
|
||||
drawForeground: drawForeground,
|
||||
getContainer: getContainer,
|
||||
finalize: finalize,
|
||||
initialize: initialize
|
||||
}
|
||||
|
||||
thisObject.container = newContainer()
|
||||
thisObject.container.initialize(MODULE_NAME)
|
||||
thisObject.container.isClickeable = false
|
||||
thisObject.container.isDraggeable = false
|
||||
thisObject.container.detectMouseOver = false
|
||||
thisObject.container.frame.radius = 0
|
||||
thisObject.container.frame.position.x = 0
|
||||
thisObject.container.frame.position.y = 0
|
||||
|
||||
let isMouseOver = false
|
||||
let SIZE_FACTOR = 1.2
|
||||
|
||||
return thisObject
|
||||
|
||||
function finalize () {
|
||||
thisObject.container.finalize()
|
||||
thisObject.container = undefined
|
||||
thisObject.payload = undefined
|
||||
thisObject.isVisibleFunction = undefined
|
||||
}
|
||||
|
||||
function initialize () {
|
||||
|
||||
}
|
||||
|
||||
function deactivate () {
|
||||
if (thisObject.visible === true) {
|
||||
thisObject.visible = false
|
||||
let textArea = document.getElementById('textArea')
|
||||
textArea.style.display = 'none'
|
||||
thisObject.payload.node.code = textArea.value
|
||||
}
|
||||
EDITOR_ON_FOCUS = false
|
||||
}
|
||||
|
||||
function activate (payload) {
|
||||
thisObject.visible = true
|
||||
thisObject.payload = payload
|
||||
thisObject.rawRadius = 8
|
||||
thisObject.targetRadius = thisObject.container.frame.radius
|
||||
thisObject.currentRadius = 0
|
||||
thisObject.payload.uiObject.setErrorMessage('', 0)
|
||||
|
||||
let textArea = document.getElementById('textArea')
|
||||
textArea.value = payload.node.code
|
||||
textArea.style = 'resize: none;' +
|
||||
' border: none;' +
|
||||
' outline: none;' +
|
||||
'box-shadow: none;' +
|
||||
'overflow:hidden;' +
|
||||
'font-family: ' + UI_FONT.PRIMARY + ';' +
|
||||
'font-size: 14px;' +
|
||||
'background-color: rgb(' + UI_COLOR.MANGANESE_PURPLE + ');' +
|
||||
'color:rgb(255, 255, 255);' +
|
||||
'width: ' + thisObject.container.frame.width + 'px;' +
|
||||
'height: ' + thisObject.container.frame.height + 'px'
|
||||
textArea.style.display = 'block'
|
||||
textArea.focus()
|
||||
EDITOR_ON_FOCUS = true
|
||||
}
|
||||
|
||||
function getContainer (point) {
|
||||
let container
|
||||
if (thisObject.visible === true) {
|
||||
if (point.x === VERY_LARGE_NUMBER) {
|
||||
/* The the mouse leaves the canvas, and event of mouse over with a ridiculous coordinate is triggered so that
|
||||
anyone can react. In our case, the code editor has a text area that is not part of the canvas, so the event is
|
||||
triggered. We compensate recognizing this coordinate and returning our container. */
|
||||
return thisObject.container
|
||||
}
|
||||
|
||||
if (thisObject.container.frame.isThisPointHere(point, true, false) === true) {
|
||||
return thisObject.container
|
||||
} else {
|
||||
return undefined
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function physics () {
|
||||
if (Math.abs(thisObject.currentRadius - thisObject.targetRadius) >= 0.5) {
|
||||
if (thisObject.currentRadius < thisObject.targetRadius) {
|
||||
thisObject.currentRadius = thisObject.currentRadius + 0.5
|
||||
} else {
|
||||
thisObject.currentRadius = thisObject.currentRadius - 0.5
|
||||
}
|
||||
let thisObject = {
|
||||
isVisibleFunction: undefined,
|
||||
visible: false,
|
||||
imagePathOK: undefined,
|
||||
imagePathNOT_OK: undefined,
|
||||
rawRadius: undefined,
|
||||
targetRadius: undefined,
|
||||
currentRadius: undefined,
|
||||
container: undefined,
|
||||
payload: undefined,
|
||||
deactivate: deactivate,
|
||||
activate: activate,
|
||||
physics: physics,
|
||||
drawBackground: drawBackground,
|
||||
drawForeground: drawForeground,
|
||||
getContainer: getContainer,
|
||||
finalize: finalize,
|
||||
initialize: initialize
|
||||
}
|
||||
|
||||
thisObject.container = newContainer()
|
||||
thisObject.container.initialize(MODULE_NAME)
|
||||
thisObject.container.isClickeable = false
|
||||
thisObject.container.isDraggeable = false
|
||||
thisObject.container.detectMouseOver = false
|
||||
thisObject.container.frame.radius = 0
|
||||
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.height = thisObject.container.frame.radius * 1 * SIZE_FACTOR
|
||||
let isMouseOver = false
|
||||
let SIZE_FACTOR = 1.2
|
||||
|
||||
let textAreaPosition = {
|
||||
x: 0 - thisObject.container.frame.width / 2,
|
||||
y: 0 - thisObject.container.frame.height * 3 / 7 + CURRENT_TOP_MARGIN
|
||||
return thisObject
|
||||
|
||||
function finalize() {
|
||||
thisObject.container.finalize()
|
||||
thisObject.container = undefined
|
||||
thisObject.payload = undefined
|
||||
thisObject.isVisibleFunction = undefined
|
||||
}
|
||||
|
||||
textAreaPosition = thisObject.container.frame.frameThisPoint(textAreaPosition)
|
||||
if (thisObject.visible === true) {
|
||||
let checkPosition = {
|
||||
x: textAreaPosition.x,
|
||||
y: textAreaPosition.y - CURRENT_TOP_MARGIN
|
||||
}
|
||||
if (thisObject.isVisibleFunction(checkPosition) === false) {
|
||||
deactivate()
|
||||
}
|
||||
}
|
||||
if (thisObject.visible === true) {
|
||||
let textAreaDiv = document.getElementById('textAreaDiv')
|
||||
textAreaDiv.style = 'position:fixed; top:' + textAreaPosition.y + 'px; left:' + textAreaPosition.x + 'px; z-index:1; '
|
||||
}
|
||||
}
|
||||
function initialize() {
|
||||
|
||||
function drawBackground () {
|
||||
if (thisObject.visible === true) {
|
||||
let position = {
|
||||
x: 0,
|
||||
y: 0
|
||||
}
|
||||
|
||||
position = thisObject.container.frame.frameThisPoint(position)
|
||||
|
||||
let radius = thisObject.container.frame.radius * SIZE_FACTOR
|
||||
|
||||
if (radius > 0.5) {
|
||||
browserCanvasContext.beginPath()
|
||||
browserCanvasContext.arc(position.x, position.y, radius * 1.3 + 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.closePath()
|
||||
browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.MANGANESE_PURPLE + ', ' + 1 + ')'
|
||||
browserCanvasContext.fill()
|
||||
}
|
||||
}
|
||||
}
|
||||
function drawForeground () {
|
||||
let iconPosition = {
|
||||
x: 0,
|
||||
y: thisObject.currentRadius * 1.5
|
||||
}
|
||||
|
||||
iconPosition = thisObject.container.frame.frameThisPoint(iconPosition)
|
||||
function deactivate() {
|
||||
if (thisObject.visible === true) {
|
||||
thisObject.visible = false
|
||||
let textArea = document.getElementById('textArea')
|
||||
textArea.style.display = 'none'
|
||||
thisObject.payload.node.code = textArea.value
|
||||
}
|
||||
EDITOR_ON_FOCUS = false
|
||||
}
|
||||
|
||||
/* Menu Item */
|
||||
function activate(payload) {
|
||||
thisObject.visible = true
|
||||
thisObject.payload = payload
|
||||
thisObject.rawRadius = 8
|
||||
thisObject.targetRadius = thisObject.container.frame.radius
|
||||
thisObject.currentRadius = 0
|
||||
thisObject.payload.uiObject.setErrorMessage('', 0)
|
||||
|
||||
if (thisObject.canDrawIcon === true && thisObject.currentRadius > 1) {
|
||||
browserCanvasContext.drawImage(thisObject.icon, iconPosition.x - thisObject.currentRadius, iconPosition.y - thisObject.currentRadius, thisObject.currentRadius * 2, thisObject.currentRadius * 2)
|
||||
let textArea = document.getElementById('textArea')
|
||||
textArea.value = payload.node.code
|
||||
textArea.style = 'resize: none;' +
|
||||
' border: none;' +
|
||||
' outline: none;' +
|
||||
'box-shadow: none;' +
|
||||
'overflow:hidden;' +
|
||||
'font-family: ' + UI_FONT.PRIMARY + ';' +
|
||||
'font-size: 14px;' +
|
||||
'background-color: rgb(' + UI_COLOR.MANGANESE_PURPLE + ');' +
|
||||
'color:rgb(255, 255, 255);' +
|
||||
'width: ' + thisObject.container.frame.width + 'px;' +
|
||||
'height: ' + thisObject.container.frame.height + 'px'
|
||||
textArea.style.display = 'block'
|
||||
textArea.focus()
|
||||
EDITOR_ON_FOCUS = true
|
||||
}
|
||||
|
||||
/* Menu Label */
|
||||
function getContainer(point) {
|
||||
let container
|
||||
if (thisObject.visible === true) {
|
||||
if (point.x === VERY_LARGE_NUMBER) {
|
||||
/* The the mouse leaves the canvas, and event of mouse over with a ridiculous coordinate is triggered so that
|
||||
anyone can react. In our case, the code editor has a text area that is not part of the canvas, so the event is
|
||||
triggered. We compensate recognizing this coordinate and returning our container. */
|
||||
return thisObject.container
|
||||
}
|
||||
|
||||
let label = 'Code looks good!'
|
||||
let labelPoint
|
||||
let fontSize = 10
|
||||
if (thisObject.container.frame.isThisPointHere(point, true, false) === true) {
|
||||
return thisObject.container
|
||||
} else {
|
||||
return undefined
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
|
||||
|
||||
if (label !== undefined && thisObject.currentRadius >= thisObject.targetRadius) {
|
||||
labelPoint = {
|
||||
x: iconPosition.x + thisObject.currentRadius + 10,
|
||||
y: iconPosition.y + fontSize * FONT_ASPECT_RATIO
|
||||
function physics() {
|
||||
if (Math.abs(thisObject.currentRadius - thisObject.targetRadius) >= 0.5) {
|
||||
if (thisObject.currentRadius < thisObject.targetRadius) {
|
||||
thisObject.currentRadius = thisObject.currentRadius + 0.5
|
||||
} else {
|
||||
thisObject.currentRadius = thisObject.currentRadius - 0.5
|
||||
}
|
||||
}
|
||||
|
||||
browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
|
||||
browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)'
|
||||
browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y)
|
||||
}
|
||||
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.height = thisObject.container.frame.radius * 1 * SIZE_FACTOR
|
||||
|
||||
let textAreaPosition = {
|
||||
x: 0 - thisObject.container.frame.width / 2,
|
||||
y: 0 - thisObject.container.frame.height * 3 / 7 + CURRENT_TOP_MARGIN
|
||||
}
|
||||
|
||||
textAreaPosition = thisObject.container.frame.frameThisPoint(textAreaPosition)
|
||||
if (thisObject.visible === true) {
|
||||
let checkPosition = {
|
||||
x: textAreaPosition.x,
|
||||
y: textAreaPosition.y - CURRENT_TOP_MARGIN
|
||||
}
|
||||
if (thisObject.isVisibleFunction(checkPosition) === false) {
|
||||
deactivate()
|
||||
}
|
||||
}
|
||||
if (thisObject.visible === true) {
|
||||
let textAreaDiv = document.getElementById('textAreaDiv')
|
||||
textAreaDiv.style = 'position:fixed; top:' + textAreaPosition.y + 'px; left:' + textAreaPosition.x + 'px; z-index:1; '
|
||||
}
|
||||
}
|
||||
|
||||
function drawBackground() {
|
||||
if (thisObject.visible === true) {
|
||||
let position = {
|
||||
x: 0,
|
||||
y: 0
|
||||
}
|
||||
|
||||
position = thisObject.container.frame.frameThisPoint(position)
|
||||
|
||||
let radius = thisObject.container.frame.radius * SIZE_FACTOR
|
||||
|
||||
if (radius > 0.5) {
|
||||
browserCanvasContext.beginPath()
|
||||
browserCanvasContext.arc(position.x, position.y, radius * 1.3 + 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.closePath()
|
||||
browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.MANGANESE_PURPLE + ', ' + 1 + ')'
|
||||
browserCanvasContext.fill()
|
||||
}
|
||||
}
|
||||
}
|
||||
function drawForeground() {
|
||||
let iconPosition = {
|
||||
x: 0,
|
||||
y: thisObject.currentRadius * 1.5
|
||||
}
|
||||
|
||||
iconPosition = thisObject.container.frame.frameThisPoint(iconPosition)
|
||||
|
||||
/* Menu Item */
|
||||
|
||||
if (thisObject.canDrawIcon === true && thisObject.currentRadius > 1) {
|
||||
browserCanvasContext.drawImage(thisObject.icon, iconPosition.x - thisObject.currentRadius, iconPosition.y - thisObject.currentRadius, thisObject.currentRadius * 2, thisObject.currentRadius * 2)
|
||||
|
||||
/* Menu Label */
|
||||
|
||||
let label = 'Code looks good!'
|
||||
let labelPoint
|
||||
let fontSize = 10
|
||||
|
||||
browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
|
||||
|
||||
if (label !== undefined && thisObject.currentRadius >= thisObject.targetRadius) {
|
||||
labelPoint = {
|
||||
x: iconPosition.x + thisObject.currentRadius + 10,
|
||||
y: iconPosition.y + fontSize * FONT_ASPECT_RATIO
|
||||
}
|
||||
|
||||
browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
|
||||
browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)'
|
||||
browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
+204
-204
@@ -1,220 +1,220 @@
|
||||
|
||||
function newPicker () {
|
||||
const MODULE_NAME = 'Picker'
|
||||
function newPicker() {
|
||||
const MODULE_NAME = 'Picker'
|
||||
|
||||
let thisObject = {
|
||||
container: undefined,
|
||||
selectedItem: 0,
|
||||
onParentChanged: onParentChanged,
|
||||
getSelected: getSelected,
|
||||
setSelected: setSelected,
|
||||
physics: physics,
|
||||
drawBackground: drawBackground,
|
||||
drawForeground: drawForeground,
|
||||
getContainer: getContainer,
|
||||
finalize: finalize,
|
||||
initialize: initialize
|
||||
}
|
||||
|
||||
thisObject.container = newContainer()
|
||||
thisObject.container.initialize(MODULE_NAME)
|
||||
thisObject.container.isClickeable = false
|
||||
thisObject.container.isDraggeable = false
|
||||
thisObject.container.isWheelable = true
|
||||
thisObject.container.detectMouseOver = true
|
||||
thisObject.container.frame.radius = 0
|
||||
thisObject.container.frame.position.x = 0
|
||||
thisObject.container.frame.position.y = 0
|
||||
thisObject.container.frame.width = 150
|
||||
thisObject.container.frame.height = 60
|
||||
|
||||
let isMouseOver
|
||||
let optionsList
|
||||
let parent
|
||||
let current
|
||||
let parentSelected = 0
|
||||
let propertyName
|
||||
let selected = 0
|
||||
let lastSelected = 0
|
||||
let onMouseWheelEventSubscriptionId
|
||||
let onMouseOverEventSubscriptionId
|
||||
let onMouseNotOverEventSubscriptionId
|
||||
|
||||
return thisObject
|
||||
|
||||
function finalize () {
|
||||
thisObject.container.eventHandler.stopListening(onMouseWheelEventSubscriptionId)
|
||||
thisObject.container.eventHandler.stopListening(onMouseOverEventSubscriptionId)
|
||||
thisObject.container.eventHandler.stopListening(onMouseNotOverEventSubscriptionId)
|
||||
thisObject.container.finalize()
|
||||
thisObject.container = undefined
|
||||
optionsList = undefined
|
||||
parent = undefined
|
||||
current = undefined
|
||||
}
|
||||
|
||||
function initialize (pOptionsList, pCurrent, pParent, pPropertyName) {
|
||||
optionsList = pOptionsList
|
||||
current = pCurrent
|
||||
parent = pParent
|
||||
propertyName = pPropertyName
|
||||
onMouseWheelEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseWheel', onMouseWheel)
|
||||
onMouseOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver)
|
||||
onMouseNotOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver)
|
||||
}
|
||||
|
||||
function onMouseOver (event) {
|
||||
isMouseOver = true
|
||||
}
|
||||
|
||||
function onMouseNotOver () {
|
||||
isMouseOver = false
|
||||
}
|
||||
|
||||
function getSelected () {
|
||||
return optionsList[selected]
|
||||
}
|
||||
|
||||
function setSelected (pOptionsList, pCurrent, pParent, pSelected) {
|
||||
if (pOptionsList !== undefined) {
|
||||
optionsList = pOptionsList
|
||||
}
|
||||
if (pCurrent !== undefined) {
|
||||
current = pCurrent
|
||||
}
|
||||
if (pParent !== undefined) {
|
||||
parent = pParent
|
||||
}
|
||||
if (pSelected !== undefined) {
|
||||
selected = pSelected
|
||||
}
|
||||
raiseEventParentChanged()
|
||||
}
|
||||
|
||||
function onParentChanged (event) {
|
||||
if (event.parent !== undefined) {
|
||||
parent = event.parent
|
||||
}
|
||||
parentSelected = event.selected
|
||||
|
||||
selected = 0
|
||||
let parentKeys
|
||||
|
||||
parentKeys = Object.keys(parent)
|
||||
checkPropertyName()
|
||||
|
||||
function checkPropertyName () {
|
||||
if (propertyName === undefined) {
|
||||
current = parent[parentKeys[parentSelected]]
|
||||
checkArray()
|
||||
} else {
|
||||
current = parent[parentKeys[parentSelected]]
|
||||
current = current[propertyName]
|
||||
checkArray()
|
||||
}
|
||||
let thisObject = {
|
||||
container: undefined,
|
||||
selectedItem: 0,
|
||||
onParentChanged: onParentChanged,
|
||||
getSelected: getSelected,
|
||||
setSelected: setSelected,
|
||||
physics: physics,
|
||||
drawBackground: drawBackground,
|
||||
drawForeground: drawForeground,
|
||||
getContainer: getContainer,
|
||||
finalize: finalize,
|
||||
initialize: initialize
|
||||
}
|
||||
|
||||
function checkArray () {
|
||||
if (Array.isArray(current) === false) {
|
||||
optionsList = Object.keys(current)
|
||||
} else {
|
||||
optionsList = current
|
||||
}
|
||||
thisObject.container = newContainer()
|
||||
thisObject.container.initialize(MODULE_NAME)
|
||||
thisObject.container.isClickeable = false
|
||||
thisObject.container.isDraggeable = false
|
||||
thisObject.container.isWheelable = true
|
||||
thisObject.container.detectMouseOver = true
|
||||
thisObject.container.frame.radius = 0
|
||||
thisObject.container.frame.position.x = 0
|
||||
thisObject.container.frame.position.y = 0
|
||||
thisObject.container.frame.width = 150
|
||||
thisObject.container.frame.height = 60
|
||||
|
||||
let isMouseOver
|
||||
let optionsList
|
||||
let parent
|
||||
let current
|
||||
let parentSelected = 0
|
||||
let propertyName
|
||||
let selected = 0
|
||||
let lastSelected = 0
|
||||
let onMouseWheelEventSubscriptionId
|
||||
let onMouseOverEventSubscriptionId
|
||||
let onMouseNotOverEventSubscriptionId
|
||||
|
||||
return thisObject
|
||||
|
||||
function finalize() {
|
||||
thisObject.container.eventHandler.stopListening(onMouseWheelEventSubscriptionId)
|
||||
thisObject.container.eventHandler.stopListening(onMouseOverEventSubscriptionId)
|
||||
thisObject.container.eventHandler.stopListening(onMouseNotOverEventSubscriptionId)
|
||||
thisObject.container.finalize()
|
||||
thisObject.container = undefined
|
||||
optionsList = undefined
|
||||
parent = undefined
|
||||
current = undefined
|
||||
}
|
||||
|
||||
raiseEventParentChanged()
|
||||
}
|
||||
|
||||
function getContainer (point) {
|
||||
let container
|
||||
|
||||
if (thisObject.container.frame.isThisPointHere(point, true, false) === true) {
|
||||
return thisObject.container
|
||||
}
|
||||
}
|
||||
|
||||
function getSelected () {
|
||||
return optionsList[selected]
|
||||
}
|
||||
|
||||
function onMouseWheel () {
|
||||
delta = event.wheelDelta
|
||||
if (delta > 0) {
|
||||
delta = -1
|
||||
} else {
|
||||
delta = 1
|
||||
function initialize(pOptionsList, pCurrent, pParent, pPropertyName) {
|
||||
optionsList = pOptionsList
|
||||
current = pCurrent
|
||||
parent = pParent
|
||||
propertyName = pPropertyName
|
||||
onMouseWheelEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseWheel', onMouseWheel)
|
||||
onMouseOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver)
|
||||
onMouseNotOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver)
|
||||
}
|
||||
|
||||
selected = selected + delta
|
||||
if (selected < 0) { selected = 0 }
|
||||
if (selected > optionsList.length - 1) {
|
||||
selected = optionsList.length - 1
|
||||
function onMouseOver(event) {
|
||||
isMouseOver = true
|
||||
}
|
||||
|
||||
if (selected !== lastSelected) {
|
||||
lastSelected = selected
|
||||
raiseEventParentChanged()
|
||||
function onMouseNotOver() {
|
||||
isMouseOver = false
|
||||
}
|
||||
}
|
||||
|
||||
function raiseEventParentChanged () {
|
||||
let event = {
|
||||
selected: selected,
|
||||
parent: current,
|
||||
propertyName: propertyName
|
||||
function getSelected() {
|
||||
return optionsList[selected]
|
||||
}
|
||||
thisObject.container.eventHandler.raiseEvent('onParentChanged', event)
|
||||
}
|
||||
|
||||
function physics () {
|
||||
|
||||
}
|
||||
|
||||
function drawBackground () {
|
||||
|
||||
}
|
||||
|
||||
function drawForeground () {
|
||||
const FONT_SIZE = 15
|
||||
const VISIBLE_LABELS = 5
|
||||
let fontSize
|
||||
let fontColor
|
||||
let opacity
|
||||
|
||||
for (let i = 0; i < VISIBLE_LABELS; i++) {
|
||||
let index = i - 2 + selected
|
||||
let label = ''
|
||||
if (index >= 0 && index < optionsList.length) {
|
||||
label = optionsList[index]
|
||||
}
|
||||
fontColor = UI_COLOR.LIGHT_GREY
|
||||
switch (i) {
|
||||
case 0:
|
||||
fontSize = FONT_SIZE - 5
|
||||
opacity = 0.4
|
||||
break
|
||||
case 1:
|
||||
fontSize = FONT_SIZE - 3
|
||||
opacity = 0.5
|
||||
break
|
||||
case 2:
|
||||
fontSize = FONT_SIZE - 0
|
||||
fontColor = UI_COLOR.BLACK
|
||||
opacity = 1
|
||||
break
|
||||
case 3:
|
||||
fontSize = FONT_SIZE - 3
|
||||
opacity = 0.5
|
||||
break
|
||||
case 4:
|
||||
fontSize = FONT_SIZE - 5
|
||||
opacity = 0.4
|
||||
break
|
||||
}
|
||||
|
||||
if (i === 2 || isMouseOver === true) {
|
||||
drawLabel(label, 1 / 2, i / VISIBLE_LABELS, 0, 0, fontSize, thisObject.container, fontColor, undefined, undefined, opacity)
|
||||
}
|
||||
function setSelected(pOptionsList, pCurrent, pParent, pSelected) {
|
||||
if (pOptionsList !== undefined) {
|
||||
optionsList = pOptionsList
|
||||
}
|
||||
if (pCurrent !== undefined) {
|
||||
current = pCurrent
|
||||
}
|
||||
if (pParent !== undefined) {
|
||||
parent = pParent
|
||||
}
|
||||
if (pSelected !== undefined) {
|
||||
selected = pSelected
|
||||
}
|
||||
raiseEventParentChanged()
|
||||
}
|
||||
|
||||
function onParentChanged(event) {
|
||||
if (event.parent !== undefined) {
|
||||
parent = event.parent
|
||||
}
|
||||
parentSelected = event.selected
|
||||
|
||||
selected = 0
|
||||
let parentKeys
|
||||
|
||||
parentKeys = Object.keys(parent)
|
||||
checkPropertyName()
|
||||
|
||||
function checkPropertyName() {
|
||||
if (propertyName === undefined) {
|
||||
current = parent[parentKeys[parentSelected]]
|
||||
checkArray()
|
||||
} else {
|
||||
current = parent[parentKeys[parentSelected]]
|
||||
current = current[propertyName]
|
||||
checkArray()
|
||||
}
|
||||
}
|
||||
|
||||
function checkArray() {
|
||||
if (Array.isArray(current) === false) {
|
||||
optionsList = Object.keys(current)
|
||||
} else {
|
||||
optionsList = current
|
||||
}
|
||||
}
|
||||
|
||||
raiseEventParentChanged()
|
||||
}
|
||||
|
||||
function getContainer(point) {
|
||||
let container
|
||||
|
||||
if (thisObject.container.frame.isThisPointHere(point, true, false) === true) {
|
||||
return thisObject.container
|
||||
}
|
||||
}
|
||||
|
||||
function getSelected() {
|
||||
return optionsList[selected]
|
||||
}
|
||||
|
||||
function onMouseWheel() {
|
||||
delta = event.wheelDelta
|
||||
if (delta > 0) {
|
||||
delta = -1
|
||||
} else {
|
||||
delta = 1
|
||||
}
|
||||
|
||||
selected = selected + delta
|
||||
if (selected < 0) { selected = 0 }
|
||||
if (selected > optionsList.length - 1) {
|
||||
selected = optionsList.length - 1
|
||||
}
|
||||
|
||||
if (selected !== lastSelected) {
|
||||
lastSelected = selected
|
||||
raiseEventParentChanged()
|
||||
}
|
||||
}
|
||||
|
||||
function raiseEventParentChanged() {
|
||||
let event = {
|
||||
selected: selected,
|
||||
parent: current,
|
||||
propertyName: propertyName
|
||||
}
|
||||
thisObject.container.eventHandler.raiseEvent('onParentChanged', event)
|
||||
}
|
||||
|
||||
function physics() {
|
||||
|
||||
}
|
||||
|
||||
function drawBackground() {
|
||||
|
||||
}
|
||||
|
||||
function drawForeground() {
|
||||
const FONT_SIZE = 15
|
||||
const VISIBLE_LABELS = 5
|
||||
let fontSize
|
||||
let fontColor
|
||||
let opacity
|
||||
|
||||
for (let i = 0; i < VISIBLE_LABELS; i++) {
|
||||
let index = i - 2 + selected
|
||||
let label = ''
|
||||
if (index >= 0 && index < optionsList.length) {
|
||||
label = optionsList[index]
|
||||
}
|
||||
fontColor = UI_COLOR.LIGHT_GREY
|
||||
switch (i) {
|
||||
case 0:
|
||||
fontSize = FONT_SIZE - 5
|
||||
opacity = 0.4
|
||||
break
|
||||
case 1:
|
||||
fontSize = FONT_SIZE - 3
|
||||
opacity = 0.5
|
||||
break
|
||||
case 2:
|
||||
fontSize = FONT_SIZE - 0
|
||||
fontColor = UI_COLOR.BLACK
|
||||
opacity = 1
|
||||
break
|
||||
case 3:
|
||||
fontSize = FONT_SIZE - 3
|
||||
opacity = 0.5
|
||||
break
|
||||
case 4:
|
||||
fontSize = FONT_SIZE - 5
|
||||
opacity = 0.4
|
||||
break
|
||||
}
|
||||
|
||||
if (i === 2 || isMouseOver === true) {
|
||||
drawLabel(label, 1 / 2, i / VISIBLE_LABELS, 0, 0, fontSize, thisObject.container, fontColor, undefined, undefined, opacity)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
+1819
-1819
File diff suppressed because it is too large.
Load diff
File diff suppressed because it is too large.
Load diff
+321
-321
@@ -1,358 +1,358 @@
|
||||
|
||||
function newUiObjectTitle () {
|
||||
const MODULE_NAME = 'UI Object Title'
|
||||
const ERROR_LOG = true
|
||||
function newUiObjectTitle() {
|
||||
const MODULE_NAME = 'UI Object Title'
|
||||
const ERROR_LOG = true
|
||||
|
||||
const logger = newWebDebugLog()
|
||||
logger.fileName = MODULE_NAME
|
||||
const logger = newWebDebugLog()
|
||||
logger.fileName = MODULE_NAME
|
||||
|
||||
let thisObject = {
|
||||
fitFunction: undefined,
|
||||
isVisibleFunction: undefined,
|
||||
allwaysVisible: undefined,
|
||||
editMode: undefined,
|
||||
container: undefined,
|
||||
payload: undefined,
|
||||
isDefault: undefined,
|
||||
enterEditMode: enterEditMode,
|
||||
exitEditMode: exitEditMode,
|
||||
physics: physics,
|
||||
draw: draw,
|
||||
getContainer: getContainer,
|
||||
finalize: finalize,
|
||||
initialize: initialize
|
||||
}
|
||||
|
||||
thisObject.container = newContainer()
|
||||
thisObject.container.initialize(MODULE_NAME)
|
||||
thisObject.container.isClickeable = true
|
||||
thisObject.container.isDraggeable = false
|
||||
thisObject.container.frame.radius = 0
|
||||
|
||||
let selfFocusEventSubscriptionId
|
||||
let selfNotFocuskEventSubscriptionId
|
||||
let selfMouseClickEventSubscriptionId
|
||||
|
||||
return thisObject
|
||||
|
||||
function finalize () {
|
||||
thisObject.container.eventHandler.stopListening(selfFocusEventSubscriptionId)
|
||||
thisObject.container.eventHandler.stopListening(selfNotFocuskEventSubscriptionId)
|
||||
thisObject.container.eventHandler.stopListening(selfMouseClickEventSubscriptionId)
|
||||
|
||||
thisObject.container.finalize()
|
||||
thisObject.container = undefined
|
||||
thisObject.payload = undefined
|
||||
thisObject.isVisibleFunction = undefined
|
||||
thisObject.fitFunction = undefined
|
||||
}
|
||||
|
||||
function initialize (payload) {
|
||||
thisObject.payload = payload
|
||||
|
||||
thisObject.allwaysVisible = false // Default value
|
||||
let nodeDefinition = getNodeDefinition(thisObject.payload.node)
|
||||
if (nodeDefinition !== undefined) {
|
||||
if (nodeDefinition.isTitleAllwaysVisible === true) {
|
||||
thisObject.allwaysVisible = true
|
||||
}
|
||||
let thisObject = {
|
||||
fitFunction: undefined,
|
||||
isVisibleFunction: undefined,
|
||||
allwaysVisible: undefined,
|
||||
editMode: undefined,
|
||||
container: undefined,
|
||||
payload: undefined,
|
||||
isDefault: undefined,
|
||||
enterEditMode: enterEditMode,
|
||||
exitEditMode: exitEditMode,
|
||||
physics: physics,
|
||||
draw: draw,
|
||||
getContainer: getContainer,
|
||||
finalize: finalize,
|
||||
initialize: initialize
|
||||
}
|
||||
|
||||
selfFocusEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onFocus', onFocus)
|
||||
selfNotFocuskEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onNotFocus', onNotFocus)
|
||||
selfMouseClickEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick)
|
||||
}
|
||||
thisObject.container = newContainer()
|
||||
thisObject.container.initialize(MODULE_NAME)
|
||||
thisObject.container.isClickeable = true
|
||||
thisObject.container.isDraggeable = false
|
||||
thisObject.container.frame.radius = 0
|
||||
|
||||
function getContainer (point) {
|
||||
if (AT_FULL_SCREEN_MODE === true) { return } // Fullscreen mode does not allow INPUT elements
|
||||
let selfFocusEventSubscriptionId
|
||||
let selfNotFocuskEventSubscriptionId
|
||||
let selfMouseClickEventSubscriptionId
|
||||
|
||||
let container
|
||||
return thisObject
|
||||
|
||||
if (thisObject.editMode === true) {
|
||||
if (point.x === VERY_LARGE_NUMBER) {
|
||||
/* The the mouse leaves the canvas, and event of mouse over with a ridiculous coordinate is triggered so that
|
||||
anyone can react. In our case, this object has an html input element that is not part of the canvas, so the event is
|
||||
triggered. We compensate recognizing this coordinate and returning our container. */
|
||||
return thisObject.container
|
||||
}
|
||||
function finalize() {
|
||||
thisObject.container.eventHandler.stopListening(selfFocusEventSubscriptionId)
|
||||
thisObject.container.eventHandler.stopListening(selfNotFocuskEventSubscriptionId)
|
||||
thisObject.container.eventHandler.stopListening(selfMouseClickEventSubscriptionId)
|
||||
|
||||
thisObject.container.finalize()
|
||||
thisObject.container = undefined
|
||||
thisObject.payload = undefined
|
||||
thisObject.isVisibleFunction = undefined
|
||||
thisObject.fitFunction = undefined
|
||||
}
|
||||
if (thisObject.container.frame.isThisPointHere(point, true) === true) {
|
||||
return thisObject.container
|
||||
} else {
|
||||
return undefined
|
||||
}
|
||||
}
|
||||
|
||||
function physics () {
|
||||
inheritancePhysics()
|
||||
defaultPhysics()
|
||||
}
|
||||
function initialize(payload) {
|
||||
thisObject.payload = payload
|
||||
|
||||
function defaultPhysics () {
|
||||
if (thisObject.payload.title !== 'New ' + thisObject.payload.node.type && thisObject.payload.title !== 'My ' + thisObject.payload.node.type) {
|
||||
thisObject.isDefault = false
|
||||
} else {
|
||||
thisObject.isDefault = true
|
||||
}
|
||||
}
|
||||
|
||||
function inheritancePhysics () {
|
||||
if (thisObject.payload.title === undefined) { return }
|
||||
|
||||
/* It is possible to override the default title by setting the APP SCHEMA property 'title' */
|
||||
let nodeDefinition = getNodeDefinition(thisObject.payload.node)
|
||||
if (nodeDefinition.title !== undefined) {
|
||||
thisObject.payload.title = ''
|
||||
thisObject.payload.node.name = ''
|
||||
let separator = ''
|
||||
for (let i = 0; i < nodeDefinition.title.length; i++) {
|
||||
let titleReference = nodeDefinition.title[i]
|
||||
switch (titleReference) {
|
||||
case 'Use Reference Parent': {
|
||||
let nodeToUse = thisObject.payload.node.payload.referenceParent
|
||||
if (nodeToUse !== undefined && nodeToUse.payload !== undefined) {
|
||||
thisObject.payload.title = thisObject.payload.title + separator + nodeToUse.payload.title
|
||||
thisObject.payload.node.name = thisObject.payload.node.name + separator + nodeToUse.payload.node.name
|
||||
thisObject.allwaysVisible = false // Default value
|
||||
let nodeDefinition = getNodeDefinition(thisObject.payload.node)
|
||||
if (nodeDefinition !== undefined) {
|
||||
if (nodeDefinition.isTitleAllwaysVisible === true) {
|
||||
thisObject.allwaysVisible = true
|
||||
}
|
||||
break
|
||||
}
|
||||
case 'Use Reference Grandparent': {
|
||||
let nodeToUse = thisObject.payload.node.payload.referenceParent
|
||||
if (nodeToUse !== undefined && nodeToUse.payload !== undefined) {
|
||||
nodeToUse = thisObject.payload.node.payload.referenceParent.payload.referenceParent
|
||||
if (nodeToUse !== undefined) {
|
||||
thisObject.payload.title = thisObject.payload.title + separator + nodeToUse.payload.title
|
||||
thisObject.payload.node.name = thisObject.payload.node.name + separator + nodeToUse.payload.node.name
|
||||
}
|
||||
}
|
||||
|
||||
selfFocusEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onFocus', onFocus)
|
||||
selfNotFocuskEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onNotFocus', onNotFocus)
|
||||
selfMouseClickEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick)
|
||||
}
|
||||
|
||||
function getContainer(point) {
|
||||
if (AT_FULL_SCREEN_MODE === true) { return } // Fullscreen mode does not allow INPUT elements
|
||||
|
||||
let container
|
||||
|
||||
if (thisObject.editMode === true) {
|
||||
if (point.x === VERY_LARGE_NUMBER) {
|
||||
/* The the mouse leaves the canvas, and event of mouse over with a ridiculous coordinate is triggered so that
|
||||
anyone can react. In our case, this object has an html input element that is not part of the canvas, so the event is
|
||||
triggered. We compensate recognizing this coordinate and returning our container. */
|
||||
return thisObject.container
|
||||
}
|
||||
break
|
||||
}
|
||||
case 'Use Reference Parent Parent': {
|
||||
let nodeToUse = thisObject.payload.node.payload.referenceParent
|
||||
if (nodeToUse !== undefined && nodeToUse.payload !== undefined) {
|
||||
nodeToUse = thisObject.payload.node.payload.referenceParent.payload.parentNode
|
||||
if (nodeToUse !== undefined && nodeToUse.payload !== undefined) {
|
||||
thisObject.payload.title = thisObject.payload.title + separator + nodeToUse.payload.title
|
||||
thisObject.payload.node.name = thisObject.payload.node.name + separator + nodeToUse.payload.node.name
|
||||
}
|
||||
}
|
||||
break
|
||||
}
|
||||
case 'Use Reference Parent Parent Parent': {
|
||||
let nodeToUse = thisObject.payload.node.payload.referenceParent
|
||||
if (nodeToUse !== undefined && nodeToUse.payload !== undefined) {
|
||||
nodeToUse = thisObject.payload.node.payload.referenceParent.payload.parentNode
|
||||
if (nodeToUse !== undefined && nodeToUse.payload !== undefined) {
|
||||
nodeToUse = thisObject.payload.node.payload.referenceParent.payload.parentNode.payload.parentNode
|
||||
if (nodeToUse !== undefined && nodeToUse.payload !== undefined) {
|
||||
thisObject.payload.title = thisObject.payload.title + separator + nodeToUse.payload.title
|
||||
thisObject.payload.node.name = thisObject.payload.node.name + separator + nodeToUse.payload.node.name
|
||||
}
|
||||
if (thisObject.container.frame.isThisPointHere(point, true) === true) {
|
||||
return thisObject.container
|
||||
} else {
|
||||
return undefined
|
||||
}
|
||||
}
|
||||
|
||||
function physics() {
|
||||
inheritancePhysics()
|
||||
defaultPhysics()
|
||||
}
|
||||
|
||||
function defaultPhysics() {
|
||||
if (thisObject.payload.title !== 'New ' + thisObject.payload.node.type && thisObject.payload.title !== 'My ' + thisObject.payload.node.type) {
|
||||
thisObject.isDefault = false
|
||||
} else {
|
||||
thisObject.isDefault = true
|
||||
}
|
||||
}
|
||||
|
||||
function inheritancePhysics() {
|
||||
if (thisObject.payload.title === undefined) { return }
|
||||
|
||||
/* It is possible to override the default title by setting the APP SCHEMA property 'title' */
|
||||
let nodeDefinition = getNodeDefinition(thisObject.payload.node)
|
||||
if (nodeDefinition.title !== undefined) {
|
||||
thisObject.payload.title = ''
|
||||
thisObject.payload.node.name = ''
|
||||
let separator = ''
|
||||
for (let i = 0; i < nodeDefinition.title.length; i++) {
|
||||
let titleReference = nodeDefinition.title[i]
|
||||
switch (titleReference) {
|
||||
case 'Use Reference Parent': {
|
||||
let nodeToUse = thisObject.payload.node.payload.referenceParent
|
||||
if (nodeToUse !== undefined && nodeToUse.payload !== undefined) {
|
||||
thisObject.payload.title = thisObject.payload.title + separator + nodeToUse.payload.title
|
||||
thisObject.payload.node.name = thisObject.payload.node.name + separator + nodeToUse.payload.node.name
|
||||
}
|
||||
break
|
||||
}
|
||||
case 'Use Reference Grandparent': {
|
||||
let nodeToUse = thisObject.payload.node.payload.referenceParent
|
||||
if (nodeToUse !== undefined && nodeToUse.payload !== undefined) {
|
||||
nodeToUse = thisObject.payload.node.payload.referenceParent.payload.referenceParent
|
||||
if (nodeToUse !== undefined) {
|
||||
thisObject.payload.title = thisObject.payload.title + separator + nodeToUse.payload.title
|
||||
thisObject.payload.node.name = thisObject.payload.node.name + separator + nodeToUse.payload.node.name
|
||||
}
|
||||
}
|
||||
break
|
||||
}
|
||||
case 'Use Reference Parent Parent': {
|
||||
let nodeToUse = thisObject.payload.node.payload.referenceParent
|
||||
if (nodeToUse !== undefined && nodeToUse.payload !== undefined) {
|
||||
nodeToUse = thisObject.payload.node.payload.referenceParent.payload.parentNode
|
||||
if (nodeToUse !== undefined && nodeToUse.payload !== undefined) {
|
||||
thisObject.payload.title = thisObject.payload.title + separator + nodeToUse.payload.title
|
||||
thisObject.payload.node.name = thisObject.payload.node.name + separator + nodeToUse.payload.node.name
|
||||
}
|
||||
}
|
||||
break
|
||||
}
|
||||
case 'Use Reference Parent Parent Parent': {
|
||||
let nodeToUse = thisObject.payload.node.payload.referenceParent
|
||||
if (nodeToUse !== undefined && nodeToUse.payload !== undefined) {
|
||||
nodeToUse = thisObject.payload.node.payload.referenceParent.payload.parentNode
|
||||
if (nodeToUse !== undefined && nodeToUse.payload !== undefined) {
|
||||
nodeToUse = thisObject.payload.node.payload.referenceParent.payload.parentNode.payload.parentNode
|
||||
if (nodeToUse !== undefined && nodeToUse.payload !== undefined) {
|
||||
thisObject.payload.title = thisObject.payload.title + separator + nodeToUse.payload.title
|
||||
thisObject.payload.node.name = thisObject.payload.node.name + separator + nodeToUse.payload.node.name
|
||||
}
|
||||
}
|
||||
}
|
||||
break
|
||||
}
|
||||
case 'Use Reference Parent Parent Parent': {
|
||||
let nodeToUse = thisObject.payload.node.payload.referenceParent
|
||||
if (nodeToUse !== undefined && nodeToUse.payload !== undefined) {
|
||||
nodeToUse = thisObject.payload.node.payload.referenceParent.payload.parentNode
|
||||
if (nodeToUse !== undefined && nodeToUse.payload !== undefined) {
|
||||
nodeToUse = thisObject.payload.node.payload.referenceParent.payload.parentNode.payload.parentNode
|
||||
if (nodeToUse !== undefined && nodeToUse.payload !== undefined) {
|
||||
thisObject.payload.title = thisObject.payload.title + separator + nodeToUse.payload.title
|
||||
thisObject.payload.node.name = thisObject.payload.node.name + separator + nodeToUse.payload.node.name
|
||||
}
|
||||
}
|
||||
}
|
||||
break
|
||||
}
|
||||
default: {
|
||||
if (titleReference.indexOf('Use Child @') === 0) {
|
||||
let propertyName = titleReference.substring(titleReference.indexOf('@') + 1, titleReference.length)
|
||||
let childNode = thisObject.payload.node[propertyName]
|
||||
if (childNode === undefined) { break }
|
||||
thisObject.payload.title = thisObject.payload.title + separator + childNode.name
|
||||
thisObject.payload.node.name = thisObject.payload.node.name + separator + childNode.name
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
separator = ' '
|
||||
}
|
||||
break
|
||||
}
|
||||
case 'Use Reference Parent Parent Parent': {
|
||||
let nodeToUse = thisObject.payload.node.payload.referenceParent
|
||||
if (nodeToUse !== undefined && nodeToUse.payload !== undefined) {
|
||||
nodeToUse = thisObject.payload.node.payload.referenceParent.payload.parentNode
|
||||
if (nodeToUse !== undefined && nodeToUse.payload !== undefined) {
|
||||
nodeToUse = thisObject.payload.node.payload.referenceParent.payload.parentNode.payload.parentNode
|
||||
if (nodeToUse !== undefined && nodeToUse.payload !== undefined) {
|
||||
thisObject.payload.title = thisObject.payload.title + separator + nodeToUse.payload.title
|
||||
thisObject.payload.node.name = thisObject.payload.node.name + separator + nodeToUse.payload.node.name
|
||||
}
|
||||
|
||||
/* The name becomes the title. */
|
||||
if (thisObject.payload.node.name !== undefined) {
|
||||
thisObject.payload.title = thisObject.payload.node.name
|
||||
}
|
||||
|
||||
let title = trimTitle(thisObject.payload.title)
|
||||
|
||||
/* Here we set the dimensions and position of this object */
|
||||
const FRAME_HEIGHT = 25
|
||||
const Y_OFFSET = -20
|
||||
const FRAME_WIDTH = (title.length + 2) / 2 * thisObject.payload.floatingObject.currentFontSize * FONT_ASPECT_RATIO * 1.2 * 2
|
||||
thisObject.container.frame.position.x = 0 - FRAME_WIDTH / 2
|
||||
thisObject.container.frame.position.y = 0 - thisObject.container.frame.radius * 1 / 2 - thisObject.payload.floatingObject.currentFontSize * FONT_ASPECT_RATIO + Y_OFFSET - FRAME_HEIGHT
|
||||
|
||||
thisObject.container.frame.width = FRAME_WIDTH
|
||||
thisObject.container.frame.height = FRAME_HEIGHT
|
||||
|
||||
if (thisObject.editMode === true) {
|
||||
let inputPosition = {
|
||||
x: 0,
|
||||
y: 0 + CURRENT_TOP_MARGIN + Y_OFFSET
|
||||
}
|
||||
|
||||
inputPosition = thisObject.container.frame.frameThisPoint(inputPosition)
|
||||
|
||||
if (inputPosition.y < CURRENT_TOP_MARGIN) { exitEditMode() }
|
||||
|
||||
let inputDiv = document.getElementById('inputDiv')
|
||||
inputDiv.style = 'position:absolute; top:' + inputPosition.y + 'px; left:' + inputPosition.x + 'px; z-index:1; '
|
||||
}
|
||||
}
|
||||
|
||||
function onFocus() {
|
||||
thisObject.isOnFocus = true
|
||||
}
|
||||
|
||||
function onNotFocus() {
|
||||
thisObject.isOnFocus = false
|
||||
exitEditMode()
|
||||
}
|
||||
|
||||
function onMouseClick(event) {
|
||||
let nodeDefinition = getNodeDefinition(thisObject.payload.node)
|
||||
if (nodeDefinition.title !== undefined) { return }
|
||||
|
||||
let checkPoint = {
|
||||
x: 0,
|
||||
y: 0
|
||||
}
|
||||
checkPoint = thisObject.container.frame.frameThisPoint(checkPoint)
|
||||
|
||||
if (thisObject.isVisibleFunction(checkPoint) === true) {
|
||||
enterEditMode()
|
||||
}
|
||||
}
|
||||
|
||||
function exitEditMode() {
|
||||
if (thisObject.editMode === true) {
|
||||
thisObject.editMode = false
|
||||
let input = document.getElementById('input')
|
||||
input.style.display = 'none'
|
||||
if (input.value.length > 2) {
|
||||
thisObject.payload.title = input.value
|
||||
thisObject.payload.node.name = input.value
|
||||
}
|
||||
}
|
||||
let inputDiv = document.getElementById('inputDiv')
|
||||
inputDiv.style = 'position:absolute; top:' + '-100' + 'px; left:' + '-100' + 'px; z-index:1; '
|
||||
}
|
||||
|
||||
function enterEditMode() {
|
||||
const WIDTH = thisObject.container.frame.width
|
||||
const HEIGHT = thisObject.container.frame.height
|
||||
let fontSize = thisObject.payload.floatingObject.currentFontSize
|
||||
|
||||
thisObject.editMode = true
|
||||
let input = document.getElementById('input')
|
||||
input.value = thisObject.payload.title
|
||||
|
||||
let backgroundColor = '0, 0, 0'
|
||||
if (thisObject.payload.uiObject.codeEditor !== undefined) {
|
||||
if (thisObject.payload.uiObject.codeEditor.visible === true) {
|
||||
backgroundColor = '204, 88, 53'
|
||||
}
|
||||
}
|
||||
|
||||
input.style = 'resize: none; border: none; outline: none; box-shadow: none; overflow:hidden; font-family: Saira Condensed; font-size: ' + fontSize + 'px; background-color: rgb(' + backgroundColor + ');color:rgb(255, 255, 255); width: ' + WIDTH + 'px; height: ' + HEIGHT + 'px'
|
||||
input.style.display = 'block'
|
||||
input.focus()
|
||||
}
|
||||
|
||||
function draw() {
|
||||
if (thisObject.isOnFocus === true || thisObject.allwaysVisible === true || thisObject.isDefault === false) {
|
||||
if (thisObject.payload.uiObject.codeEditor !== undefined) {
|
||||
if (thisObject.payload.uiObject.codeEditor.visible !== true) {
|
||||
drawTitleBackground()
|
||||
}
|
||||
}
|
||||
} else {
|
||||
drawTitleBackground()
|
||||
}
|
||||
break
|
||||
}
|
||||
default: {
|
||||
if (titleReference.indexOf('Use Child @') === 0) {
|
||||
let propertyName = titleReference.substring(titleReference.indexOf('@') + 1, titleReference.length)
|
||||
let childNode = thisObject.payload.node[propertyName]
|
||||
if (childNode === undefined) { break }
|
||||
thisObject.payload.title = thisObject.payload.title + separator + childNode.name
|
||||
thisObject.payload.node.name = thisObject.payload.node.name + separator + childNode.name
|
||||
|
||||
drawText()
|
||||
}
|
||||
}
|
||||
|
||||
function drawTitleBackground() {
|
||||
if (thisObject.editMode !== true) {
|
||||
let params = {
|
||||
cornerRadius: 3,
|
||||
lineWidth: 0.1,
|
||||
container: thisObject.container,
|
||||
borderColor: UI_COLOR.BLACK,
|
||||
backgroundColor: UI_COLOR.BLACK,
|
||||
castShadow: false,
|
||||
opacity: 0.25
|
||||
}
|
||||
}
|
||||
|
||||
roundedCornersBackground(params)
|
||||
}
|
||||
separator = ' '
|
||||
}
|
||||
}
|
||||
|
||||
/* The name becomes the title. */
|
||||
if (thisObject.payload.node.name !== undefined) {
|
||||
thisObject.payload.title = thisObject.payload.node.name
|
||||
}
|
||||
function drawText() {
|
||||
if (thisObject.editMode !== true) {
|
||||
let radius = thisObject.container.frame.radius
|
||||
let labelPoint
|
||||
let fontSize = thisObject.payload.floatingObject.currentFontSize
|
||||
let label
|
||||
|
||||
let title = trimTitle(thisObject.payload.title)
|
||||
if (radius > 6 && (thisObject.isOnFocus === true || thisObject.allwaysVisible === true || thisObject.isDefault === false)) {
|
||||
browserCanvasContext.strokeStyle = thisObject.payload.floatingObject.labelStrokeStyle
|
||||
|
||||
/* Here we set the dimensions and position of this object */
|
||||
const FRAME_HEIGHT = 25
|
||||
const Y_OFFSET = -20
|
||||
const FRAME_WIDTH = (title.length + 2) / 2 * thisObject.payload.floatingObject.currentFontSize * FONT_ASPECT_RATIO * 1.2 * 2
|
||||
thisObject.container.frame.position.x = 0 - FRAME_WIDTH / 2
|
||||
thisObject.container.frame.position.y = 0 - thisObject.container.frame.radius * 1 / 2 - thisObject.payload.floatingObject.currentFontSize * FONT_ASPECT_RATIO + Y_OFFSET - FRAME_HEIGHT
|
||||
browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
|
||||
|
||||
thisObject.container.frame.width = FRAME_WIDTH
|
||||
thisObject.container.frame.height = FRAME_HEIGHT
|
||||
label = thisObject.payload.title
|
||||
|
||||
if (thisObject.editMode === true) {
|
||||
let inputPosition = {
|
||||
x: 0,
|
||||
y: 0 + CURRENT_TOP_MARGIN + Y_OFFSET
|
||||
}
|
||||
if (label !== undefined) {
|
||||
label = trimTitle(label)
|
||||
|
||||
inputPosition = thisObject.container.frame.frameThisPoint(inputPosition)
|
||||
labelPoint = {
|
||||
x: 5,
|
||||
y: thisObject.container.frame.height * 0.8
|
||||
}
|
||||
|
||||
if (inputPosition.y < CURRENT_TOP_MARGIN) { exitEditMode() }
|
||||
labelPoint = thisObject.container.frame.frameThisPoint(labelPoint)
|
||||
|
||||
let inputDiv = document.getElementById('inputDiv')
|
||||
inputDiv.style = 'position:absolute; top:' + inputPosition.y + 'px; left:' + inputPosition.x + 'px; z-index:1; '
|
||||
}
|
||||
}
|
||||
if (canvas.floatingSpace.inMapMode === true) {
|
||||
labelPoint = canvas.floatingSpace.transformPointToMap(labelPoint)
|
||||
labelPoint.x = labelPoint.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO
|
||||
labelPoint.y = labelPoint.y - 35
|
||||
|
||||
function onFocus () {
|
||||
thisObject.isOnFocus = true
|
||||
}
|
||||
let nodeDefinition = getNodeDefinition(thisObject.payload.node)
|
||||
if (nodeDefinition !== undefined) {
|
||||
if (nodeDefinition.isHierarchyHead !== true) {
|
||||
return
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function onNotFocus () {
|
||||
thisObject.isOnFocus = false
|
||||
exitEditMode()
|
||||
}
|
||||
|
||||
function onMouseClick (event) {
|
||||
let nodeDefinition = getNodeDefinition(thisObject.payload.node)
|
||||
if (nodeDefinition.title !== undefined) { return }
|
||||
|
||||
let checkPoint = {
|
||||
x: 0,
|
||||
y: 0
|
||||
}
|
||||
checkPoint = thisObject.container.frame.frameThisPoint(checkPoint)
|
||||
|
||||
if (thisObject.isVisibleFunction(checkPoint) === true) {
|
||||
enterEditMode()
|
||||
}
|
||||
}
|
||||
|
||||
function exitEditMode () {
|
||||
if (thisObject.editMode === true) {
|
||||
thisObject.editMode = false
|
||||
let input = document.getElementById('input')
|
||||
input.style.display = 'none'
|
||||
if (input.value.length > 2) {
|
||||
thisObject.payload.title = input.value
|
||||
thisObject.payload.node.name = input.value
|
||||
}
|
||||
}
|
||||
let inputDiv = document.getElementById('inputDiv')
|
||||
inputDiv.style = 'position:absolute; top:' + '-100' + 'px; left:' + '-100' + 'px; z-index:1; '
|
||||
}
|
||||
|
||||
function enterEditMode () {
|
||||
const WIDTH = thisObject.container.frame.width
|
||||
const HEIGHT = thisObject.container.frame.height
|
||||
let fontSize = thisObject.payload.floatingObject.currentFontSize
|
||||
|
||||
thisObject.editMode = true
|
||||
let input = document.getElementById('input')
|
||||
input.value = thisObject.payload.title
|
||||
|
||||
let backgroundColor = '0, 0, 0'
|
||||
if (thisObject.payload.uiObject.codeEditor !== undefined) {
|
||||
if (thisObject.payload.uiObject.codeEditor.visible === true) {
|
||||
backgroundColor = '204, 88, 53'
|
||||
}
|
||||
}
|
||||
|
||||
input.style = 'resize: none; border: none; outline: none; box-shadow: none; overflow:hidden; font-family: Saira Condensed; font-size: ' + fontSize + 'px; background-color: rgb(' + backgroundColor + ');color:rgb(255, 255, 255); width: ' + WIDTH + 'px; height: ' + HEIGHT + 'px'
|
||||
input.style.display = 'block'
|
||||
input.focus()
|
||||
}
|
||||
|
||||
function draw () {
|
||||
if (thisObject.isOnFocus === true || thisObject.allwaysVisible === true || thisObject.isDefault === false) {
|
||||
if (thisObject.payload.uiObject.codeEditor !== undefined) {
|
||||
if (thisObject.payload.uiObject.codeEditor.visible !== true) {
|
||||
drawTitleBackground()
|
||||
}
|
||||
} else {
|
||||
drawTitleBackground()
|
||||
}
|
||||
|
||||
drawText()
|
||||
}
|
||||
}
|
||||
|
||||
function drawTitleBackground () {
|
||||
if (thisObject.editMode !== true) {
|
||||
let params = {
|
||||
cornerRadius: 3,
|
||||
lineWidth: 0.1,
|
||||
container: thisObject.container,
|
||||
borderColor: UI_COLOR.BLACK,
|
||||
backgroundColor: UI_COLOR.BLACK,
|
||||
castShadow: false,
|
||||
opacity: 0.25
|
||||
}
|
||||
|
||||
roundedCornersBackground(params)
|
||||
}
|
||||
}
|
||||
|
||||
function drawText () {
|
||||
if (thisObject.editMode !== true) {
|
||||
let radius = thisObject.container.frame.radius
|
||||
let labelPoint
|
||||
let fontSize = thisObject.payload.floatingObject.currentFontSize
|
||||
let label
|
||||
|
||||
if (radius > 6 && (thisObject.isOnFocus === true || thisObject.allwaysVisible === true || thisObject.isDefault === false)) {
|
||||
browserCanvasContext.strokeStyle = thisObject.payload.floatingObject.labelStrokeStyle
|
||||
|
||||
browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
|
||||
|
||||
label = thisObject.payload.title
|
||||
|
||||
if (label !== undefined) {
|
||||
label = trimTitle(label)
|
||||
|
||||
labelPoint = {
|
||||
x: 5,
|
||||
y: thisObject.container.frame.height * 0.8
|
||||
}
|
||||
|
||||
labelPoint = thisObject.container.frame.frameThisPoint(labelPoint)
|
||||
|
||||
if (canvas.floatingSpace.inMapMode === true) {
|
||||
labelPoint = canvas.floatingSpace.transformPointToMap(labelPoint)
|
||||
labelPoint.x = labelPoint.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO
|
||||
labelPoint.y = labelPoint.y - 35
|
||||
|
||||
let nodeDefinition = getNodeDefinition(thisObject.payload.node)
|
||||
if (nodeDefinition !== undefined) {
|
||||
if (nodeDefinition.isHierarchyHead !== true) {
|
||||
return
|
||||
}
|
||||
browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
|
||||
browserCanvasContext.fillStyle = thisObject.payload.floatingObject.labelStrokeStyle
|
||||
browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
|
||||
browserCanvasContext.fillStyle = thisObject.payload.floatingObject.labelStrokeStyle
|
||||
browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function trimTitle (title) {
|
||||
if (title === undefined) { return }
|
||||
const MAX_LABEL_LENGTH = 50
|
||||
if (title.length > MAX_LABEL_LENGTH) {
|
||||
title = title.substring(0, MAX_LABEL_LENGTH) + '...'
|
||||
function trimTitle(title) {
|
||||
if (title === undefined) { return }
|
||||
const MAX_LABEL_LENGTH = 50
|
||||
if (title.length > MAX_LABEL_LENGTH) {
|
||||
title = title.substring(0, MAX_LABEL_LENGTH) + '...'
|
||||
}
|
||||
return title
|
||||
}
|
||||
return title
|
||||
}
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user