From e8eaa7168fd75f226c0ee74dbd7eb4e503d1b557 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Wed, 12 Feb 2020 18:40:33 +0100 Subject: [PATCH] Performance Improvements --- Animation.js | 22 +++++++++++++--------- Canvas.js | 15 ++++++++++++--- DesignerSpace/Workspace/Workspace.js | 10 +++++++--- Globals.js | 2 +- Utilities.js | 10 ++++------ 5 files changed, 37 insertions(+), 22 deletions(-) diff --git a/Animation.js b/Animation.js index 53fd737a7..4042960c6 100644 --- a/Animation.js +++ b/Animation.js @@ -73,8 +73,9 @@ function newAnimation () { let mustExecute // console.clear() - + let row = 0 for (const [key, callBackFunction] of callBackFunctions.entries()) { + row++ switch (key) { case 'Floating Space Physics': chanceToExecute = 50 @@ -86,14 +87,13 @@ function newAnimation () { } } + let timeConsumed = 0 if (mustExecute === true) { let t0 = performance.now() callBackFunction() let t1 = performance.now() - let timeConsumed = t1 - t0 + timeConsumed = t1 - t0 if (key === 'Chart Space Draw') { - // console.log(key, (totalConsumption / totalCounter).toFixed(1)) - if (Math.random() * 100 > 99) { totalConsumption = 0 totalCounter = 0 @@ -109,11 +109,15 @@ function newAnimation () { } /* Performance Check */ - - for (const [key, timeConsumed] of performanceMap.entries()) { - let percentage = timeConsumed * 100 / totalTimeConsumed - if (key === 'Chart Space Draw') { - // console.log(key, percentage.toFixed(0)) + if (SHOW_ANIMATION_PERFORMACE === true) { + row = 0 + for (const [key, timeConsumed] of performanceMap.entries()) { + row++ + labelToPrint = key + ' ' + timeConsumed.toFixed(4) + printLabel(labelToPrint, 10, 100 + row * 30, 1, 20, UI_COLOR.RED) + let percentage = timeConsumed * 100 / totalTimeConsumed + labelToPrint = key + ' ' + percentage.toFixed(1) + '%' + printLabel(labelToPrint, 300, 100 + row * 30, 1, 20, UI_COLOR.RED) } } } else { diff --git a/Canvas.js b/Canvas.js index d3e67e5d1..97a8ec5ce 100644 --- a/Canvas.js +++ b/Canvas.js @@ -123,7 +123,7 @@ function newCanvas () { animation.addCallBackFunction('CockpitSpace Physics', thisObject.cockpitSpace.physics) animation.addCallBackFunction('Floating Space Physics', thisObject.floatingSpace.physics) animation.addCallBackFunction('Chart Space Physics', thisObject.chartSpace.physics) - animation.addCallBackFunction('Strategy Space Physics', thisObject.designerSpace.physics) + animation.addCallBackFunction('Designer Space Physics', thisObject.designerSpace.physics) animation.addCallBackFunction('Panels Space Physics', thisObject.panelsSpace.physics) /* Spcaces Drawing */ @@ -267,6 +267,15 @@ function newCanvas () { } } + if ((event.ctrlKey === true || event.metaKey === true) && event.altKey === true && event.shiftKey === true && event.keyCode === 122) { // Dev Tool when used with F11 + if (SHOW_ANIMATION_PERFORMACE === false) { + SHOW_ANIMATION_PERFORMACE = true + } else { + SHOW_ANIMATION_PERFORMACE = false + } + return + } + if ((event.ctrlKey === true || event.metaKey === true) && event.code === 'ArrowUp') { thisObject.cockpitSpace.toTop() return @@ -461,7 +470,7 @@ function newCanvas () { let container - /* We check if the mouse is over an element of the Strategy Space / */ + /* We check if the mouse is over an element of the Designer Space / */ container = thisObject.designerSpace.getContainer(point) @@ -566,7 +575,7 @@ function newCanvas () { let container - /* We check if the mouse is over an element of the Strategy Space / */ + /* We check if the mouse is over an element of the Designer Space / */ container = thisObject.designerSpace.getContainer(point) diff --git a/DesignerSpace/Workspace/Workspace.js b/DesignerSpace/Workspace/Workspace.js index 657b55f13..f5d85214d 100644 --- a/DesignerSpace/Workspace/Workspace.js +++ b/DesignerSpace/Workspace/Workspace.js @@ -87,6 +87,8 @@ function newWorkspace () { } functionLibraryUiObjectsFromNodes.recreateWorkspace(thisObject.workspaceNode) thisObject.enabled = true + + setInterval(saveWorkspace, 5000) } catch (err) { if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err.stack) } } @@ -108,11 +110,13 @@ function newWorkspace () { functionLibraryReferenceAttachDetach.referenceAttachNode(node, attachToNode, thisObject.workspaceNode.rootNodes) } - function physics () { - if (thisObject.enabled !== true) { return } - + function saveWorkspace () { let textToSave = stringifyWorkspace() window.localStorage.setItem(CANVAS_APP_NAME + '.' + 'Workspace', textToSave) + } + + function physics () { + if (thisObject.enabled !== true) { return } if (workingAtTask > 0) { circularProgressBar.physics() diff --git a/Globals.js b/Globals.js index a8204598e..771fecd62 100644 --- a/Globals.js +++ b/Globals.js @@ -119,7 +119,7 @@ let dailyFilePeriods = dailyFilePeriods = JSON.parse(dailyFilePeriods); -window.AT_BREAKPOINT = false; +SHOW_ANIMATION_PERFORMACE = false; let testUser = window.localStorage.getItem("test_user") let LOGGED_IN_USER_LOCAL_STORAGE_KEY diff --git a/Utilities.js b/Utilities.js index 6bf221203..8079fe872 100644 --- a/Utilities.js +++ b/Utilities.js @@ -85,7 +85,7 @@ function convertTimeFrameToName (pTimeFrame) { function downloadText (filename, text) { let element = document.createElement('a') element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text)) - element.setAttribute('downloadText', filename) + element.setAttribute('download', filename) element.style.display = 'none' document.body.appendChild(element) element.click() @@ -228,16 +228,14 @@ function removeTime (datetime) { return dateOnly } -function printLabel (labelToPrint, x, y, opacity, fontSize) { +function printLabel (labelToPrint, x, y, opacity, fontSize, color) { let labelPoint + if (color === undefined) { color = UI_COLOR.DARK } browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY - let label = '' + labelToPrint - let xOffset = label.length / 2 * fontSize * FONT_ASPECT_RATIO - - browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK + ', ' + opacity + ')' + browserCanvasContext.fillStyle = 'rgba(' + color + ', ' + opacity + ')' browserCanvasContext.fillText(label, x, y) }