make info separator line bold, modify middle newspaper quote padding

frontend/src/views/newspaper_quote_bottom/canvas.js

@@ -50,7 +50,7 @@ const redraw = async (canvas, options) => {
 
     const nameTextMarginTop = Math.ceil(canvas.height * 0.025)
     const positionTextSideGap = Math.ceil(canvas.width * 0.01)
-    const positionTextSeparatorWidth = Math.ceil(canvas.width * 0.002)
+    const positionTextSeparatorWidth = Math.ceil(canvas.width * 0.0035)
     const positionTextMaxWidth = Math.ceil(canvas.width * 0.4)
 
     const bottomTextSize = Math.ceil(canvas.height * 0.03)

frontend/src/views/newspaper_quote_middle/canvas.js

@@ -9,7 +9,9 @@ import quoteImageURL from '../../assets/template/newspaper_quote/quote.svg'
 let mainTextBox = null
 let mainTextBoxForeground = null
 
-let personInfoText = null
+let personNameText = null
+let personInfoSeparator = null
+let personPositionText = null
 let sourceText = null
 
 let logoImage = null
@@ -34,7 +36,9 @@ const redraw = async (canvas, options) => {
             background,
             mainTextBox,
             mainTextBoxForeground,
-            personInfoText,
+            personNameText,
+            personInfoSeparator,
+            personPositionText,
             leftQuote,
             rightQuote,
             topTear,
@@ -54,6 +58,8 @@ const redraw = async (canvas, options) => {
     const mainTextLineHeight = 1.3
 
     const nameTextMarginTop = Math.ceil(canvas.height * 0.025)
+    const positionTextSideGap = Math.ceil(canvas.width * 0.01)
+    const positionTextSeparatorWidth = Math.ceil(canvas.width * 0.0035)
 
     const bottomTextSize = Math.ceil(canvas.height * 0.03)
     const additionalContentExtraBottomPadding = Math.ceil(canvas.height * 0.03)
@@ -69,10 +75,12 @@ const redraw = async (canvas, options) => {
 
     const quoteHeight = Math.ceil(canvas.height * 0.042)
 
-    const leftQuoteMarginSide = Math.ceil(canvas.width * 0.06)
+    const leftQuoteMarginSide = Math.ceil(canvas.width * 0.065)
+    const leftQuoteMarginSideExtra = Math.ceil(canvas.width * -0.005)
     const leftQuoteMarginTop = 0
 
-    const rightQuoteMarginSide = Math.ceil(canvas.width * 0.025)
+    const rightQuoteMarginSide = Math.ceil(canvas.width * 0.0175)
+    const rightQuoteMarginSideExtra = Math.ceil(canvas.width * 0.005)
     const rightQuoteMarginTop = 0
 
     const topTearMarginBottom = Math.ceil(canvas.height * 0.225)
@@ -113,18 +121,8 @@ const redraw = async (canvas, options) => {
                 }
             }
 
-            let nameText = options.personName;
-
-            if (options.personPosition) {
-                nameText += `｜${options.personPosition}`
-
-                styles[0][options.personName.length] = {
-                    fontWeight: 'bold'
-                }
-            }
-
-            personInfoText = new fabric.Text(
-                nameText,
+            personNameText = new fabric.Text(
+                options.personName,
                 {
                     left: textMarginSides,
                     top: (
@@ -142,7 +140,39 @@ const redraw = async (canvas, options) => {
                 }
             )
 
-            canvas.add(personInfoText)
+            canvas.add(personNameText)
+
+            if (options.personPosition !== null) {
+                personInfoSeparator = new fabric.Rect({
+                    left: personNameText.left + personNameText.width + positionTextSideGap,
+                    top: personNameText.top,
+                    width: positionTextSeparatorWidth,
+                    fill: options.colors.baseText.value,
+                    selectable: false,
+                    zIndex: 10
+                })
+ 
+                canvas.add(personInfoSeparator)
+
+                personPositionText = new fabric.Text(
+                    options.personPosition,
+                    {
+                        left: personInfoSeparator.left + personInfoSeparator.width + positionTextSideGap,
+                        top: personNameText.top,
+                        fontFamily: 'Roboto Condensed',
+                        fontSize: bottomTextSize,
+                        fill: options.colors.baseText.value,
+                        selectable: false,
+                        zIndex: 10
+                    }
+                )
+
+                checkTextBoxHeight(personPositionText, 2)
+
+                canvas.add(personPositionText)
+                personInfoSeparator.set({height: personPositionText.height})
+                canvas.renderAll()
+            }
         }
 
         /* END Name text render */
@@ -221,7 +251,13 @@ const redraw = async (canvas, options) => {
         })
         leftQuote.scaleToHeight(quoteHeight)
         leftQuote.set({
-            left: leftQuoteMarginSide,
+            left: (
+                leftQuoteMarginSide
+                + (
+                    (options.mainText[0] === "*") ?
+                    leftQuoteMarginSideExtra : 0
+                )
+            ),
             top: mainTextBox.top + leftQuoteMarginTop
         })
 
@@ -243,6 +279,10 @@ const redraw = async (canvas, options) => {
                 mainTextBox.left
                 + mainTextBox.__lineWidths[mainTextBox.__lineWidths.length - 1]
                 + rightQuoteMarginSide
+                + (
+                    (options.mainText[options.mainText.length - 1] === "*") ?
+                    rightQuoteMarginSideExtra : 0
+                )
             ),
             top: (
                 mainTextBox.top