360 lines
14 KiB
JavaScript
360 lines
14 KiB
JavaScript
function newFoundationsUtilitiesDrawPrint() {
|
|
let thisObject = {
|
|
roundedCornersBackground: roundedCornersBackground,
|
|
drawLabel: drawLabel,
|
|
drawIcon: drawIcon,
|
|
drawContainerBackground: drawContainerBackground,
|
|
printLabel: printLabel
|
|
}
|
|
|
|
return thisObject
|
|
|
|
function roundedCornersBackground(params) {
|
|
if (params.xOffset === undefined) { params.xOffset = 0 }
|
|
borderPoint1 = {
|
|
x: params.cornerRadius + params.xOffset,
|
|
y: params.cornerRadius
|
|
}
|
|
|
|
borderPoint2 = {
|
|
x: params.container.frame.width - params.cornerRadius,
|
|
y: params.cornerRadius
|
|
}
|
|
|
|
borderPoint3 = {
|
|
x: params.container.frame.width - params.cornerRadius,
|
|
y: params.container.frame.height - params.cornerRadius
|
|
}
|
|
|
|
borderPoint4 = {
|
|
x: params.cornerRadius + params.xOffset,
|
|
y: params.container.frame.height - params.cornerRadius
|
|
}
|
|
|
|
/* Now the transformations. */
|
|
|
|
if (params.coordinateSystem !== undefined) { // For instance Candles would use this
|
|
borderPoint1 = params.coordinateSystem.transformThisPoint(borderPoint1)
|
|
borderPoint2 = params.coordinateSystem.transformThisPoint(borderPoint2)
|
|
borderPoint3 = params.coordinateSystem.transformThisPoint(borderPoint3)
|
|
borderPoint4 = params.coordinateSystem.transformThisPoint(borderPoint4)
|
|
} else {
|
|
if (params.outsideViewPort === true) { // If the element is not affected by zoom
|
|
borderPoint1 = UI.projects.foundations.utilities.coordinateTransformations.transformThisPoint(borderPoint1, params.container)
|
|
borderPoint2 = UI.projects.foundations.utilities.coordinateTransformations.transformThisPoint(borderPoint2, params.container)
|
|
borderPoint3 = UI.projects.foundations.utilities.coordinateTransformations.transformThisPoint(borderPoint3, params.container)
|
|
borderPoint4 = UI.projects.foundations.utilities.coordinateTransformations.transformThisPoint(borderPoint4, params.container)
|
|
} else { // For instance Panels use this
|
|
borderPoint1 = params.container.frame.frameThisPoint(borderPoint1)
|
|
borderPoint2 = params.container.frame.frameThisPoint(borderPoint2)
|
|
borderPoint3 = params.container.frame.frameThisPoint(borderPoint3)
|
|
borderPoint4 = params.container.frame.frameThisPoint(borderPoint4)
|
|
}
|
|
}
|
|
|
|
if (params.fitFunction !== undefined) {
|
|
borderPoint1 = params.fitFunction(borderPoint1)
|
|
borderPoint2 = params.fitFunction(borderPoint2)
|
|
borderPoint3 = params.fitFunction(borderPoint3)
|
|
borderPoint4 = params.fitFunction(borderPoint4)
|
|
}
|
|
|
|
browserCanvasContext.setLineDash([]) // Resets Line Dash
|
|
|
|
/* Shadow */
|
|
|
|
if (params.castShadow === true) {
|
|
let SHADOW_OFFSET = 2
|
|
|
|
browserCanvasContext.beginPath()
|
|
|
|
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()
|
|
|
|
browserCanvasContext.lineWidth = 10
|
|
browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.BLACK + ', ' + 0.01 + ')'
|
|
browserCanvasContext.stroke()
|
|
|
|
browserCanvasContext.lineWidth = 5
|
|
browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.BLACK + ', ' + 0.01 + ')'
|
|
browserCanvasContext.stroke()
|
|
|
|
browserCanvasContext.lineWidth = 1
|
|
browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.BLACK + ', ' + 0.15 + ')'
|
|
browserCanvasContext.stroke()
|
|
}
|
|
|
|
/* Background */
|
|
|
|
browserCanvasContext.beginPath()
|
|
|
|
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()
|
|
|
|
browserCanvasContext.fillStyle = 'rgba(' + params.backgroundColor + ', ' + params.opacity + ')'
|
|
|
|
browserCanvasContext.fill()
|
|
|
|
browserCanvasContext.lineWidth = params.lineWidth
|
|
browserCanvasContext.strokeStyle = 'rgba(' + params.borderColor + ', ' + params.opacity + ')'
|
|
browserCanvasContext.stroke()
|
|
}
|
|
|
|
function drawLabel(label, xFactor, yFactor, xOffset, yOffset, fontSize, container, fontColor, noFrameX, noFrameY, opacity) {
|
|
if (label === undefined) { return }
|
|
if (fontColor === undefined) { fontColor = UI_COLOR.WHITE }
|
|
let fontOffset = label.length * fontSize * FONT_ASPECT_RATIO + 10
|
|
if (opacity === undefined) { opacity = 1 }
|
|
|
|
let labelPoint = {
|
|
x: container.frame.width * xFactor + xOffset - fontOffset / 2,
|
|
y: container.frame.height * yFactor + yOffset
|
|
}
|
|
|
|
labelPoint = container.frame.frameThisPoint(labelPoint)
|
|
|
|
if (noFrameX !== undefined) {
|
|
labelPoint.x = noFrameX + xOffset
|
|
}
|
|
|
|
if (noFrameY !== undefined) {
|
|
labelPoint.y = noFrameY + yOffset
|
|
}
|
|
|
|
browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
|
|
browserCanvasContext.fillStyle = 'rgba(' + fontColor + ', ' + opacity + ')'
|
|
|
|
browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y)
|
|
}
|
|
|
|
function drawIcon(icon, xFactor, yFactor, xOffset, yOffset, imageSize, container) {
|
|
if (icon !== undefined) {
|
|
if (icon.canDrawIcon === true) {
|
|
let imagePosition = {
|
|
x: container.frame.width * xFactor + xOffset - imageSize / 2,
|
|
y: container.frame.height * yFactor + yOffset - imageSize / 2
|
|
}
|
|
|
|
imagePosition = container.frame.frameThisPoint(imagePosition)
|
|
|
|
browserCanvasContext.drawImage(
|
|
icon, imagePosition.x,
|
|
imagePosition.y,
|
|
imageSize,
|
|
imageSize)
|
|
}
|
|
}
|
|
}
|
|
|
|
function drawContainerBackground(container, color, opacity, fitFunction) {
|
|
let fromPoint = {
|
|
x: 0,
|
|
y: 0
|
|
}
|
|
|
|
let toPoint = {
|
|
x: container.frame.width,
|
|
y: container.frame.height
|
|
}
|
|
|
|
fromPoint = UI.projects.foundations.utilities.coordinateTransformations.transformThisPoint(fromPoint, container)
|
|
toPoint = UI.projects.foundations.utilities.coordinateTransformations.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,
|
|
xLeft,
|
|
xRight,
|
|
xCenter,
|
|
y,
|
|
opacity,
|
|
fontSize,
|
|
color,
|
|
align,
|
|
container,
|
|
fitFunction,
|
|
noDecimals,
|
|
fixedDecimals,
|
|
minDecimals,
|
|
simulateMonospace
|
|
) {
|
|
|
|
let isItANumber
|
|
let labelPoint
|
|
let label = labelToPrint
|
|
|
|
if (labelToPrint === undefined) { return }
|
|
if (color === undefined) { color = UI_COLOR.DARK }
|
|
if (fontSize === undefined) { fontSize = 10 }
|
|
if (isNaN(label) === false && label !== '') { isItANumber = true }
|
|
|
|
if (isItANumber === true && Number(label) > 1000000000000) {
|
|
label = "Very Large Number"
|
|
isItANumber = false
|
|
}
|
|
|
|
browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
|
|
|
|
if (isItANumber === true) {
|
|
if (fixedDecimals !== true) {
|
|
label = dynamicDecimals(labelToPrint, minDecimals)
|
|
}
|
|
label = label.toLocaleString()
|
|
if (noDecimals === true) {
|
|
label = Math.trunc(label)
|
|
}
|
|
}
|
|
|
|
switch (align) {
|
|
case 'Center': {
|
|
labelPoint = {
|
|
x: xCenter - getTextWidth(label) / 2,
|
|
y: y
|
|
}
|
|
break
|
|
}
|
|
case 'Left': {
|
|
labelPoint = {
|
|
x: xLeft,
|
|
y: y
|
|
}
|
|
break
|
|
}
|
|
case 'Right': {
|
|
labelPoint = {
|
|
x: xRight - getTextWidth(label),
|
|
y: y
|
|
}
|
|
break
|
|
}
|
|
case 'Left Numbers at Right': {
|
|
if (isItANumber === true) {
|
|
labelPoint = {
|
|
x: xRight - getTextWidth(label),
|
|
y: y
|
|
}
|
|
} else {
|
|
labelPoint = {
|
|
x: xLeft,
|
|
y: y
|
|
}
|
|
}
|
|
break
|
|
}
|
|
default: {
|
|
labelPoint = {
|
|
x: xCenter - getTextWidth(label) / 2,
|
|
y: y
|
|
}
|
|
}
|
|
}
|
|
if (isItANumber === true && simulateMonospace === true) {
|
|
labelPoint = {
|
|
x: xRight,
|
|
y: y
|
|
}
|
|
}
|
|
|
|
if (container !== undefined) {
|
|
labelPoint = container.frame.frameThisPoint(labelPoint)
|
|
}
|
|
|
|
if (fitFunction !== undefined) {
|
|
labelPoint = fitFunction(labelPoint)
|
|
}
|
|
|
|
if (isItANumber === true && simulateMonospace === true) {
|
|
let isDecimal = false
|
|
let hasDecimals
|
|
let decimalCounter = 0
|
|
let integerCounter = 0
|
|
let characterOpacity = opacity
|
|
let characterFontSize = fontSize
|
|
let insignificantZeroPossible = true
|
|
let insignificantPointPossible = false
|
|
|
|
if (label.indexOf('.') >= 0) {
|
|
hasDecimals = true
|
|
isDecimal = true
|
|
}
|
|
|
|
for (let i = 0; i < label.length; i++) {
|
|
characterOpacity = opacity
|
|
|
|
let character = label[label.length - 1 - i]
|
|
|
|
if (hasDecimals === true && character === '.') {
|
|
isDecimal = false
|
|
characterFontSize = fontSize * 2
|
|
} else {
|
|
characterFontSize = fontSize
|
|
}
|
|
|
|
if (character === '.') {
|
|
if (insignificantPointPossible === true) {
|
|
characterOpacity = opacity / 4
|
|
}
|
|
}
|
|
|
|
if (hasDecimals === true && character === '0' && insignificantZeroPossible === true) {
|
|
characterOpacity = opacity / 4
|
|
insignificantPointPossible = true
|
|
} else {
|
|
insignificantZeroPossible = false
|
|
insignificantPointPossible = false
|
|
}
|
|
|
|
labelPoint.x = labelPoint.x - fontSize * FONT_ASPECT_RATIO * 1.5
|
|
|
|
browserCanvasContext.font = characterFontSize + 'px ' + UI_FONT.PRIMARY
|
|
browserCanvasContext.fillStyle = 'rgba(' + color + ', ' + characterOpacity + ')'
|
|
browserCanvasContext.fillText(character, labelPoint.x, labelPoint.y)
|
|
|
|
if (isDecimal === true) {
|
|
decimalCounter++
|
|
if (decimalCounter === 5) {
|
|
labelPoint.x = labelPoint.x - fontSize * FONT_ASPECT_RATIO * 1.5 / 2
|
|
}
|
|
}
|
|
|
|
if (isDecimal === false && character !== '.') {
|
|
integerCounter++
|
|
if (integerCounter === 3) {
|
|
labelPoint.x = labelPoint.x - fontSize * FONT_ASPECT_RATIO * 1.5 / 2
|
|
integerCounter = 0
|
|
}
|
|
}
|
|
}
|
|
}
|
|
else {
|
|
browserCanvasContext.fillStyle = 'rgba(' + color + ', ' + opacity + ')'
|
|
browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y)
|
|
}
|
|
}
|
|
}
|