From 8294ec85563f4bf3283de65877f85795be83d69b Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sun, 5 May 2019 12:29:14 +0200 Subject: [PATCH] Running without menues --- CompetitionStorage.js | 2 +- Container.js | 13 +- FloatingSpace/CircularMenu.js | 99 ++++++++++++ FloatingSpace/CircularMenuItem.js | 148 ++++++++++++++++++ FloatingSpace/FloatingLayer.js | 36 ++--- FloatingSpace/FloatingObject.js | 11 +- FloatingSpace/Note.js | 46 +++--- FloatingSpace/StrategyPart.js | 194 +++++------------------- Frame.js | 12 +- ProductStorage.js | 8 +- Scales/TimePeriodScale.js | 6 +- StrategySpace/StrategyCollectionItem.js | 2 +- TimelineChart.js | 2 +- Utilities/RoundedCornersBackground.js | 48 +++--- 14 files changed, 386 insertions(+), 241 deletions(-) create mode 100644 FloatingSpace/CircularMenu.js create mode 100644 FloatingSpace/CircularMenuItem.js diff --git a/CompetitionStorage.js b/CompetitionStorage.js index aebec6a93..b10a06b2a 100644 --- a/CompetitionStorage.js +++ b/CompetitionStorage.js @@ -94,7 +94,7 @@ function newCompetitionStorage (pName) { case GLOBAL.CUSTOM_FAIL_RESPONSE.result: { if (INFO_LOG === true) { logger.write('[INFO] initialize -> onFileSequenceReady -> Received CUSTOM FAIL Response.') } - if (INFO_LOG === true) { logger.write('[INFO] initialize -> onFileSequenceReady -> err.message = ' + err.message) } + if (INFO_LOG === true) { logger.write('[INFO] initialize -> onFileSequenceReady -> err= ' + err.stack) } if (INFO_LOG === true) { logger.write('[INFO] initialize -> onFileSequenceReady -> This bot has not starting competing yet.') } break diff --git a/Container.js b/Container.js index f2823a8ad..e3a64e4b8 100644 --- a/Container.js +++ b/Container.js @@ -2,6 +2,7 @@ function newContainer () { let thisObject = { id: Math.trunc(Math.random() * 10000000), + type: 'Rectangle', frame: undefined, displacement: undefined, eventHandler: undefined, @@ -18,6 +19,7 @@ function newContainer () { let connectedToParentWidth = false let connectedToParentHeight = false + let connectedToParentRadius = false let isConnectedToParent = false let dimensionsChangedEventSubscriptionId @@ -36,6 +38,7 @@ function newContainer () { function initialize (pName, pType) { thisObject.name = pName + thisObject.type = pType thisObject.frame = newFrame() thisObject.frame.initialize(pType) @@ -50,9 +53,10 @@ function newContainer () { thisObject.displacement.containerName = pName } - function connectToParent (parentContainer, onWidth, onHeight) { + function connectToParent (parentContainer, onWidth, onHeight, onRadius) { connectedToParentWidth = onWidth connectedToParentHeight = onHeight + connectedToParentRadius = onRadius isConnectedToParent = true thisObject.displacement.parentDisplacement = parentContainer.displacement @@ -69,6 +73,9 @@ function newContainer () { if (connectedToParentHeight) { thisObject.frame.height = thisObject.parentContainer.frame.height } + if (connectedToParentRadius) { + thisObject.frame.radius = thisObject.parentContainer.frame.radius + } } function onParentDimmensionsChanged (event) { @@ -81,6 +88,10 @@ function newContainer () { thisObject.frame.height = thisObject.parentContainer.frame.height dimmensionsChanged = true } + if (connectedToParentRadius) { + thisObject.frame.radius = thisObject.parentContainer.frame.radius + dimmensionsChanged = true + } if (dimmensionsChanged) { thisObject.eventHandler.raiseEvent('Dimmensions Changed', event) diff --git a/FloatingSpace/CircularMenu.js b/FloatingSpace/CircularMenu.js new file mode 100644 index 000000000..d1b1ed450 --- /dev/null +++ b/FloatingSpace/CircularMenu.js @@ -0,0 +1,99 @@ + +function newCircularMenu () { + const MODULE_NAME = 'Circular Menu' + + let thisObject = { + container: undefined, + physics: physics, + drawBackground: drawBackground, + drawForeground: drawForeground, + getContainer: getContainer, + 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 menuItemsInitialValues = [] + let menuItems = [] + + let isMouseOver = false + + return thisObject + + function initialize (menuItemsInitialValues) { +/* Create the array of Menu Items */ + + for (let i = 0; i < menuItemsInitialValues.length; i++) { + let menuItem = newCircularMenuItem() + let menuItemInitialValue = menuItemsInitialValues[i] + + menuItem.label = menuItemInitialValue.label + menuItem.visible = menuItemInitialValue.visible + menuItem.imagePathOn = menuItemInitialValue.imagePathOn + menuItem.imagePathOff = menuItemInitialValue.imagePathOff + menuItem.rawRadius = menuItemInitialValue.rawRadius + menuItem.targetRadius = menuItemInitialValue.label + menuItem.currentRadius = menuItemInitialValue.currentRadius + menuItem.angle = menuItemInitialValue.angle + + menuItem.initialize() + menuItems.push(menuItem) + } + + thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver) + thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver) + } + + function getContainer (point) { + 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 < menuItems.length; i++) { + let menutItem = menuItems[i] + menutItem.physics() + } + } + + function onMouseOver () { + for (let i = 0; i < menuItems.length; i++) { + let menutItem = menuItems[i] + menutItem.targetRadius = menutItem.rawRadius * 1.5 + } + isMouseOver = true + } + + function onMouseNotOver () { + for (let i = 0; i < menuItems.length; i++) { + let menutItem = menuItems[i] + menutItem.targetRadius = menutItem.rawRadius * 1 - i * 5 + } + isMouseOver = false + } + + function drawBackground (pFloatingObject) { + for (let i = 0; i < menuItems.length; i++) { + let menutItem = menuItems[i] + menutItem.drawBackground() + } + } + + function drawForeground (pFloatingObject) { + for (let i = 0; i < menuItems.length; i++) { + let menutItem = menuItems[i] + menutItem.drawForeground() + } + } +} diff --git a/FloatingSpace/CircularMenuItem.js b/FloatingSpace/CircularMenuItem.js new file mode 100644 index 000000000..7869f8590 --- /dev/null +++ b/FloatingSpace/CircularMenuItem.js @@ -0,0 +1,148 @@ + +function newCircularMenuItem () { + const MODULE_NAME = 'Circular Menu Iem' + + let thisObject = { + iconOn: undefined, + iconOff: undefined, + label: undefined, + visible: false, + imagePathOn: undefined, + imagePathOff: undefined, + rawRadius: undefined, + targetRadius: undefined, + currentRadius: undefined, + angle: undefined, + container: undefined, + physics: physics, + drawBackground: drawBackground, + drawForeground: drawForeground, + getContainer: getContainer, + initialize: initialize + } + + thisObject.container = newContainer() + thisObject.container.initialize(MODULE_NAME) + 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 + thisObject.container.frame.width = 100 + thisObject.container.frame.height = 50 + + let isMouseOver = false + + return thisObject + + function initialize () { + /* Load Menu Images */ + + thisObject.iconOn = new Image() + thisObject.iconOn.onload = onImageLoad + + function onImageLoad () { + thisObject.iconOff = new Image() + thisObject.iconOff.onload = onImageLoad + + function onImageLoad () { + thisObject.canDrawIcon = true + } + thisObject.iconOff.src = window.canvasApp.urlPrefix + thisObject.imagePathOff + } + thisObject.iconOn.src = window.canvasApp.urlPrefix + thisObject.imagePathOn + thisObject.icon = thisObject.iconOn // The default value is ON. + + thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver) + thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick) + thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver) + } + + function getContainer (point) { + let container + + if (thisObject.container.frame.isThisPointHere(point, true) === 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 + } + } + } + + function onMouseOver () { + isMouseOver = true + } + + function onMouseNotOver () { + isMouseOver = false + } + + function onMouseClick (event) { + + } + + function drawBackground () { + if (isMouseOver === true) { + let point = { + x: thisObject.container.frame.position.x, + y: thisObject.container.frame.position.y + } + + point = thisObject.container.frame.frameThisPoint(point) + + browserCanvasContext.beginPath() + + browserCanvasContext.rect(point.x, point.y, thisObject.container.frame.width, thisObject.container.frame.height) + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.RED + ', 1)' + + browserCanvasContext.closePath() + browserCanvasContext.fill() + } + } + + function drawForeground () { + let position = { + x: 0, + y: 0 + } + + position = thisObject.container.frame.frameThisPoint(position) + + /* Menu Item */ + + if (thisObject.canDrawIcon === true && thisObject.currentRadius > 1) { + let menuPosition = { + x: position.x + thisObject.currentRadius * 3 / 4 * Math.cos(toRadians(thisObject.angle)), + y: position.y - thisObject.currentRadius * 3 / 4 * Math.sin(toRadians(thisObject.angle)) } + + browserCanvasContext.drawImage(thisObject.icon, menuPosition.x - thisObject.currentRadius, menuPosition.y - thisObject.currentRadius, thisObject.currentRadius * 2, thisObject.currentRadius * 2) + + /* Menu Label */ + + let labelPoint + let fontSize = 10 + + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY + + if (thisObject.label !== undefined && thisObject.currentRadius >= thisObject.targetRadius) { + labelPoint = { + x: menuPosition.x + thisObject.currentRadius + 10, + y: menuPosition.y + fontSize * FONT_ASPECT_RATIO + } + + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)' + browserCanvasContext.fillText(thisObject.label, labelPoint.x, labelPoint.y) + } + } + } +} diff --git a/FloatingSpace/FloatingLayer.js b/FloatingSpace/FloatingLayer.js index dd3188f99..8ee181c27 100644 --- a/FloatingSpace/FloatingLayer.js +++ b/FloatingSpace/FloatingLayer.js @@ -119,7 +119,7 @@ function newFloatingLayer () { if (callBackFunction !== undefined) { callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE) } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] addFloatingObject -> err.message = ' + err.message) } + if (ERROR_LOG === true) { logger.write('[ERROR] addFloatingObject -> err= ' + err.stack) } if (callBackFunction !== undefined) { callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) } } } @@ -250,12 +250,12 @@ function newFloatingLayer () { if (callBackFunction !== undefined) { callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE) } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] killFloatingObject -> err.message = ' + err.message) } + if (ERROR_LOG === true) { logger.write('[ERROR] killFloatingObject -> err= ' + err.stack) } if (callBackFunction !== undefined) { callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) } } } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] killFloatingObject -> err.message = ' + err.message) } + if (ERROR_LOG === true) { logger.write('[ERROR] killFloatingObject -> err= ' + err.stack) } if (callBackFunction !== undefined) { callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) } } } @@ -298,7 +298,7 @@ function newFloatingLayer () { } } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] getFloatingObject -> err.message = ' + err.message) } + if (ERROR_LOG === true) { logger.write('[ERROR] getFloatingObject -> err= ' + err.stack) } } } @@ -323,7 +323,7 @@ function newFloatingLayer () { makeVisible() } catch (err) { - if (ERROR_LOG === true && INTENSIVE_LOG === true) { logger.write('[ERROR] physics -> drawVisibleObjects -> err.message = ' + err.message) } + if (ERROR_LOG === true && INTENSIVE_LOG === true) { logger.write('[ERROR] physics -> drawVisibleObjects -> err= ' + err.stack) } } } @@ -391,7 +391,7 @@ function newFloatingLayer () { makeInvisible() } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] physics -> makeVisible -> err.message = ' + err.message) } + if (ERROR_LOG === true) { logger.write('[ERROR] physics -> makeVisible -> err= ' + err.stack) } } } @@ -449,7 +449,7 @@ function newFloatingLayer () { drawDyingObjects() } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] physics -> makeInvisible -> err.message = ' + err.message) } + if (ERROR_LOG === true) { logger.write('[ERROR] physics -> makeInvisible -> err= ' + err.stack) } } } @@ -469,7 +469,7 @@ function newFloatingLayer () { floatingObject.drawForeground() } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] physics -> drawDyingObjects -> err.message = ' + err.message) } + if (ERROR_LOG === true) { logger.write('[ERROR] physics -> drawDyingObjects -> err= ' + err.stack) } } } } @@ -634,7 +634,7 @@ function newFloatingLayer () { animateDyingObjects() } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] physics -> applyPhysics -> err.message = ' + err.message) } + if (ERROR_LOG === true) { logger.write('[ERROR] physics -> applyPhysics -> err= ' + err.stack) } } } @@ -659,11 +659,11 @@ function newFloatingLayer () { } } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] physics -> animateDyingObjects -> err.message = ' + err.message) } + if (ERROR_LOG === true) { logger.write('[ERROR] physics -> animateDyingObjects -> err= ' + err.stack) } } } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] physics -> err.message = ' + err.message) } + if (ERROR_LOG === true) { logger.write('[ERROR] physics -> err= ' + err.stack) } } } @@ -714,7 +714,7 @@ function newFloatingLayer () { floatingObject.currentSpeed.x = floatingObject.currentSpeed.x + forceVector.x floatingObject.currentSpeed.y = floatingObject.currentSpeed.y + forceVector.y } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] gravityForce -> err.message = ' + err.message) } + if (ERROR_LOG === true) { logger.write('[ERROR] gravityForce -> err= ' + err.stack) } } } @@ -778,7 +778,7 @@ function newFloatingLayer () { } } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] currentRepulsionForce -> err.message = ' + err.message) } + if (ERROR_LOG === true) { logger.write('[ERROR] currentRepulsionForce -> err= ' + err.stack) } } } @@ -861,7 +861,7 @@ function newFloatingLayer () { floatingObject1.currentSpeed.y = floatingObject1.currentSpeed.y - forceVector.y } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] targetRepulsionForce -> err.message = ' + err.message) } + if (ERROR_LOG === true) { logger.write('[ERROR] targetRepulsionForce -> err= ' + err.stack) } } } @@ -881,7 +881,7 @@ function newFloatingLayer () { maxTargetRepulsionForce = 0.0001 } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] changeTargetRepulsion -> err.message = ' + err.message) } + if (ERROR_LOG === true) { logger.write('[ERROR] changeTargetRepulsion -> err= ' + err.stack) } } } @@ -907,7 +907,7 @@ function newFloatingLayer () { return true } else return true } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] colliding -> err.message = ' + err.message) } + if (ERROR_LOG === true) { logger.write('[ERROR] colliding -> err= ' + err.stack) } } } @@ -917,7 +917,7 @@ function newFloatingLayer () { return Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)) } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] distance -> err.message = ' + err.message) } + if (ERROR_LOG === true) { logger.write('[ERROR] distance -> err= ' + err.stack) } } } @@ -995,7 +995,7 @@ function newFloatingLayer () { floatingObject1.container.frame.position = pos1 floatingObject2.container.frame.position = pos2 } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] resolveCollision -> err.message = ' + err.message) } + if (ERROR_LOG === true) { logger.write('[ERROR] resolveCollision -> err= ' + err.stack) } } } } diff --git a/FloatingSpace/FloatingObject.js b/FloatingSpace/FloatingObject.js index 6b61f65c7..81cc7f39e 100644 --- a/FloatingSpace/FloatingObject.js +++ b/FloatingSpace/FloatingObject.js @@ -88,6 +88,7 @@ function newFloatingObject () { case 'Strategy Part': { thisObject.underlayingObject = newStrategyPart() thisObject.underlayingObject.initialize(floatingLayer, pSubType) + thisObject.underlayingObject.container.connectToParent(thisObject.container, false, false, true) break } default: { @@ -105,7 +106,7 @@ function newFloatingObject () { if (callBackFunction !== undefined) { callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE) } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err.message = ' + err.message) } + if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err= ' + err.stack) } if (callBackFunction !== undefined) { callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) } } } @@ -131,7 +132,7 @@ function newFloatingObject () { if (callBackFunction !== undefined) { callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE) } } catch (err) { - if (ERROR_LOG === true) { logger.write('[ERROR] physics -> err.message = ' + err.message) } + if (ERROR_LOG === true) { logger.write('[ERROR] physics -> err= ' + err.stack) } if (callBackFunction !== undefined) { callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) } } } @@ -169,7 +170,7 @@ function newFloatingObject () { } function initializeMass (suggestedValue) { - var mass = suggestedValue + let mass = suggestedValue if (mass < 0.1) { mass = 0.1 } @@ -179,7 +180,7 @@ function newFloatingObject () { } function initializeRadius (suggestedValue) { - var radius = suggestedValue + let radius = suggestedValue if (radius < 2) { radius = 2 } @@ -187,6 +188,8 @@ function newFloatingObject () { thisObject.rawRadius = radius thisObject.targetRadius = radius thisObject.container.frame.radius = radius / 3 + + thisObject.container.eventHandler.raiseEvent('Dimmensions Changed', event) } function initializeImageSize (suggestedValue) { diff --git a/FloatingSpace/Note.js b/FloatingSpace/Note.js index 46288c127..0fda6958f 100644 --- a/FloatingSpace/Note.js +++ b/FloatingSpace/Note.js @@ -89,11 +89,11 @@ function newNote () { } function drawForeground (pFloatingObject) { - const BUBBLE_CORNERS_RADIOUS = 5 + const BUBBLE_CORNERS_RADIUS = 5 const TITLE_BAR_HEIGHT = 14 - const BUBBLE_WIDTH = BUBBLE_CORNERS_RADIOUS + pFloatingObject.container.frame.radius * 4 - const BUBBLE_HEIGHT = BUBBLE_CORNERS_RADIOUS + pFloatingObject.container.frame.radius * 2 + const BUBBLE_WIDTH = BUBBLE_CORNERS_RADIUS + pFloatingObject.container.frame.radius * 4 + const BUBBLE_HEIGHT = BUBBLE_CORNERS_RADIUS + pFloatingObject.container.frame.radius * 2 let borderPoint1 let borderPoint2 @@ -109,23 +109,23 @@ function newNote () { /* Rounded Background */ borderPoint1 = { - x: intialDisplace.x + BUBBLE_CORNERS_RADIOUS, - y: intialDisplace.y + BUBBLE_CORNERS_RADIOUS + x: intialDisplace.x + BUBBLE_CORNERS_RADIUS, + y: intialDisplace.y + BUBBLE_CORNERS_RADIUS } borderPoint2 = { - x: intialDisplace.x + BUBBLE_WIDTH - BUBBLE_CORNERS_RADIOUS, - y: intialDisplace.y + BUBBLE_CORNERS_RADIOUS + x: intialDisplace.x + BUBBLE_WIDTH - BUBBLE_CORNERS_RADIUS, + y: intialDisplace.y + BUBBLE_CORNERS_RADIUS } borderPoint3 = { - x: intialDisplace.x + BUBBLE_WIDTH - BUBBLE_CORNERS_RADIOUS, - y: intialDisplace.y + BUBBLE_HEIGHT - BUBBLE_CORNERS_RADIOUS + x: intialDisplace.x + BUBBLE_WIDTH - BUBBLE_CORNERS_RADIUS, + y: intialDisplace.y + BUBBLE_HEIGHT - BUBBLE_CORNERS_RADIUS } borderPoint4 = { - x: intialDisplace.x + BUBBLE_CORNERS_RADIOUS, - y: intialDisplace.y + +BUBBLE_HEIGHT - BUBBLE_CORNERS_RADIOUS + x: intialDisplace.x + BUBBLE_CORNERS_RADIUS, + y: intialDisplace.y + +BUBBLE_HEIGHT - BUBBLE_CORNERS_RADIUS } titleBarPoint1 = { @@ -143,14 +143,14 @@ function newNote () { browserCanvasContext.fillStyle = 'rgba(255, 249, 196, 0.75)' browserCanvasContext.beginPath() - browserCanvasContext.arc(borderPoint1.x, borderPoint1.y, BUBBLE_CORNERS_RADIOUS, 1.0 * Math.PI, 1.5 * Math.PI) - browserCanvasContext.lineTo(borderPoint2.x, borderPoint2.y - BUBBLE_CORNERS_RADIOUS) - browserCanvasContext.arc(borderPoint2.x, borderPoint2.y, BUBBLE_CORNERS_RADIOUS, 1.5 * Math.PI, 2.0 * Math.PI) - browserCanvasContext.lineTo(borderPoint3.x + BUBBLE_CORNERS_RADIOUS, borderPoint3.y) - browserCanvasContext.arc(borderPoint3.x, borderPoint3.y, BUBBLE_CORNERS_RADIOUS, 0 * Math.PI, 0.5 * Math.PI) - browserCanvasContext.lineTo(borderPoint4.x, borderPoint4.y + BUBBLE_CORNERS_RADIOUS) - browserCanvasContext.arc(borderPoint4.x, borderPoint4.y, BUBBLE_CORNERS_RADIOUS, 0.5 * Math.PI, 1.0 * Math.PI) - browserCanvasContext.lineTo(borderPoint1.x - BUBBLE_CORNERS_RADIOUS, borderPoint1.y) + browserCanvasContext.arc(borderPoint1.x, borderPoint1.y, BUBBLE_CORNERS_RADIUS, 1.0 * Math.PI, 1.5 * Math.PI) + browserCanvasContext.lineTo(borderPoint2.x, borderPoint2.y - BUBBLE_CORNERS_RADIUS) + browserCanvasContext.arc(borderPoint2.x, borderPoint2.y, BUBBLE_CORNERS_RADIUS, 1.5 * Math.PI, 2.0 * Math.PI) + browserCanvasContext.lineTo(borderPoint3.x + BUBBLE_CORNERS_RADIUS, borderPoint3.y) + browserCanvasContext.arc(borderPoint3.x, borderPoint3.y, BUBBLE_CORNERS_RADIUS, 0 * Math.PI, 0.5 * Math.PI) + browserCanvasContext.lineTo(borderPoint4.x, borderPoint4.y + BUBBLE_CORNERS_RADIUS) + browserCanvasContext.arc(borderPoint4.x, borderPoint4.y, BUBBLE_CORNERS_RADIUS, 0.5 * Math.PI, 1.0 * Math.PI) + browserCanvasContext.lineTo(borderPoint1.x - BUBBLE_CORNERS_RADIUS, borderPoint1.y) browserCanvasContext.closePath() @@ -166,10 +166,10 @@ function newNote () { browserCanvasContext.beginPath() browserCanvasContext.moveTo(titleBarPoint1.x, titleBarPoint1.y) - browserCanvasContext.lineTo(borderPoint1.x - BUBBLE_CORNERS_RADIOUS, borderPoint1.y) - browserCanvasContext.arc(borderPoint1.x, borderPoint1.y, BUBBLE_CORNERS_RADIOUS, 1.0 * Math.PI, 1.5 * Math.PI) - browserCanvasContext.lineTo(borderPoint2.x, borderPoint2.y - BUBBLE_CORNERS_RADIOUS) - browserCanvasContext.arc(borderPoint2.x, borderPoint2.y, BUBBLE_CORNERS_RADIOUS, 1.5 * Math.PI, 2.0 * Math.PI) + browserCanvasContext.lineTo(borderPoint1.x - BUBBLE_CORNERS_RADIUS, borderPoint1.y) + browserCanvasContext.arc(borderPoint1.x, borderPoint1.y, BUBBLE_CORNERS_RADIUS, 1.0 * Math.PI, 1.5 * Math.PI) + browserCanvasContext.lineTo(borderPoint2.x, borderPoint2.y - BUBBLE_CORNERS_RADIUS) + browserCanvasContext.arc(borderPoint2.x, borderPoint2.y, BUBBLE_CORNERS_RADIUS, 1.5 * Math.PI, 2.0 * Math.PI) browserCanvasContext.lineTo(titleBarPoint2.x, titleBarPoint2.y) browserCanvasContext.closePath() diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index 34bceccdd..03066a88a 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -4,6 +4,7 @@ function newStrategyPart () { let thisObject = { type: undefined, + menu: undefined, container: undefined, physics: physics, drawBackground: drawBackground, @@ -20,7 +21,6 @@ function newStrategyPart () { thisObject.container.frame.position.x = 0 thisObject.container.frame.position.y = 0 - let ballStringMenu = [] let floatingLayer let isMouseOver = false let image @@ -31,10 +31,11 @@ function newStrategyPart () { function initialize (pFloatingLayer, pType) { floatingLayer = pFloatingLayer + let menuItemsInitialValues = [] switch (pType) { case 'Strategy': { imagePath = 'Images/icons/style-01/quality.png' - ballStringMenu = [ + menuItemsInitialValues = [ { label: 'Settings', visible: false, @@ -59,7 +60,7 @@ function newStrategyPart () { } case 'Strategy Entry': { imagePath = 'Images/icons/style-01/startup.png' - ballStringMenu = [ + menuItemsInitialValues = [ { label: 'Add Situation', visible: false, @@ -74,7 +75,7 @@ function newStrategyPart () { } case 'Strategy Exit': { imagePath = 'Images/icons/style-01/support.png' - ballStringMenu = [ + menuItemsInitialValues = [ { label: 'Add Situation', visible: false, @@ -89,7 +90,7 @@ function newStrategyPart () { } case 'Trade Entry': { imagePath = 'Images/icons/style-01/compass.png' - ballStringMenu = [ + menuItemsInitialValues = [ { label: 'Add Situation', visible: false, @@ -104,7 +105,7 @@ function newStrategyPart () { } case 'Trade Exit': { imagePath = 'Images/icons/style-01/broken-link.png' - ballStringMenu = [ + menuItemsInitialValues = [ { label: 'Add Situation', visible: false, @@ -119,7 +120,7 @@ function newStrategyPart () { } case 'Stop': { imagePath = 'Images/icons/style-01/pixel.png' - ballStringMenu = [ + menuItemsInitialValues = [ { label: 'Add Phase', visible: false, @@ -134,7 +135,7 @@ function newStrategyPart () { } case 'Take Profit': { imagePath = 'Images/icons/style-01/competition.png' - ballStringMenu = [ + menuItemsInitialValues = [ { label: 'Add Phase', visible: false, @@ -149,7 +150,7 @@ function newStrategyPart () { } case 'Phase': { imagePath = 'Images/icons/style-01/placeholder.png' - ballStringMenu = [ + menuItemsInitialValues = [ { label: 'Edit Code', visible: false, @@ -184,7 +185,7 @@ function newStrategyPart () { } case 'Situation': { imagePath = 'Images/icons/style-01/attractive.png' - ballStringMenu = [ + menuItemsInitialValues = [ { label: 'Add Condition', visible: false, @@ -209,7 +210,7 @@ function newStrategyPart () { } case 'Condition': { imagePath = 'Images/icons/style-01/testing.png' - ballStringMenu = [ + menuItemsInitialValues = [ { label: 'Edit Code', visible: false, @@ -237,6 +238,9 @@ function newStrategyPart () { } } + thisObject.menu = newCircularMenu() + thisObject.menu.initialize(menuItemsInitialValues) + /* Load Part Image */ if (imagePath !== undefined) { @@ -249,129 +253,48 @@ function newStrategyPart () { image.src = window.canvasApp.urlPrefix + imagePath } -/* Load Menu Images */ - - for (let i = 0; i < ballStringMenu.length; i++) { - let menuItem = ballStringMenu[i] - menuItem.iconOn = new Image() - menuItem.iconOn.onload = onImageLoad - - function onImageLoad () { - menuItem.iconOff = new Image() - menuItem.iconOff.onload = onImageLoad - - function onImageLoad () { - menuItem.canDrawIcon = true - } - menuItem.iconOff.src = window.canvasApp.urlPrefix + menuItem.imagePathOff - } - menuItem.iconOn.src = window.canvasApp.urlPrefix + menuItem.imagePathOn - menuItem.icon = menuItem.iconOn // The default value is ON. - } - thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver) thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick) thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver) } function getContainer (point) { - return undefined + let container + + container = thisObject.menu.getContainer(point) + if (container !== undefined) { return container } + + if (thisObject.container.frame.isThisPointHere(point, true) === true) { + return thisObject.container + } else { + return undefined + } } function physics () { - // The menuItems also have a target. - - for (let i = 0; i < ballStringMenu.length; i++) { - let menuItem = ballStringMenu[i] - - if (Math.abs(menuItem.currentRadius - menuItem.targetRadius) >= 0.5) { - if (menuItem.currentRadius < menuItem.targetRadius) { - menuItem.currentRadius = menuItem.currentRadius + 0.5 - } else { - menuItem.currentRadius = menuItem.currentRadius - 0.5 - } - } - } + thisObject.menu.physics() } function onMouseOver () { - for (let i = 0; i < ballStringMenu.length; i++) { - let menuItem = ballStringMenu[i] - - menuItem.targetRadius = menuItem.rawRadius * 1.5 - } - + thisObject.menu.container.eventHandler.raiseEvent('onMouseOver') isMouseOver = true } function onMouseNotOver () { - for (let i = 0; i < ballStringMenu.length; i++) { - let menuItem = ballStringMenu[i] - - menuItem.targetRadius = menuItem.rawRadius * 0 - i * 5 - } - + thisObject.menu.container.eventHandler.raiseEvent('onMouseNotOver') isMouseOver = false } function onMouseClick (event) { - /* What we need to do here is to check which menu item was clicked, if any. */ - pPoint = event.point - pFloatingObject = event.parent - - let menuItemIndex - - for (let i = 0; i < ballStringMenu.length; i++) { - let menuItem = ballStringMenu[i] - - if (menuItem.canDrawIcon === true && menuItem.currentRadius > 1) { - let position = { - x: pFloatingObject.container.frame.position.x + pFloatingObject.container.frame.radius * 3 / 4 * Math.cos(toRadians(menuItem.angle)), - y: pFloatingObject.container.frame.position.y - pFloatingObject.container.frame.radius * 3 / 4 * Math.sin(toRadians(menuItem.angle)) - } - - browserCanvasContext.drawImage(menuItem.icon, position.x, position.y, menuItem.currentRadius * 2, menuItem.currentRadius * 2) - - let distance = Math.sqrt(Math.pow(position.x - pPoint.x, 2) + Math.pow(position.y - pPoint.y, 2)) - - if (distance < menuItem.currentRadius) { - menuItemIndex = i - } - } - } - - if (menuItemIndex !== undefined) { - switch (menuItemIndex) { - - case 0: { - // This menu item is to turn ON / OFF the plotting of this bot. - - if (pFloatingObject.payload.profile.plot === true) { - pFloatingObject.payload.profile.plot = false - - let menuItem = ballStringMenu[0] - menuItem.icon = menuItem.iconOff - } else { - pFloatingObject.payload.profile.plot = true - - let menuItem = ballStringMenu[0] - menuItem.icon = menuItem.iconOn - } - - break - } - - case 1: { - // This menu item is to turn ON the Debug Log pannel for the bot. - - break - } - } - } } function drawBackground (pFloatingObject) { + drawPartBackground(pFloatingObject) + thisObject.menu.drawBackground() + } + + function drawPartBackground (pFloatingObject) { if (pFloatingObject.payload.parentNode === undefined) { return } /* Here we do the trick of recalculation the position of the anchor by setting it to the position of its parent */ @@ -405,7 +328,7 @@ function newStrategyPart () { if (pFloatingObject.container.frame.radius > 0.5) { /* Target Spot */ - var radius = 1 + let radius = 1 browserCanvasContext.beginPath() browserCanvasContext.arc(point.x, point.y, radius, 0, Math.PI * 2, true) @@ -416,6 +339,11 @@ function newStrategyPart () { } function drawForeground (pFloatingObject) { + drawPartForeground(pFloatingObject) + thisObject.menu.drawForeground() + } + + function drawPartForeground (pFloatingObject) { let position = { x: pFloatingObject.container.frame.position.x, y: pFloatingObject.container.frame.position.y @@ -423,18 +351,6 @@ function newStrategyPart () { let radius = pFloatingObject.container.frame.radius - if (radius > 5) { - /* Contourn */ -/* - browserCanvasContext.beginPath() - browserCanvasContext.arc(position.x, position.y, radius, 0, Math.PI * 2, true) - browserCanvasContext.closePath() - browserCanvasContext.strokeStyle = 'rgba(30, 30, 30, 0.75)' - browserCanvasContext.lineWidth = 1 - browserCanvasContext.stroke() - */ - } - if (radius > 0.5 && image === undefined) { /* Main FloatingObject */ @@ -463,38 +379,6 @@ function newStrategyPart () { } } - /* StringBall Menu */ - - for (let i = 0; i < ballStringMenu.length; i++) { - let menuItem = ballStringMenu[i] - - if (menuItem.canDrawIcon === true && menuItem.currentRadius > 1) { - let menuPosition = { - x: position.x + radius * 3 / 4 * Math.cos(toRadians(menuItem.angle)), - y: position.y - radius * 3 / 4 * Math.sin(toRadians(menuItem.angle)) } - - browserCanvasContext.drawImage(menuItem.icon, menuPosition.x - menuItem.currentRadius, menuPosition.y - menuItem.currentRadius, menuItem.currentRadius * 2, menuItem.currentRadius * 2) - - /* Menu Label */ - - let labelPoint - let fontSize = 10 - - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY - - if (menuItem.label !== undefined && menuItem.currentRadius >= menuItem.targetRadius) { - labelPoint = { - x: menuPosition.x + menuItem.currentRadius + 10, - y: menuPosition.y + fontSize * FONT_ASPECT_RATIO - } - - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY - browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)' - browserCanvasContext.fillText(menuItem.label, labelPoint.x, labelPoint.y) - } - } - } - /* Label Text */ if (radius > 6 && isMouseOver === true) { diff --git a/Frame.js b/Frame.js index 2fd4391da..f46f70630 100644 --- a/Frame.js +++ b/Frame.js @@ -1,6 +1,6 @@  function newFrame () { - const PANEL_CORNERS_RADIOUS = 5 + const PANEL_CORNERS_RADIUS = 5 const TITLE_BAR_HEIGHT = 15 // this must be grater than radius let thisObject = { @@ -216,7 +216,7 @@ function newFrame () { function background () { let params = { - cornerRadious: 5, + cornerRadius: 5, lineWidth: 0.1, opacity: 0.75, container: thisObject.container, @@ -247,10 +247,10 @@ function newFrame () { browserCanvasContext.beginPath() browserCanvasContext.moveTo(titleBarPoint1.x, titleBarPoint1.y) - browserCanvasContext.lineTo(borderPoint1.x - PANEL_CORNERS_RADIOUS, borderPoint1.y) - browserCanvasContext.arc(borderPoint1.x, borderPoint1.y, PANEL_CORNERS_RADIOUS, 1.0 * Math.PI, 1.5 * Math.PI) - browserCanvasContext.lineTo(borderPoint2.x, borderPoint2.y - PANEL_CORNERS_RADIOUS) - browserCanvasContext.arc(borderPoint2.x, borderPoint2.y, PANEL_CORNERS_RADIOUS, 1.5 * Math.PI, 2.0 * Math.PI) + browserCanvasContext.lineTo(borderPoint1.x - PANEL_CORNERS_RADIUS, borderPoint1.y) + browserCanvasContext.arc(borderPoint1.x, borderPoint1.y, PANEL_CORNERS_RADIUS, 1.0 * Math.PI, 1.5 * Math.PI) + browserCanvasContext.lineTo(borderPoint2.x, borderPoint2.y - PANEL_CORNERS_RADIUS) + browserCanvasContext.arc(borderPoint2.x, borderPoint2.y, PANEL_CORNERS_RADIUS, 1.5 * Math.PI, 2.0 * Math.PI) browserCanvasContext.lineTo(titleBarPoint2.x, titleBarPoint2.y) browserCanvasContext.closePath() diff --git a/ProductStorage.js b/ProductStorage.js index 66c3ea939..bc0d98456 100644 --- a/ProductStorage.js +++ b/ProductStorage.js @@ -171,7 +171,7 @@ function newProductStorage (pName) { case GLOBAL.CUSTOM_FAIL_RESPONSE.result: { if (INFO_LOG === true) { logger.write('[INFO] initialize -> onMarketFileReady -> Received CUSTOM FAIL Response.') } - if (INFO_LOG === true) { logger.write('[INFO] initialize -> onMarketFileReady -> err.message = ' + err.message) } + if (INFO_LOG === true) { logger.write('[INFO] initialize -> onMarketFileReady -> err= ' + err.stack) } callBackFunction(err) return @@ -227,7 +227,7 @@ function newProductStorage (pName) { case GLOBAL.CUSTOM_FAIL_RESPONSE.result: { if (INFO_LOG === true) { logger.write('[INFO] initialize -> onDailyFileReady -> Received CUSTOM FAIL Response.') } - if (INFO_LOG === true) { logger.write('[INFO] initialize -> onDailyFileReady -> err.message = ' + err.message) } + if (INFO_LOG === true) { logger.write('[INFO] initialize -> onDailyFileReady -> err= ' + err.stack) } callBackFunction(err) return @@ -282,7 +282,7 @@ function newProductStorage (pName) { case GLOBAL.CUSTOM_FAIL_RESPONSE.result: { if (INFO_LOG === true) { logger.write('[INFO] initialize -> onSingleFileReady -> Received CUSTOM FAIL Response.') } - if (INFO_LOG === true) { logger.write('[INFO] initialize -> onSingleFileReady -> err.message = ' + err.message) } + if (INFO_LOG === true) { logger.write('[INFO] initialize -> onSingleFileReady -> err= ' + err.stack) } callBackFunction(err) return @@ -334,7 +334,7 @@ function newProductStorage (pName) { case GLOBAL.CUSTOM_FAIL_RESPONSE.result: { if (INFO_LOG === true) { logger.write('[INFO] initialize -> onFileSequenceReady -> Received CUSTOM FAIL Response.') } - if (INFO_LOG === true) { logger.write('[INFO] initialize -> onFileSequenceReady -> err.message = ' + err.message) } + if (INFO_LOG === true) { logger.write('[INFO] initialize -> onFileSequenceReady -> err= ' + err.stack) } callBackFunction(err) return diff --git a/Scales/TimePeriodScale.js b/Scales/TimePeriodScale.js index 85e3afc74..95c9ff5e3 100644 --- a/Scales/TimePeriodScale.js +++ b/Scales/TimePeriodScale.js @@ -220,7 +220,7 @@ to be visible at the top of the viewPort. */ /* We draw the circle container */ const RED_LINE_HIGHT = 5 - const RADIOUS = 25 + const RADIUS = 25 const OPACITY = 1 let centerPoint = { @@ -229,14 +229,14 @@ to be visible at the top of the viewPort. */ } browserCanvasContext.beginPath() - browserCanvasContext.arc(centerPoint.x, centerPoint.y, RADIOUS + RED_LINE_HIGHT, 0.0 * Math.PI, 2.0 * Math.PI) + browserCanvasContext.arc(centerPoint.x, centerPoint.y, RADIUS + RED_LINE_HIGHT, 0.0 * Math.PI, 2.0 * Math.PI) browserCanvasContext.closePath() browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', ' + OPACITY + ')' browserCanvasContext.fill() browserCanvasContext.beginPath() - browserCanvasContext.arc(centerPoint.x, centerPoint.y, RADIOUS, 0.0 * Math.PI, 2.0 * Math.PI) + browserCanvasContext.arc(centerPoint.x, centerPoint.y, RADIUS, 0.0 * Math.PI, 2.0 * Math.PI) browserCanvasContext.closePath() browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK + ', ' + OPACITY + ')' diff --git a/StrategySpace/StrategyCollectionItem.js b/StrategySpace/StrategyCollectionItem.js index 325433b9f..182338665 100644 --- a/StrategySpace/StrategyCollectionItem.js +++ b/StrategySpace/StrategyCollectionItem.js @@ -288,7 +288,7 @@ function newStrategyCollectionItem () { function borders () { let params = { - cornerRadious: 8, + cornerRadius: 8, lineWidth: 0.1, opacity: 1, container: thisObject.container, diff --git a/TimelineChart.js b/TimelineChart.js index a5f15f160..bdad50c22 100644 --- a/TimelineChart.js +++ b/TimelineChart.js @@ -135,7 +135,7 @@ if (err.result !== GLOBAL.DEFAULT_OK_RESPONSE.result) { if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onPlotterManagerReady -> Plotter Manager Initialization Failed. ') } - if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onPlotterManagerReady -> err.message = ' + err.message) } + if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onPlotterManagerReady -> err= ' + err.stack) } callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) return diff --git a/Utilities/RoundedCornersBackground.js b/Utilities/RoundedCornersBackground.js index 76863de02..f9386eb86 100644 --- a/Utilities/RoundedCornersBackground.js +++ b/Utilities/RoundedCornersBackground.js @@ -1,22 +1,22 @@ function roundedCornersBackground (params) { borderPoint1 = { - x: params.cornerRadious, - y: params.cornerRadious + x: params.cornerRadius, + y: params.cornerRadius } borderPoint2 = { - x: params.container.frame.width - params.cornerRadious, - y: params.cornerRadious + x: params.container.frame.width - params.cornerRadius, + y: params.cornerRadius } borderPoint3 = { - x: params.container.frame.width - params.cornerRadious, - y: params.container.frame.height - params.cornerRadious + x: params.container.frame.width - params.cornerRadius, + y: params.container.frame.height - params.cornerRadius } borderPoint4 = { - x: params.cornerRadious, - y: params.container.frame.height - params.cornerRadious + x: params.cornerRadius, + y: params.container.frame.height - params.cornerRadius } /* Now the transformations. */ @@ -35,14 +35,14 @@ function roundedCornersBackground (params) { browserCanvasContext.beginPath() - browserCanvasContext.arc(borderPoint1.x + SHADOW_OFFSET, borderPoint1.y + SHADOW_OFFSET, params.cornerRadious, 1.0 * Math.PI, 1.5 * Math.PI) - browserCanvasContext.lineTo(borderPoint2.x + SHADOW_OFFSET, borderPoint2.y - params.cornerRadious + SHADOW_OFFSET) - browserCanvasContext.arc(borderPoint2.x + SHADOW_OFFSET, borderPoint2.y + SHADOW_OFFSET, params.cornerRadious, 1.5 * Math.PI, 2.0 * Math.PI) - browserCanvasContext.lineTo(borderPoint3.x + params.cornerRadious + SHADOW_OFFSET, borderPoint3.y + SHADOW_OFFSET) - browserCanvasContext.arc(borderPoint3.x + SHADOW_OFFSET, borderPoint3.y + SHADOW_OFFSET, params.cornerRadious, 0 * Math.PI, 0.5 * Math.PI) - browserCanvasContext.lineTo(borderPoint4.x + SHADOW_OFFSET, borderPoint4.y + params.cornerRadious + SHADOW_OFFSET) - browserCanvasContext.arc(borderPoint4.x + SHADOW_OFFSET, borderPoint4.y + SHADOW_OFFSET, params.cornerRadious, 0.5 * Math.PI, 1.0 * Math.PI) - browserCanvasContext.lineTo(borderPoint1.x - params.cornerRadious + SHADOW_OFFSET, borderPoint1.y + SHADOW_OFFSET) + browserCanvasContext.arc(borderPoint1.x + SHADOW_OFFSET, borderPoint1.y + SHADOW_OFFSET, params.cornerRadius, 1.0 * Math.PI, 1.5 * Math.PI) + browserCanvasContext.lineTo(borderPoint2.x + SHADOW_OFFSET, borderPoint2.y - params.cornerRadius + SHADOW_OFFSET) + browserCanvasContext.arc(borderPoint2.x + SHADOW_OFFSET, borderPoint2.y + SHADOW_OFFSET, params.cornerRadius, 1.5 * Math.PI, 2.0 * Math.PI) + browserCanvasContext.lineTo(borderPoint3.x + params.cornerRadius + SHADOW_OFFSET, borderPoint3.y + SHADOW_OFFSET) + browserCanvasContext.arc(borderPoint3.x + SHADOW_OFFSET, borderPoint3.y + SHADOW_OFFSET, params.cornerRadius, 0 * Math.PI, 0.5 * Math.PI) + browserCanvasContext.lineTo(borderPoint4.x + SHADOW_OFFSET, borderPoint4.y + params.cornerRadius + SHADOW_OFFSET) + browserCanvasContext.arc(borderPoint4.x + SHADOW_OFFSET, borderPoint4.y + SHADOW_OFFSET, params.cornerRadius, 0.5 * Math.PI, 1.0 * Math.PI) + browserCanvasContext.lineTo(borderPoint1.x - params.cornerRadius + SHADOW_OFFSET, borderPoint1.y + SHADOW_OFFSET) browserCanvasContext.closePath() @@ -63,14 +63,14 @@ function roundedCornersBackground (params) { browserCanvasContext.beginPath() - browserCanvasContext.arc(borderPoint1.x, borderPoint1.y, params.cornerRadious, 1.0 * Math.PI, 1.5 * Math.PI) - browserCanvasContext.lineTo(borderPoint2.x, borderPoint2.y - params.cornerRadious) - browserCanvasContext.arc(borderPoint2.x, borderPoint2.y, params.cornerRadious, 1.5 * Math.PI, 2.0 * Math.PI) - browserCanvasContext.lineTo(borderPoint3.x + params.cornerRadious, borderPoint3.y) - browserCanvasContext.arc(borderPoint3.x, borderPoint3.y, params.cornerRadious, 0 * Math.PI, 0.5 * Math.PI) - browserCanvasContext.lineTo(borderPoint4.x, borderPoint4.y + params.cornerRadious) - browserCanvasContext.arc(borderPoint4.x, borderPoint4.y, params.cornerRadious, 0.5 * Math.PI, 1.0 * Math.PI) - browserCanvasContext.lineTo(borderPoint1.x - params.cornerRadious, borderPoint1.y) + browserCanvasContext.arc(borderPoint1.x, borderPoint1.y, params.cornerRadius, 1.0 * Math.PI, 1.5 * Math.PI) + browserCanvasContext.lineTo(borderPoint2.x, borderPoint2.y - params.cornerRadius) + browserCanvasContext.arc(borderPoint2.x, borderPoint2.y, params.cornerRadius, 1.5 * Math.PI, 2.0 * Math.PI) + browserCanvasContext.lineTo(borderPoint3.x + params.cornerRadius, borderPoint3.y) + browserCanvasContext.arc(borderPoint3.x, borderPoint3.y, params.cornerRadius, 0 * Math.PI, 0.5 * Math.PI) + browserCanvasContext.lineTo(borderPoint4.x, borderPoint4.y + params.cornerRadius) + browserCanvasContext.arc(borderPoint4.x, borderPoint4.y, params.cornerRadius, 0.5 * Math.PI, 1.0 * Math.PI) + browserCanvasContext.lineTo(borderPoint1.x - params.cornerRadius, borderPoint1.y) browserCanvasContext.closePath()