text-to-svg/server.js

// const express = require('express')
// const TextToSVG = require('text-to-svg')
// const fs = require('fs')
// const textToSVG = TextToSVG.loadSync('./static/Dubai-Bold.otf')
// const app = express()

// const lineLengthviewer = (oneLineText) => { //to view the length of each line by pixel
//     let {width} = textToSVG.getMetrics(oneLineText, options = {fontSize: 14}) 
//     console.log('This line width is: ', width)
// }


// let svgFormat = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="" > ' //header of a svg xml
// let text = 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.' 

// const panelSize = 100
// let totalTextHeightOnScreen = 0
// let totalSeparatedLength = 0
// let x = 800 //starting position of each line on screen:
// let y = 50

// text += text 
// const totalTextLength = text.length

// while (true) {
//     let separatedLine = ''
//     let wordIncrementer = 0
    
//     while (true){
//         try {
            
//             let word = text.split(' ')[wordIncrementer] + ' ' 
//             let {width} = textToSVG.getMetrics(separatedLine+word, options={fontSize: 14})
//             if(width >= panelSize) break
//             if(word === 'undefined ') break
//             separatedLine += word 
//             wordIncrementer++
//         } catch (err) {
//             console.error('Error: ', err.message)
//             break 
//         }

//     }
 
//     let svgPath = textToSVG.getPath(separatedLine, options = {x: x, y: y, fontSize: 14, anchor: 'right'})   
//     svgFormat += svgPath
    
//     lineLengthviewer(separatedLine)

//     let {height} = textToSVG.getMetrics(text, options = {fontSize: 14})

//     y+= height
//     totalTextHeightOnScreen += height; //to calculate the total text height on screen 
//     totalSeparatedLength += separatedLine.length
//     if(totalTextLength <= totalSeparatedLength) break 
    
//     text = text.substring(separatedLine.length)  
// }

// svgFormat += '</svg>' 
// svgFormat = svgFormat.replaceAll('"/><path d="', ' ')
// svgFormat = svgFormat.replace ('height=""', `height="${parseInt(totalTextHeightOnScreen + 50)}"`)

// fs.writeFileSync('./static/mySVG.svg', svgFormat, {'flag': 'w+'})

const express = require('express')
const TextToSVG = require('text-to-svg')
const fs = require('fs')
const textToSVG = TextToSVG.loadSync('./static/Dubai-Bold.otf')
const app = express()
const path = require('path')

const lineLengthviewer = (oneLineText, fontSize) => { //to view the length of each line by pixel
    let {width} = textToSVG.getMetrics(oneLineText, options = {fontSize: fontSize}) 
    console.log('This line width is: ', width)
}

app.use(express.json())

app.post('/textToSVG', (req, res) => {
    console.log(req);
    console.log(req.body);
    let text = req.body.text
    let screenSize = req.body.screenSize
    let userFontSize = req.body.fontSize

    let svgFormat = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="" > ' //header of a svg xml

    let totalTextHeightOnScreen = 0
    let totalSeparatedLength = 0
    let x = 800 //starting position of each line on screen:
    let y = 50

    const totalTextLength = text.length


    while (true) {
        let separatedLine = ''
        let wordIncrementer = 0
        
        while (true){
            try {
                
                let word = text.split(' ')[wordIncrementer] + ' ' 
                let {width} = textToSVG.getMetrics(separatedLine+word, options={fontSize: userFontSize})
                if(width >= screenSize) break
                if(word === 'undefined ') break
                separatedLine += word 
                wordIncrementer++
            } catch (err) {
                console.error('Error: ', err.message)
                break 
            }
    
        }
     
        let svgPath = textToSVG.getPath(separatedLine, options = {x: x, y: y, fontSize: userFontSize, anchor: 'right'})   
        svgFormat += svgPath
        
        lineLengthviewer(separatedLine, userFontSize)
    
        let {height} = textToSVG.getMetrics(text, options = {fontSize: userFontSize})
    
        y+= height
        totalTextHeightOnScreen += height; //to calculate the total text height on screen 
        totalSeparatedLength += separatedLine.length
        if(totalTextLength <= totalSeparatedLength) break 
        
        text = text.substring(separatedLine.length)  
    }

    svgFormat += '</svg>' 
    svgFormat = svgFormat.replaceAll('"/><path d="', ' ')
    svgFormat = svgFormat.replace ('height=""', `height="${parseInt(totalTextHeightOnScreen + 50)}"`)

    fs.writeFileSync('./static/mySVG.svg', svgFormat, {'flag': 'w+'})

    res.status(201).sendFile('./static/mySVG.svg')
})

app.get('/getSVG', (req, res) => {
    const filePath = path.join(__dirname, '/static/mySVG.svg')
    console.log(filePath)
    res.status(200).sendFile(filePath)
})

const port = process.env.PORT || 3000
app.listen(port, () => { 
    console.log('App is listening on port ', port); 
});