Utilities Functions Reorganized

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 <a>'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)

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
+}

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
+}
+

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 <a>'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
+}

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)
+}
+

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
+    }
+  }
+}

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.
+  }
+}