Text Perfectly Centered
This commit is contained in:
1 parent
b75f420956
commit
20f4d3fa0e
2 files changed
+26
-21
No files matched your search
@@ -1573,6 +1573,8 @@ function newUiObject() {
|
||||
let lineSeparator = thisObject.payload.floatingObject.currentFontSize * 1.2
|
||||
let label
|
||||
|
||||
browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
|
||||
|
||||
if (radius > 6) {
|
||||
const MAX_LABEL_LENGTH = 30
|
||||
|
||||
@@ -1600,7 +1602,7 @@ function newUiObject() {
|
||||
label = label.substring(0, MAX_LABEL_LENGTH) + '...'
|
||||
}
|
||||
labelPoint = {
|
||||
x: position.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO - 5,
|
||||
x: position.x - getTextWidth(label) / 2,
|
||||
y: position.y + radius * 2 / 3 + lineSeparator * 1 + 30
|
||||
}
|
||||
} else {
|
||||
@@ -1610,7 +1612,7 @@ function newUiObject() {
|
||||
for (let i = 0; i < phrases.length; i++) {
|
||||
let phrase = phrases[i]
|
||||
labelPoint = {
|
||||
x: position.x - phrase.length / 2 * fontSize * FONT_ASPECT_RATIO - 5,
|
||||
x: position.x - getTextWidth(phrase) / 2,
|
||||
y: position.y + thisObject.payload.floatingObject.currentImageSize / 2 + lineSeparator * (1 + i)
|
||||
}
|
||||
if (UI.projects.superalgos.spaces.floatingSpace.inMapMode === false) {
|
||||
@@ -1628,7 +1630,6 @@ function newUiObject() {
|
||||
printMessage(label)
|
||||
|
||||
function printMessage(text) {
|
||||
browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
|
||||
browserCanvasContext.fillStyle = thisObject.payload.floatingObject.nameStrokeStyle
|
||||
browserCanvasContext.fillText(text, labelPoint.x, labelPoint.y)
|
||||
}
|
||||
@@ -1683,6 +1684,8 @@ function newUiObject() {
|
||||
let lineSeparator = thisObject.payload.floatingObject.currentFontSize * 1.2
|
||||
let label
|
||||
|
||||
browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
|
||||
|
||||
if (radius > 6) {
|
||||
const IDEAL_LABEL_LENGTH = 80
|
||||
|
||||
@@ -1703,7 +1706,7 @@ function newUiObject() {
|
||||
for (let i = 0; i < phrases.length; i++) {
|
||||
let phrase = phrases[i]
|
||||
labelPoint = {
|
||||
x: position.x - phrase.length / 2 * fontSize * FONT_ASPECT_RATIO - 5,
|
||||
x: position.x - getTextWidth(phrase) / 2,
|
||||
y: position.y + lineSeparator * (6 - phrases.length + 1 + i) + 30
|
||||
}
|
||||
printMessage(phrase)
|
||||
@@ -1711,7 +1714,7 @@ function newUiObject() {
|
||||
} else {
|
||||
if (label.length < 50) {
|
||||
labelPoint = {
|
||||
x: position.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO - 5,
|
||||
x: position.x - getTextWidth(label) / 2,
|
||||
y: position.y + thisObject.payload.floatingObject.currentImageSize / 2 + lineSeparator * 6
|
||||
}
|
||||
printMessage(label)
|
||||
@@ -1719,8 +1722,6 @@ function newUiObject() {
|
||||
}
|
||||
|
||||
function printMessage(text) {
|
||||
browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
|
||||
|
||||
browserCanvasContext.fillStyle = 'rgba(' + textColor + ', 1)'
|
||||
browserCanvasContext.fillText(text, labelPoint.x, labelPoint.y)
|
||||
}
|
||||
@@ -1756,6 +1757,8 @@ function newUiObject() {
|
||||
let lineSeparator = thisObject.payload.floatingObject.currentFontSize * 1.2
|
||||
let label
|
||||
|
||||
browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
|
||||
|
||||
if (radius > 6) {
|
||||
const MAX_LABEL_LENGTH = 65
|
||||
|
||||
@@ -1777,7 +1780,7 @@ function newUiObject() {
|
||||
|
||||
if (thisObject.valueAtAngle === true && thisObject.payload.angle !== undefined) {
|
||||
labelPoint = {
|
||||
x: position.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO - 10,
|
||||
x: position.x - getTextWidth(label) / 2,
|
||||
y: position.y
|
||||
}
|
||||
labelPoint.x = labelPoint.x + radius * 7 / 3 * Math.cos(toRadians(thisObject.payload.angle))
|
||||
@@ -1785,18 +1788,17 @@ function newUiObject() {
|
||||
} else {
|
||||
if (thisObject.isOnFocus === true) {
|
||||
labelPoint = {
|
||||
x: position.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO - 10,
|
||||
x: position.x - getTextWidth(label) / 2,
|
||||
y: position.y + radius * 2 / 3 + lineSeparator * 4 + 30
|
||||
}
|
||||
} else {
|
||||
labelPoint = {
|
||||
x: position.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO - 10,
|
||||
x: position.x - getTextWidth(label) / 2,
|
||||
y: position.y + thisObject.payload.floatingObject.currentImageSize / 2 + lineSeparator * 4
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
|
||||
browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.TURQUOISE + ', 1)'
|
||||
browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y)
|
||||
}
|
||||
@@ -1827,6 +1829,8 @@ function newUiObject() {
|
||||
let lineSeparator = thisObject.payload.floatingObject.currentFontSize * 1.2
|
||||
let label
|
||||
|
||||
browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
|
||||
|
||||
if (radius > 6) {
|
||||
const MAX_LABEL_LENGTH = 65
|
||||
|
||||
@@ -1838,17 +1842,16 @@ function newUiObject() {
|
||||
|
||||
if (thisObject.isOnFocus === true) {
|
||||
labelPoint = {
|
||||
x: position.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO - 5,
|
||||
x: position.x - getTextWidth(label) / 2,
|
||||
y: position.y + radius * 2 / 3 + lineSeparator * 5 + 30
|
||||
}
|
||||
} else {
|
||||
labelPoint = {
|
||||
x: position.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO - 10,
|
||||
x: position.x - getTextWidth(label) / 2,
|
||||
y: position.y + thisObject.payload.floatingObject.currentImageSize / 2 + lineSeparator * 5
|
||||
}
|
||||
}
|
||||
|
||||
browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
|
||||
browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.TURQUOISE + ', 1)'
|
||||
browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y)
|
||||
|
||||
@@ -1877,6 +1880,8 @@ function newUiObject() {
|
||||
let lineSeparator = thisObject.payload.floatingObject.currentFontSize * 1.2
|
||||
let label
|
||||
|
||||
browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
|
||||
|
||||
if (radius > 6) {
|
||||
const MAX_LABEL_LENGTH = 100
|
||||
|
||||
@@ -1889,17 +1894,16 @@ function newUiObject() {
|
||||
|
||||
if (thisObject.isOnFocus === true) {
|
||||
labelPoint = {
|
||||
x: position.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO - 10,
|
||||
x: position.x - getTextWidth(label) / 2,
|
||||
y: position.y + radius * 2 / 3 + lineSeparator * 3 + 30
|
||||
}
|
||||
} else {
|
||||
labelPoint = {
|
||||
x: position.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO - 10,
|
||||
x: position.x - getTextWidth(label) / 2,
|
||||
y: position.y + thisObject.payload.floatingObject.currentImageSize / 2 + lineSeparator * 3
|
||||
}
|
||||
}
|
||||
|
||||
browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
|
||||
browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.TITANIUM_YELLOW + ', 1)'
|
||||
browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y)
|
||||
}
|
||||
|
||||
@@ -316,6 +316,8 @@ function newUiObjectTitle() {
|
||||
let fontSize = thisObject.payload.floatingObject.currentFontSize
|
||||
let label
|
||||
|
||||
browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
|
||||
|
||||
if (radius > 6 && (thisObject.isOnFocus === true || thisObject.allwaysVisible === true || thisObject.isDefault === false)) {
|
||||
browserCanvasContext.strokeStyle = thisObject.payload.floatingObject.typeStrokeStyle
|
||||
|
||||
@@ -327,7 +329,7 @@ function newUiObjectTitle() {
|
||||
label = trimTitle(label)
|
||||
|
||||
labelPoint = {
|
||||
x: -5,
|
||||
x: 0,
|
||||
y: thisObject.container.frame.height * 0.8
|
||||
}
|
||||
|
||||
@@ -335,7 +337,7 @@ function newUiObjectTitle() {
|
||||
|
||||
if (UI.projects.superalgos.spaces.floatingSpace.inMapMode === true) {
|
||||
labelPoint = UI.projects.superalgos.spaces.floatingSpace.transformPointToMap(labelPoint)
|
||||
labelPoint.x = labelPoint.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO
|
||||
labelPoint.x = labelPoint.x - getTextWidth(label) / 2,
|
||||
labelPoint.y = labelPoint.y - 35
|
||||
|
||||
let nodeDefinition = getNodeDefinition(thisObject.payload.node)
|
||||
@@ -366,7 +368,7 @@ function newUiObjectTitle() {
|
||||
for (let i = 0; i < phrases.length; i++) {
|
||||
let phrase = phrases[i]
|
||||
let point = {
|
||||
x: labelPoint.x - phrase.length / 2 * fontSize * FONT_ASPECT_RATIO + FRAME_WIDTH / 2,
|
||||
x: labelPoint.x - getTextWidth(phrase) / 2 + FRAME_WIDTH / 2,
|
||||
y: labelPoint.y - lineSeparator * (phrases.length - 1 - i)
|
||||
}
|
||||
|
||||
@@ -375,7 +377,6 @@ function newUiObjectTitle() {
|
||||
}
|
||||
}
|
||||
function printMessage(text, position) {
|
||||
browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
|
||||
browserCanvasContext.fillStyle = thisObject.payload.floatingObject.nameStrokeStyle
|
||||
browserCanvasContext.fillText(text, position.x, position.y)
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user