From ec766d22711b8054a47071d037c292dfc5aaea4c Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sat, 29 Jun 2019 20:04:33 +0200 Subject: [PATCH 01/12] Confirmation Labels --- FloatingSpace/CircularMenu.js | 1 + FloatingSpace/CircularMenuItem.js | 3 ++- FloatingSpace/StrategyPartConstructor.js | 21 +++++++++++++++++++++ 3 files changed, 24 insertions(+), 1 deletion(-) diff --git a/FloatingSpace/CircularMenu.js b/FloatingSpace/CircularMenu.js index 0eeba34f7..d35759070 100644 --- a/FloatingSpace/CircularMenu.js +++ b/FloatingSpace/CircularMenu.js @@ -68,6 +68,7 @@ function newCircularMenu () { menuItem.relatedStrategyPart = menuItemInitialValue.relatedStrategyPart menuItem.dontShowAtFullscreen = menuItemInitialValue.dontShowAtFullscreen menuItem.askConfirmation = menuItemInitialValue.askConfirmation + menuItem.confirmationLabel = menuItemInitialValue.confirmationLabel if (menuItem.label === undefined) { menuItem.type = 'Icon Only' diff --git a/FloatingSpace/CircularMenuItem.js b/FloatingSpace/CircularMenuItem.js index 1ed429791..d969cdb74 100644 --- a/FloatingSpace/CircularMenuItem.js +++ b/FloatingSpace/CircularMenuItem.js @@ -6,6 +6,7 @@ function newCircularMenuItem () { type: undefined, isDeployed: undefined, askConfirmation: undefined, + confirmationLabel: undefined, iconOn: undefined, iconOff: undefined, currentIcon: undefined, @@ -194,7 +195,7 @@ function newCircularMenuItem () { } if (temporaryStatus === 0 && thisObject.askConfirmation === true) { - setTemporaryStatus('Confirm to Delete', UI_COLOR.GREY, 50) + setTemporaryStatus(thisObject.confirmationLabel, UI_COLOR.GREY, 50) } } diff --git a/FloatingSpace/StrategyPartConstructor.js b/FloatingSpace/StrategyPartConstructor.js index 94d0b458f..e63b2a851 100644 --- a/FloatingSpace/StrategyPartConstructor.js +++ b/FloatingSpace/StrategyPartConstructor.js @@ -187,6 +187,7 @@ function newStrategyPartConstructor () { { action: 'Delete Trading System', askConfirmation: true, + confirmationLabel: 'Confirm to Delete', actionFunction: payload.onMenuItemClick, label: 'Delete Trading System', visible: false, @@ -270,6 +271,7 @@ function newStrategyPartConstructor () { { action: 'Delete Parameters', askConfirmation: true, + confirmationLabel: 'Confirm to Delete', actionFunction: payload.onMenuItemClick, label: 'Delete Parameters', visible: false, @@ -339,6 +341,7 @@ function newStrategyPartConstructor () { { action: 'Delete Base Asset', askConfirmation: true, + confirmationLabel: 'Confirm to Delete', actionFunction: payload.onMenuItemClick, label: 'Delete Base Asset', visible: false, @@ -421,6 +424,7 @@ function newStrategyPartConstructor () { { action: 'Delete Strategy', askConfirmation: true, + confirmationLabel: 'Confirm to Delete', actionFunction: payload.onMenuItemClick, label: 'Delete This Strategy', visible: false, @@ -503,6 +507,7 @@ function newStrategyPartConstructor () { { action: 'Delete Trigger Stage', askConfirmation: true, + confirmationLabel: 'Confirm to Delete', actionFunction: payload.onMenuItemClick, label: 'Delete This Stage', visible: false, @@ -572,6 +577,7 @@ function newStrategyPartConstructor () { { action: 'Delete Open Stage', askConfirmation: true, + confirmationLabel: 'Confirm to Delete', actionFunction: payload.onMenuItemClick, label: 'Delete This Stage', visible: false, @@ -641,6 +647,7 @@ function newStrategyPartConstructor () { { action: 'Delete Manage Stage', askConfirmation: true, + confirmationLabel: 'Confirm to Delete', actionFunction: payload.onMenuItemClick, label: 'Delete This Stage', visible: false, @@ -698,6 +705,7 @@ function newStrategyPartConstructor () { { action: 'Delete Close Stage', askConfirmation: true, + confirmationLabel: 'Confirm to Delete', actionFunction: payload.onMenuItemClick, label: 'Delete This Stage', visible: false, @@ -755,6 +763,7 @@ function newStrategyPartConstructor () { { action: 'Delete Position Size', askConfirmation: true, + confirmationLabel: 'Confirm to Delete', actionFunction: payload.onMenuItemClick, label: 'Delete Trading System', visible: false, @@ -838,6 +847,7 @@ function newStrategyPartConstructor () { { action: 'Delete Event', askConfirmation: true, + confirmationLabel: 'Confirm to Delete', actionFunction: payload.onMenuItemClick, label: 'Delete This Event', visible: false, @@ -908,6 +918,7 @@ function newStrategyPartConstructor () { { action: 'Delete Event', askConfirmation: true, + confirmationLabel: 'Confirm to Delete', actionFunction: payload.onMenuItemClick, label: 'Delete This Event', visible: false, @@ -978,6 +989,7 @@ function newStrategyPartConstructor () { { action: 'Delete Event', askConfirmation: true, + confirmationLabel: 'Confirm to Delete', actionFunction: payload.onMenuItemClick, label: 'Delete This Event', visible: false, @@ -1047,6 +1059,7 @@ function newStrategyPartConstructor () { { action: 'Delete Initial Definition', askConfirmation: true, + confirmationLabel: 'Confirm to Delete', actionFunction: payload.onMenuItemClick, label: 'Delete This Definition', visible: false, @@ -1117,6 +1130,7 @@ function newStrategyPartConstructor () { { action: 'Delete Managed Item', askConfirmation: true, + confirmationLabel: 'Confirm to Delete', actionFunction: payload.onMenuItemClick, label: 'Delete This Item', visible: false, @@ -1187,6 +1201,7 @@ function newStrategyPartConstructor () { { action: 'Delete Managed Item', askConfirmation: true, + confirmationLabel: 'Confirm to Delete', actionFunction: payload.onMenuItemClick, label: 'Delete This Item', visible: false, @@ -1270,6 +1285,7 @@ function newStrategyPartConstructor () { { action: 'Delete Phase', askConfirmation: true, + confirmationLabel: 'Confirm to Delete', actionFunction: payload.onMenuItemClick, label: 'Delete This Phase', visible: false, @@ -1345,6 +1361,7 @@ function newStrategyPartConstructor () { { action: 'Delete Formula', askConfirmation: true, + confirmationLabel: 'Confirm to Delete', actionFunction: payload.onMenuItemClick, label: 'Delete This Formula', visible: false, @@ -1415,6 +1432,7 @@ function newStrategyPartConstructor () { { action: 'Delete Event', askConfirmation: true, + confirmationLabel: 'Confirm to Delete', actionFunction: payload.onMenuItemClick, label: 'Delete This Event', visible: false, @@ -1485,6 +1503,7 @@ function newStrategyPartConstructor () { { action: 'Delete Situation', askConfirmation: true, + confirmationLabel: 'Confirm to Delete', actionFunction: payload.onMenuItemClick, label: 'Delete This Situation', visible: false, @@ -1555,6 +1574,7 @@ function newStrategyPartConstructor () { { action: 'Delete Condition', askConfirmation: true, + confirmationLabel: 'Confirm to Delete', actionFunction: payload.onMenuItemClick, label: 'Delete This Condition', visible: false, @@ -1630,6 +1650,7 @@ function newStrategyPartConstructor () { { action: 'Delete Code', askConfirmation: true, + confirmationLabel: 'Confirm to Delete', actionFunction: payload.onMenuItemClick, label: 'Delete This Code', visible: false, From 6a86ddfffa42285f0e0f245175f3a4f361ddd1d4 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sun, 30 Jun 2019 10:57:08 +0200 Subject: [PATCH 02/12] Double Range for X Scaling of charts --- Scales/TimeScale.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Scales/TimeScale.js b/Scales/TimeScale.js index ead64cf55..7d9521c4e 100644 --- a/Scales/TimeScale.js +++ b/Scales/TimeScale.js @@ -70,7 +70,7 @@ function newTimeScale () { if (thisObject.lenghtPercentage < STEP_SIZE) { thisObject.lenghtPercentage = STEP_SIZE } } else { thisObject.lenghtPercentage = thisObject.lenghtPercentage + STEP_SIZE - if (thisObject.lenghtPercentage > 100) { thisObject.lenghtPercentage = 100 } + if (thisObject.lenghtPercentage > 200) { thisObject.lenghtPercentage = 200 } } event.lenghtPercentage = thisObject.lenghtPercentage @@ -107,7 +107,7 @@ function newTimeScale () { const DISTANCE_BETWEEN_ARROWS = 10 const MIN_DISTANCE_FROM_CENTER = 110 const CURRENT_VALUE_DISTANCE = MIN_DISTANCE_FROM_CENTER + thisObject.lenghtPercentage - const MAX_DISTANCE_FROM_CENTER = MIN_DISTANCE_FROM_CENTER + 100 + DISTANCE_BETWEEN_ARROWS + const MAX_DISTANCE_FROM_CENTER = MIN_DISTANCE_FROM_CENTER + 200 + DISTANCE_BETWEEN_ARROWS let ARROW_DIRECTION = 0 From 0041cd8a77cfe7b53ddeb7e38bb1aa7d2eb705a1 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sun, 30 Jun 2019 11:56:03 +0200 Subject: [PATCH 03/12] Fixes and support of base asset --- CockpitSpace/Speedometer.js | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/CockpitSpace/Speedometer.js b/CockpitSpace/Speedometer.js index e93c434ba..d42e4a5b4 100644 --- a/CockpitSpace/Speedometer.js +++ b/CockpitSpace/Speedometer.js @@ -90,7 +90,11 @@ function newSpeedometer () { if (CURRENT_VALUE_ANGLE > INIT_VALUE_ANGLE) { CURRENT_VALUE_ANGLE = INIT_VALUE_ANGLE } - if (thisObject.params.VALUE > 0) { + if ( + thisObject.params.VALUE > 0 && + thisObject.params.ASSET_NAME === thisObject.params.BASE_ASSET && + thisObject.params.POSITION_TAKEN === false + ) { browserCanvasContext.setLineDash([0, 0]) browserCanvasContext.beginPath() @@ -183,7 +187,7 @@ function newSpeedometer () { if (label === 0) { label = label.toFixed(2) } else { label = label.toLocaleString() } } - label = label.substring(0, 5) + label = label.substring(0, 6) xOffset = label.length / 2 * fontSize * FONT_ASPECT_RATIO + 7 @@ -220,7 +224,7 @@ function newSpeedometer () { browserCanvasContext.font = 'bold ' + fontSize + 'px ' + UI_FONT.PRIMARY - label = thisObject.params.ASSET_NAME + label = thisObject.params.ASSET_NAME + ' ' xOffset = label.length / 2 * fontSize * FONT_ASPECT_RATIO + 3 yOffset = -15 @@ -230,7 +234,12 @@ function newSpeedometer () { y: centerPoint.y - yOffset } - browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + OPACITY + ')' + if (thisObject.params.ASSET_NAME === thisObject.params.BASE_ASSET) { + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.TITANIUM_YELLOW + ', ' + OPACITY + ')' + } else { + browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + OPACITY + ')' + } + browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) } } From 7497647c5574da419f739b649096c805ad49f51b Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sun, 30 Jun 2019 12:31:41 +0200 Subject: [PATCH 04/12] Flexible decimals and fontsize at speedometer --- CockpitSpace/Speedometer.js | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/CockpitSpace/Speedometer.js b/CockpitSpace/Speedometer.js index d42e4a5b4..b20fc3a09 100644 --- a/CockpitSpace/Speedometer.js +++ b/CockpitSpace/Speedometer.js @@ -178,16 +178,27 @@ function newSpeedometer () { /* We put the thisObject.params.VALUE in the middle */ fontSize = 22 - + if (thisObject.params.VALUE > 999) { + fontSize = 18 + } + if (thisObject.params.VALUE > 9999) { + fontSize = 14 + } + if (thisObject.params.VALUE > 99999) { + fontSize = 10 + } browserCanvasContext.font = 'bold ' + fontSize + 'px ' + UI_FONT.PRIMARY label = thisObject.params.VALUE + if (isNaN(label) === false) { label = Number(label) + + label = Math.trunc(label * Math.pow(10, thisObject.params.DECIMALS)) / Math.pow(10, thisObject.params.DECIMALS) if (label === 0) { label = label.toFixed(2) } else { label = label.toLocaleString() } } - label = label.substring(0, 6) + // label = label.substring(0, 6) xOffset = label.length / 2 * fontSize * FONT_ASPECT_RATIO + 7 From 7d9cc1dbb05aaec148ad459ca6e86eb5fd7469ed Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sun, 30 Jun 2019 13:45:05 +0200 Subject: [PATCH 05/12] Little less mass --- FloatingSpace/StrategyPartConstructor.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/FloatingSpace/StrategyPartConstructor.js b/FloatingSpace/StrategyPartConstructor.js index e63b2a851..a017961cd 100644 --- a/FloatingSpace/StrategyPartConstructor.js +++ b/FloatingSpace/StrategyPartConstructor.js @@ -1786,7 +1786,7 @@ function newStrategyPartConstructor () { floatingObject.targetFriction = 0.93 floatingObject.friction = INITIAL_FRICTION - floatingObject.initializeMass(500) + floatingObject.initializeMass(400) floatingObject.initializeRadius(45) floatingObject.initializeImageSize(80) floatingObject.initializeFontSize(10) @@ -1798,7 +1798,7 @@ function newStrategyPartConstructor () { floatingObject.targetFriction = 0.94 floatingObject.friction = INITIAL_FRICTION - floatingObject.initializeMass(250) + floatingObject.initializeMass(200) floatingObject.initializeRadius(45) floatingObject.initializeImageSize(80) floatingObject.initializeFontSize(10) From af707fd918c22ce3d1744488415801f8681138bc Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sun, 30 Jun 2019 13:56:29 +0200 Subject: [PATCH 06/12] Right Dragging for attaching & detaching functionality --- FloatingSpace/StrategyPart.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js index f05522867..565554632 100644 --- a/FloatingSpace/StrategyPart.js +++ b/FloatingSpace/StrategyPart.js @@ -79,7 +79,7 @@ function newStrategyPart () { let errorMessage = '' let formulaValue = 0 - let detachingEnabled = false + let rightDragging = false return thisObject @@ -189,6 +189,7 @@ function newStrategyPart () { if (thisObject.isOnFocus !== true) { return } if (isDragging !== true) { return } + if (rightDragging !== true) { return } if (thisObject.payload.chainParent !== undefined) { return } let nearbyFloatingObjects = thisObject.payload.floatingObject.nearbyFloatingObjects @@ -374,7 +375,7 @@ function newStrategyPart () { function detachingPhysics () { if (isDragging !== true) { return } if (thisObject.isFrozen === true) { return } - if (detachingEnabled === false) { return } + if (rightDragging === false) { return } let distanceToChainParent = Math.sqrt(Math.pow(thisObject.payload.position.x - thisObject.payload.targetPosition.x, 2) + Math.pow(thisObject.payload.position.y - thisObject.payload.targetPosition.y, 2)) let ratio = distanceToChainParent / previousDistance @@ -498,9 +499,9 @@ function newStrategyPart () { } isDragging = true if (event.button === 2) { - detachingEnabled = true + rightDragging = true } else { - detachingEnabled = false + rightDragging = false } } From 808ae4d61dca288e8c92aaa590f24d631985b3a1 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Sun, 30 Jun 2019 13:58:43 +0200 Subject: [PATCH 07/12] quiclier target repulsion changes --- FloatingSpace/FloatingLayer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/FloatingSpace/FloatingLayer.js b/FloatingSpace/FloatingLayer.js index 4e2d57269..7554770fc 100644 --- a/FloatingSpace/FloatingLayer.js +++ b/FloatingSpace/FloatingLayer.js @@ -625,7 +625,7 @@ function newFloatingLayer () { pDelta = -1 } - maxTargetRepulsionForce = maxTargetRepulsionForce + pDelta / 10000 + maxTargetRepulsionForce = maxTargetRepulsionForce + pDelta / 1000 if (maxTargetRepulsionForce < 0.0001) { maxTargetRepulsionForce = 0.0001 From 2c14d95056d53caf31b7e1a4241939eb4801b4a4 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Mon, 1 Jul 2019 13:34:38 +0200 Subject: [PATCH 08/12] BUG FIXED: When zooming the designer the icons go far from the center --- Spaces/FloatingSpace.js | 20 ++++++++++++++++---- 1 file changed, 16 insertions(+), 4 deletions(-) diff --git a/Spaces/FloatingSpace.js b/Spaces/FloatingSpace.js index 1c9aeb5dd..484e5e9c3 100644 --- a/Spaces/FloatingSpace.js +++ b/Spaces/FloatingSpace.js @@ -31,13 +31,16 @@ function newFloatingSpace () { thisObject.container.isWheelable = true thisObject.container.detectMouseOver = true thisObject.container.frame.radius = 0 - thisObject.container.frame.width = browserCanvas.width * 10 - thisObject.container.frame.height = browserCanvas.height * 10 + + let devicePixelRatio = window.devicePixelRatio + const SPACE_SIZE = 10 + + thisObject.container.frame.width = browserCanvas.width * devicePixelRatio * SPACE_SIZE + thisObject.container.frame.height = browserCanvas.height * devicePixelRatio * SPACE_SIZE thisObject.container.frame.position.x = browserCanvas.width / 2 - thisObject.container.frame.width / 2 thisObject.container.frame.position.y = browserCanvas.height / 2 - thisObject.container.frame.height / 2 let visible = false - return thisObject function finalize () { @@ -134,9 +137,19 @@ function newFloatingSpace () { } function physics () { + browserZoomPhysics() thisObject.floatingLayer.physics() } + function browserZoomPhysics () { + if (devicePixelRatio !== window.devicePixelRatio) { + devicePixelRatio = window.devicePixelRatio + + thisObject.container.frame.position.x = browserCanvas.width / 2 - thisObject.container.frame.width / 2 + thisObject.container.frame.position.y = browserCanvas.height / 2 - thisObject.container.frame.height / 2 + } + } + function draw () { if (visible === true) { drawBackground() @@ -155,4 +168,3 @@ function newFloatingSpace () { browserCanvasContext.fill() } } - From ee596f71d639b612e502d9f78584fe88f55375b7 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Mon, 1 Jul 2019 13:43:33 +0200 Subject: [PATCH 09/12] First physics BUG FIXED --- Canvas.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Canvas.js b/Canvas.js index 6f5a49c25..7c8f9b5bc 100644 --- a/Canvas.js +++ b/Canvas.js @@ -117,8 +117,8 @@ function newCanvas () { thisObject.animation = animation - animation.addCallBackFunction('Floating Space Draw', thisObject.floatingSpace.draw) animation.addCallBackFunction('Floating Space Physics', thisObject.floatingSpace.physics) + animation.addCallBackFunction('Floating Space Draw', thisObject.floatingSpace.draw) animation.addCallBackFunction('Chart Space Background', thisObject.chartSpace.drawBackground) animation.addCallBackFunction('Chart Space Draw', thisObject.chartSpace.draw) animation.addCallBackFunction('Chart Space Physics', thisObject.chartSpace.physics) From 28a34305bdc4e19891372217c661a28b6631b454 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Mon, 1 Jul 2019 13:48:28 +0200 Subject: [PATCH 10/12] All physics first BUG FIXED --- Canvas.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/Canvas.js b/Canvas.js index 7c8f9b5bc..7427ed5ff 100644 --- a/Canvas.js +++ b/Canvas.js @@ -118,17 +118,18 @@ function newCanvas () { thisObject.animation = animation animation.addCallBackFunction('Floating Space Physics', thisObject.floatingSpace.physics) + animation.addCallBackFunction('Chart Space Physics', thisObject.chartSpace.physics) + animation.addCallBackFunction('CockpitSpace Physics', thisObject.cockpitSpace.physics) + animation.addCallBackFunction('Strategy Space Physics', thisObject.strategySpace.physics) + animation.addCallBackFunction('Floating Space Draw', thisObject.floatingSpace.draw) animation.addCallBackFunction('Chart Space Background', thisObject.chartSpace.drawBackground) animation.addCallBackFunction('Chart Space Draw', thisObject.chartSpace.draw) - animation.addCallBackFunction('Chart Space Physics', thisObject.chartSpace.physics) animation.addCallBackFunction('Panels Space', thisObject.panelsSpace.draw) animation.addCallBackFunction('ViewPort Animate', viewPort.animate) animation.addCallBackFunction('CockpitSpace Draw', thisObject.cockpitSpace.draw) - animation.addCallBackFunction('CockpitSpace Physics', thisObject.cockpitSpace.physics) animation.addCallBackFunction('Top Space Draw', thisObject.topSpace.draw) animation.addCallBackFunction('Strategy Space Draw', thisObject.strategySpace.draw) - animation.addCallBackFunction('Strategy Space Physics', thisObject.strategySpace.physics) animation.addCallBackFunction('Splash Screen Draw', splashScreen.draw) animation.start() } catch (err) { From 8aa78ec7019f38ac0b5d988b4dfa937d403c0ab3 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Mon, 1 Jul 2019 13:53:37 +0200 Subject: [PATCH 11/12] Backgroun images FIXED to 32 cols --- ChartsSpace/TimelineChart.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ChartsSpace/TimelineChart.js b/ChartsSpace/TimelineChart.js index 82a09b62c..e06b51dee 100644 --- a/ChartsSpace/TimelineChart.js +++ b/ChartsSpace/TimelineChart.js @@ -345,7 +345,7 @@ function newTimelineChart () { let imageHeight = 42 let imageWidth = 150 - const MAX_COLUMNS = 16 + const MAX_COLUMNS = 32 const MAX_ROWS = 5 const Y_TOP_MARGIN = 30 const MIN_ROW_HIGHT = 100 From e3121e2802b33ad7c75bdd0826065bbab6ea4db8 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Mon, 1 Jul 2019 14:02:09 +0200 Subject: [PATCH 12/12] Rate Scale fine tunned --- Scales/RateScale.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Scales/RateScale.js b/Scales/RateScale.js index c0d09e15c..e44bbc241 100644 --- a/Scales/RateScale.js +++ b/Scales/RateScale.js @@ -15,7 +15,7 @@ function newRateScale () { } const HEIGHT_PERCENTAGE_DEFAULT_VALUE = 50 - const STEP_SIZE = 5 + const STEP_SIZE = 2 const MIN_WIDTH = 50 thisObject.container = newContainer()