diff --git a/Utilities.js b/Utilities.js index 2af862981..594a85199 100644 --- a/Utilities.js +++ b/Utilities.js @@ -1,26 +1,3 @@ -function drawContainerBackground (container, color, opacity, fitFunction) { - let fromPoint = { - x: 0, - y: 0 - } - - let toPoint = { - x: container.frame.width, - y: container.frame.height - } - - fromPoint = transformThisPoint(fromPoint, container) - toPoint = transformThisPoint(toPoint, container) - - fromPoint = fitFunction(fromPoint) - toPoint = fitFunction(toPoint) - - browserCanvasContext.beginPath() - browserCanvasContext.rect(fromPoint.x, fromPoint.y, toPoint.x - fromPoint.x, toPoint.y - fromPoint.y) - browserCanvasContext.fillStyle = 'rgba(' + color + ', ' + opacity + ')' - browserCanvasContext.closePath() - browserCanvasContext.fill() -} function dynamicDecimals (value, minDecimals) { if (minDecimals === undefined) { @@ -38,50 +15,6 @@ function dynamicDecimals (value, minDecimals) { return returnValue } -function savePropertyAtNodeConfig (payload, propertyName, value) { - try { - let code = JSON.parse(payload.node.code) - code[propertyName] = value - payload.node.code = JSON.stringify(code, null, 4) - } catch (err) { - // we ignore errors here since most likely they will be parsing errors. - } -} - -function loadPropertyFromNodeConfig (payload, propertyName) { - try { - let code = JSON.parse(payload.node.code) - return code[propertyName] - } catch (err) { - // we ignore errors here since most likely they will be parsing errors. - } -} - -function saveFrame (payload, frame) { - payload.frame = { - position: { - x: frame.position.x, - y: frame.position.y - }, - width: frame.width, - height: frame.height, - radius: frame.radius - } -} - -function loadFrame (payload, frame) { - if (payload.node.savedPayload !== undefined) { - if (payload.node.savedPayload.frame !== undefined) { - frame.position.x = payload.node.savedPayload.frame.position.x - frame.position.y = payload.node.savedPayload.frame.position.y - frame.width = payload.node.savedPayload.frame.width - frame.height = payload.node.savedPayload.frame.height - frame.radius = payload.node.savedPayload.frame.radius - payload.node.savedPayload.frame = undefined - } - } -} - function convertTimeFrameToName (pTimeFrame) { for (let i = 0; i < dailyFilePeriods.length; i++) { let period = dailyFilePeriods[i] @@ -98,84 +31,6 @@ 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('download', filename) - element.style.display = 'none' - document.body.appendChild(element) - element.click() - document.body.removeChild(element) -} - -function downloadCanvas (filename, canvasToUse) { - let data = canvasToUse.toDataURL('image/png', 1) - /* Change MIME type to trick the browser to downlaod the file instead of displaying it */ - data = data.replace(/^data:image\/[^;]*/, 'data:application/octet-stream') - - /* In addition to 's "download" attribute, you can define HTTP-style headers */ - data = data.replace(/^data:application\/octet-stream/, 'data:application/octet-stream;headers=Content-Disposition%3A%20attachment%3B%20filename=' + filename + '.png') - - let element = document.createElement('a') - element.setAttribute('href', data) - element.setAttribute('download', filename + '.PNG') - element.style.display = 'none' - document.body.appendChild(element) - element.click() - document.body.removeChild(element) -}; - -function downloadPanorama (filename) { - let INITIAL_WIDTH = 800 - let FINAL_WIDTH = browserCanvas.width - INITIAL_WIDTH - - if (ARE_WE_RECORDING_A_MARKET_PANORAMA === false) { - /* We start recording the panorame. */ - ARE_WE_RECORDING_A_MARKET_PANORAMA = true - marketPanoramaCanvas = document.createElement('canvas') - marketPanoramaCanvas.width = INITIAL_WIDTH * 50 - marketPanoramaCanvas.height = browserCanvas.height - marketPanoramaCanvas.getContext('2d').drawImage(browserCanvas, 0, 0, INITIAL_WIDTH, browserCanvas.height, 0, 0, INITIAL_WIDTH, browserCanvas.height) - CURRENT_PANORAMA_POSITION = INITIAL_WIDTH - } else { - /* We stop recording and download the resulting image. */ - ARE_WE_RECORDING_A_MARKET_PANORAMA = false - marketPanoramaCanvas.getContext('2d').drawImage(browserCanvas, browserCanvas.width - FINAL_WIDTH, 0, FINAL_WIDTH, browserCanvas.height, CURRENT_PANORAMA_POSITION, 0, FINAL_WIDTH, browserCanvas.height) - let finalResultCanvas = document.createElement('canvas') - finalResultCanvas.width = CURRENT_PANORAMA_POSITION + FINAL_WIDTH - finalResultCanvas.height = browserCanvas.height - finalResultCanvas.getContext('2d').drawImage(marketPanoramaCanvas, 0, 0, finalResultCanvas.width, browserCanvas.height, 0, 0, finalResultCanvas.width, browserCanvas.height) - downloadCanvas(filename, finalResultCanvas) - marketPanoramaCanvas = undefined - } -} - -function addToMarketPanorama () { - let SECTION_WIDTH = 80 * 2 - let INITIAL_POSITION = 800 - SECTION_WIDTH - marketPanoramaCanvas.getContext('2d').drawImage(browserCanvas, INITIAL_POSITION, 0, SECTION_WIDTH, browserCanvas.height, CURRENT_PANORAMA_POSITION, 0, SECTION_WIDTH, browserCanvas.height) - CURRENT_PANORAMA_POSITION = CURRENT_PANORAMA_POSITION + SECTION_WIDTH -} - -function transformThisPoint (point, container) { - /* We make the point relative to the current frame */ - - point = container.frame.frameThisPoint(point) - - /* We pass this point through the canvas.chartingSpace.viewport lends, meaning we apply the canvas.chartingSpace.viewport zoom and displacement. */ - - point = canvas.chartingSpace.viewport.transformThisPoint(point) - - return point -} - -function unTransformThisPoint (point, container) { - point = canvas.chartingSpace.viewport.unTransformThisPoint(point) - point = container.frame.unframeThisPoint(point) - - return point -} - function nextPorwerOf10 (number) { for (let i = -10; i <= 10; i++) { if (number < Math.pow(10, i)) { @@ -189,59 +44,6 @@ function pad (str, max) { return str.length < max ? pad('0' + str, max) : str } -function getDateFromPointAtBrowserCanvas (point, container, coordinateSystem) { - point = unTransformThisPoint(point, container) - point = coordinateSystem.unInverseTransform(point, container.frame.height) - - let date = new Date(point.x) - - return date -} - -function getDateFromPointAtChartsSpace (point, container, coordinateSystem) { - point = container.frame.unframeThisPoint(point) - point = coordinateSystem.unInverseTransform(point, container.frame.height) - - let date = new Date(point.x) - - return date -} - -function getDateFromPointAtContainer (point, container, coordinateSystem) { - point = coordinateSystem.unInverseTransform(point, container.frame.height) - - let date = new Date(point.x) - - return date -} - -function getRateFromPointAtBrowserCanvas (point, container, coordinateSystem) { - point = unTransformThisPoint(point, container) - point = coordinateSystem.unInverseTransform(point, container.frame.height) - - return point.y -} - -function getRateFromPointAtChartingSpace (point, container, coordinateSystem) { - point = container.frame.unframeThisPoint(point) - point = coordinateSystem.unInverseTransform(point, container.frame.height) - - return point.y -} - -function getRateFromPointAtContainer (point, container, coordinateSystem) { - point = coordinateSystem.unInverseTransform(point, container.frame.height) - - return point.y -} - -function getMilisecondsFromPoint (point, container, coordinateSystem) { - point = unTransformThisPoint(point, container) - point = coordinateSystem.unInverseTransform(point, container.frame.height) - - return point.x -} - function moveToUserPosition (container, currentDate, currentRate, coordinateSystem, ignoreX, ignoreY, mousePosition, fitFunction) { let targetPoint = { x: currentDate.valueOf(), @@ -276,50 +78,6 @@ function removeTime (datetime) { return dateOnly } -function printLabel (labelToPrint, x, y, opacity, fontSize, color, center, container, fitFunction, noDecimals, fixedDecimals) { - if (labelToPrint === undefined) { return } - let labelPoint - if (color === undefined) { color = UI_COLOR.DARK } - if (fontSize === undefined) { fontSize = 10 }; - - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY - let label = labelToPrint - if (isNaN(label) === false && label !== '') { - if (fixedDecimals !== true) { - label = dynamicDecimals(labelToPrint) - } - label = label.toLocaleString() - if (noDecimals === true) { - label = Math.trunc(label) - } - } - - let xOffset = label.length / 2 * fontSize * FONT_ASPECT_RATIO - - if (center === true) { - labelPoint = { - x: x - xOffset, - y: y - } - } else { - labelPoint = { - x: x, - y: y - } - } - - if (container !== undefined) { - labelPoint = container.frame.frameThisPoint(labelPoint) - } - - if (fitFunction !== undefined) { - labelPoint = fitFunction(labelPoint) - } - - browserCanvasContext.fillStyle = 'rgba(' + color + ', ' + opacity + ')' - browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) -} - function newUniqueId () { return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) { var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8) diff --git a/Utilities/CoordinateTransformations.js b/Utilities/CoordinateTransformations.js new file mode 100644 index 000000000..9f3f9444d --- /dev/null +++ b/Utilities/CoordinateTransformations.js @@ -0,0 +1,18 @@ +function transformThisPoint (point, container) { + /* We make the point relative to the current frame */ + + point = container.frame.frameThisPoint(point) + + /* We pass this point through the canvas.chartingSpace.viewport lends, meaning we apply the canvas.chartingSpace.viewport zoom and displacement. */ + + point = canvas.chartingSpace.viewport.transformThisPoint(point) + + return point +} + +function unTransformThisPoint (point, container) { + point = canvas.chartingSpace.viewport.unTransformThisPoint(point) + point = container.frame.unframeThisPoint(point) + + return point +} diff --git a/Utilities/DateRateTransformations.js b/Utilities/DateRateTransformations.js new file mode 100644 index 000000000..196c99ecc --- /dev/null +++ b/Utilities/DateRateTransformations.js @@ -0,0 +1,53 @@ +function getDateFromPointAtBrowserCanvas (point, container, coordinateSystem) { + point = unTransformThisPoint(point, container) + point = coordinateSystem.unInverseTransform(point, container.frame.height) + + let date = new Date(point.x) + + return date +} + +function getDateFromPointAtChartsSpace (point, container, coordinateSystem) { + point = container.frame.unframeThisPoint(point) + point = coordinateSystem.unInverseTransform(point, container.frame.height) + + let date = new Date(point.x) + + return date +} + +function getDateFromPointAtContainer (point, container, coordinateSystem) { + point = coordinateSystem.unInverseTransform(point, container.frame.height) + + let date = new Date(point.x) + + return date +} + +function getRateFromPointAtBrowserCanvas (point, container, coordinateSystem) { + point = unTransformThisPoint(point, container) + point = coordinateSystem.unInverseTransform(point, container.frame.height) + + return point.y +} + +function getRateFromPointAtChartingSpace (point, container, coordinateSystem) { + point = container.frame.unframeThisPoint(point) + point = coordinateSystem.unInverseTransform(point, container.frame.height) + + return point.y +} + +function getRateFromPointAtContainer (point, container, coordinateSystem) { + point = coordinateSystem.unInverseTransform(point, container.frame.height) + + return point.y +} + +function getMilisecondsFromPoint (point, container, coordinateSystem) { + point = unTransformThisPoint(point, container) + point = coordinateSystem.unInverseTransform(point, container.frame.height) + + return point.x +} + diff --git a/Utilities/Download.js b/Utilities/Download.js new file mode 100644 index 000000000..39e8e3884 --- /dev/null +++ b/Utilities/Download.js @@ -0,0 +1,58 @@ +function downloadText (filename, text) { + let element = document.createElement('a') + element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text)) + element.setAttribute('download', filename) + element.style.display = 'none' + document.body.appendChild(element) + element.click() + document.body.removeChild(element) +} + +function downloadCanvas (filename, canvasToUse) { + let data = canvasToUse.toDataURL('image/png', 1) + /* Change MIME type to trick the browser to downlaod the file instead of displaying it */ + data = data.replace(/^data:image\/[^;]*/, 'data:application/octet-stream') + + /* In addition to 's "download" attribute, you can define HTTP-style headers */ + data = data.replace(/^data:application\/octet-stream/, 'data:application/octet-stream;headers=Content-Disposition%3A%20attachment%3B%20filename=' + filename + '.png') + + let element = document.createElement('a') + element.setAttribute('href', data) + element.setAttribute('download', filename + '.PNG') + element.style.display = 'none' + document.body.appendChild(element) + element.click() + document.body.removeChild(element) +}; + +function downloadPanorama (filename) { + let INITIAL_WIDTH = 800 + let FINAL_WIDTH = browserCanvas.width - INITIAL_WIDTH + + if (ARE_WE_RECORDING_A_MARKET_PANORAMA === false) { + /* We start recording the panorame. */ + ARE_WE_RECORDING_A_MARKET_PANORAMA = true + marketPanoramaCanvas = document.createElement('canvas') + marketPanoramaCanvas.width = INITIAL_WIDTH * 50 + marketPanoramaCanvas.height = browserCanvas.height + marketPanoramaCanvas.getContext('2d').drawImage(browserCanvas, 0, 0, INITIAL_WIDTH, browserCanvas.height, 0, 0, INITIAL_WIDTH, browserCanvas.height) + CURRENT_PANORAMA_POSITION = INITIAL_WIDTH + } else { + /* We stop recording and download the resulting image. */ + ARE_WE_RECORDING_A_MARKET_PANORAMA = false + marketPanoramaCanvas.getContext('2d').drawImage(browserCanvas, browserCanvas.width - FINAL_WIDTH, 0, FINAL_WIDTH, browserCanvas.height, CURRENT_PANORAMA_POSITION, 0, FINAL_WIDTH, browserCanvas.height) + let finalResultCanvas = document.createElement('canvas') + finalResultCanvas.width = CURRENT_PANORAMA_POSITION + FINAL_WIDTH + finalResultCanvas.height = browserCanvas.height + finalResultCanvas.getContext('2d').drawImage(marketPanoramaCanvas, 0, 0, finalResultCanvas.width, browserCanvas.height, 0, 0, finalResultCanvas.width, browserCanvas.height) + downloadCanvas(filename, finalResultCanvas) + marketPanoramaCanvas = undefined + } +} + +function addToMarketPanorama () { + let SECTION_WIDTH = 80 * 2 + let INITIAL_POSITION = 800 - SECTION_WIDTH + marketPanoramaCanvas.getContext('2d').drawImage(browserCanvas, INITIAL_POSITION, 0, SECTION_WIDTH, browserCanvas.height, CURRENT_PANORAMA_POSITION, 0, SECTION_WIDTH, browserCanvas.height) + CURRENT_PANORAMA_POSITION = CURRENT_PANORAMA_POSITION + SECTION_WIDTH +} diff --git a/Utilities/RoundedCornersBackground.js b/Utilities/DrawPrint.js similarity index 77% rename from Utilities/RoundedCornersBackground.js rename to Utilities/DrawPrint.js index 825400009..4e38f2a0c 100644 --- a/Utilities/RoundedCornersBackground.js +++ b/Utilities/DrawPrint.js @@ -150,3 +150,72 @@ function drawIcon (icon, xFactor, yFactor, xOffset, yOffset, imageSize, containe } } } + +function drawContainerBackground (container, color, opacity, fitFunction) { + let fromPoint = { + x: 0, + y: 0 + } + + let toPoint = { + x: container.frame.width, + y: container.frame.height + } + + fromPoint = transformThisPoint(fromPoint, container) + toPoint = transformThisPoint(toPoint, container) + + fromPoint = fitFunction(fromPoint) + toPoint = fitFunction(toPoint) + + browserCanvasContext.beginPath() + browserCanvasContext.rect(fromPoint.x, fromPoint.y, toPoint.x - fromPoint.x, toPoint.y - fromPoint.y) + browserCanvasContext.fillStyle = 'rgba(' + color + ', ' + opacity + ')' + browserCanvasContext.closePath() + browserCanvasContext.fill() +} + +function printLabel (labelToPrint, x, y, opacity, fontSize, color, center, container, fitFunction, noDecimals, fixedDecimals) { + if (labelToPrint === undefined) { return } + let labelPoint + if (color === undefined) { color = UI_COLOR.DARK } + if (fontSize === undefined) { fontSize = 10 }; + + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY + let label = labelToPrint + if (isNaN(label) === false && label !== '') { + if (fixedDecimals !== true) { + label = dynamicDecimals(labelToPrint) + } + label = label.toLocaleString() + if (noDecimals === true) { + label = Math.trunc(label) + } + } + + let xOffset = label.length / 2 * fontSize * FONT_ASPECT_RATIO + + if (center === true) { + labelPoint = { + x: x - xOffset, + y: y + } + } else { + labelPoint = { + x: x, + y: y + } + } + + if (container !== undefined) { + labelPoint = container.frame.frameThisPoint(labelPoint) + } + + if (fitFunction !== undefined) { + labelPoint = fitFunction(labelPoint) + } + + browserCanvasContext.fillStyle = 'rgba(' + color + ', ' + opacity + ')' + browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) +} + diff --git a/Utilities/LoadSaveFrame.js b/Utilities/LoadSaveFrame.js new file mode 100644 index 000000000..5bda8c98b --- /dev/null +++ b/Utilities/LoadSaveFrame.js @@ -0,0 +1,24 @@ +function saveFrame (payload, frame) { + payload.frame = { + position: { + x: frame.position.x, + y: frame.position.y + }, + width: frame.width, + height: frame.height, + radius: frame.radius + } +} + +function loadFrame (payload, frame) { + if (payload.node.savedPayload !== undefined) { + if (payload.node.savedPayload.frame !== undefined) { + frame.position.x = payload.node.savedPayload.frame.position.x + frame.position.y = payload.node.savedPayload.frame.position.y + frame.width = payload.node.savedPayload.frame.width + frame.height = payload.node.savedPayload.frame.height + frame.radius = payload.node.savedPayload.frame.radius + payload.node.savedPayload.frame = undefined + } + } +} diff --git a/Utilities/NodeConfig.js b/Utilities/NodeConfig.js new file mode 100644 index 000000000..50473c906 --- /dev/null +++ b/Utilities/NodeConfig.js @@ -0,0 +1,18 @@ +function savePropertyAtNodeConfig (payload, propertyName, value) { + try { + let code = JSON.parse(payload.node.code) + code[propertyName] = value + payload.node.code = JSON.stringify(code, null, 4) + } catch (err) { + // we ignore errors here since most likely they will be parsing errors. + } +} + +function loadPropertyFromNodeConfig (payload, propertyName) { + try { + let code = JSON.parse(payload.node.code) + return code[propertyName] + } catch (err) { + // we ignore errors here since most likely they will be parsing errors. + } +}