Skip to content

A
a-doc-editor
Commit 4bea5711 by ramdayalmunda
Options

handling font size completed

parent 65736c13
Showing with 2227 additions and 19 deletions
a-doc-editor-node.js
let isModule = (typeof module != 'undefined') ? true : false let isModule = (typeof module != 'undefined') ? true : false
const { jsPDF } = require("jspdf");
const { createCanvas } = require('canvas') const { createCanvas } = require('canvas')
var ADocEditor = function (customConfig) { var ADocEditor = function (customConfig) {
var counter = 7 var counter = 7
...@@ -348,10 +349,68 @@ var ADocEditor = function (customConfig) { ...@@ -348,10 +349,68 @@ var ADocEditor = function (customConfig) {
} }
function generatePDF(e){ function generatePDF(fileName) {
if (isModule){ if (isModule) {
console.log('to generate PDF on Server side') console.log('to generate PDF on Server side', config.pageSetup)
}else{
const doc = new jsPDF('l', 'px', [660, 1260]);
let canvasIndex = 0;
let x = 0
let y = (config.format.margin * config.pageSetup.canvasMultiplier)
let maxVericalWidth = (config.pageSetup.canvasHeight - config.format.margin * config.pageSetup.canvasMultiplier * 2)
for (let l = 0; l < lines.length; l++) {
x = (config.format.margin * config.pageSetup.canvasMultiplier);
y += lines[l].maxFontSize
if (lines[l].blockStart && l != 0) y += lines[l].maxFontSize
if ((maxVericalWidth + lines[l].maxFontSize) < (y - lines[l].maxFontSize)) {
canvasIndex++
doc.addPage()
console.log('new page added')
y = lines[l].maxFontSize + (config.format.margin * config.pageSetup.canvasMultiplier)
}
let setData = dataSet[lines[l].dataSetIndex]
lines[l].y = y
if (lines[l].listIndex >= 0) {
let totalTabDistance = config.format.tabWidth * config.pageSetup.canvasMultiplier * (lines[l].tabCount + 1)
x += totalTabDistance;
let numberX = x - config.format.tabWidth * config.pageSetup.canvasMultiplier / 2
if (lines[l].blockStart) {
let style = {
...config.style,
...setData.style
}
}
}
lines[l].x = x
lines[l].canvasIndex = canvasIndex
for (let c = lines[l].charStartIndex; c <= lines[l].charEndIndex; c++) {
let char = setData?.plainContent[c]
if (char) {
let style = setData.formatedText[c]
doc.setFont('times')
doc.setFontSize(style.fontSize)
doc.text( char, x, y )
// ctx.font = `${style?.bold ? 'bold ' : ''}${style?.italic ? 'italic ' : ''} ${style.fontSize}px ${style.fontFamily}`
// ctx.fillStyle = `${style?.fontColor}`
// ctx.fillText(char, x, y)
setData.formatedText[c].x = x
setData.formatedText[c].y = y
if (setData.formatedText[c]?.width) {
x += setData.formatedText[c]?.width
}
}
}
}
doc.save(fileName);
} else {
console.log('to generate PDF on browser') console.log('to generate PDF on browser')
} }
} }
......
dist/assets/a-doc-editor.css
...@@ -110,7 +110,7 @@ ...@@ -110,7 +110,7 @@
.a-doc-editor .body .scrolling-area canvas.page { .a-doc-editor .body .scrolling-area canvas.page {
background: #f3f3f3; background: #f3f3f3;
margin-bottom: 10px; margin-bottom: 10px;
width: 100%; /* width: 100%; */
box-shadow: 4px 0px 10px 4px rgba(0, 0, 0, 0.4); box-shadow: 4px 0px 10px 4px rgba(0, 0, 0, 0.4);
} }
......
dist/assets/a-doc-editor.js
...@@ -20,8 +20,8 @@ var ADocEditor = function (customConfig) { ...@@ -20,8 +20,8 @@ var ADocEditor = function (customConfig) {
tabWidth: 20, tabWidth: 20,
}, },
style: { style: {
fontSize: 30, fontSize: 12,
fontFamily: 'Arial', fontFamily: 'times',
bold: false, bold: false,
italic: false, italic: false,
fontColor: "#001" fontColor: "#001"
...@@ -44,9 +44,9 @@ var ADocEditor = function (customConfig) { ...@@ -44,9 +44,9 @@ var ADocEditor = function (customConfig) {
}, },
] ]
// // paragraphs // this line is added only for testing please remove this on completion // // paragraphs // this line is added only for testing please remove this on completion
dataSet = JSON.parse('[{"id":1,"type":0,"formatedText":[],"plainContent":"Rendering text in HTML canvas involves using the CanvasRenderingContext2D interface to display text content within a canvas element. This process allows for dynamic text display, enabling the creation of custom text effects, labels, captions, or textual elements within the canvas.","style":{"fontSize":30,"fontFamily":"Arial","bold":false,"italic":false,"fontColor":"#001"}},{"id":2,"type":0,"plainContent":"To render text on a canvas, developers typically use the fillText() method provided by the Canvas API. This method allows the specification of text content, font styles, position, and color. Additionally, the measureText() method helps in determining the width of text, facilitating accurate positioning and layout arrangements.","style":{"fontSize":30,"fontFamily":"Arial","bold":false,"italic":false,"fontColor":"#001"}},{"id":3,"type":0,"plainContent":"Text in canvas can be customized by setting various font properties like font family, font size, style (bold, italic), alignment, and color. However, canvas text rendering lacks the text reflow and responsive layout capabilities inherent in HTML and CSS.","style":{"fontSize":30,"fontFamily":"Arial","bold":false,"italic":false,"fontColor":"#001"}},{"id":4,"type":0,"plainContent":"Despite its intricacies, canvas text rendering offers unparalleled creative freedom, enabling the development of immersive graphical experiences, custom typography, and visually stunning representations that enhance user engagement and interactivity within web-based applications and games.","style":{"fontSize":30,"fontFamily":"Arial","bold":false,"italic":false,"fontColor":"#001"}},{"id":5,"type":0,"plainContent":"Developers often use canvas text rendering to create graphical representations of text-based information, such as game interfaces, data visualizations, charts, and diagrams. Despite its flexibility in text manipulation and artistic possibilities, rendering text in canvas may require additional manual adjustments for formatting, spacing, and alignment compared to traditional HTML text rendering.","style":{"fontSize":30,"fontFamily":"Arial","bold":false,"italic":false,"fontColor":"#001"}}]') dataSet = JSON.parse('[{"id":1,"type":0,"formatedText":[],"plainContent":"Rendering text in HTML canvas involves using the CanvasRenderingContext2D interface to display text content within a canvas element. This process allows for dynamic text display, enabling the creation of custom text effects, labels, captions, or textual elements within the canvas.","style":{"fontSize":12,"fontFamily":"Arial","bold":false,"italic":false,"fontColor":"#001"}},{"id":2,"type":0,"plainContent":"To render text on a canvas, developers typically use the fillText() method provided by the Canvas API. This method allows the specification of text content, font styles, position, and color. Additionally, the measureText() method helps in determining the width of text, facilitating accurate positioning and layout arrangements.","style":{"fontSize":12,"fontFamily":"Arial","bold":false,"italic":false,"fontColor":"#001"}},{"id":3,"type":0,"plainContent":"Text in canvas can be customized by setting various font properties like font family, font size, style (bold, italic), alignment, and color. However, canvas text rendering lacks the text reflow and responsive layout capabilities inherent in HTML and CSS.","style":{"fontSize":12,"fontFamily":"Arial","bold":false,"italic":false,"fontColor":"#001"}},{"id":4,"type":0,"plainContent":"Despite its intricacies, canvas text rendering offers unparalleled creative freedom, enabling the development of immersive graphical experiences, custom typography, and visually stunning representations that enhance user engagement and interactivity within web-based applications and games.","style":{"fontSize":12,"fontFamily":"Arial","bold":false,"italic":false,"fontColor":"#001"}},{"id":5,"type":0,"plainContent":"Developers often use canvas text rendering to create graphical representations of text-based information, such as game interfaces, data visualizations, charts, and diagrams. Despite its flexibility in text manipulation and artistic possibilities, rendering text in canvas may require additional manual adjustments for formatting, spacing, and alignment compared to traditional HTML text rendering.","style":{"fontSize":12,"fontFamily":"Arial","bold":false,"italic":false,"fontColor":"#001"}}]')
// // lists // this line is added only for testing please remove this on completion // // lists // this line is added only for testing please remove this on completion
dataSet = JSON.parse('[{"id":1,"type":0,"plainContent":"Here is a list of household items you need to buy if you are relocating and don\'t have anything with you","style":{"fontSize":30,"fontFamily":"Arial","bold":false,"italic":false,"fontColor":"#003"},"formatedText":[]},{"id":2,"type":1,"tabCount":0,"plainContent":"Recipie book for vegetarian noodles","style":{"fontSize":30,"fontFamily":"Arial","bold":false,"italic":false,"fontColor":"#003"},"formatedText":[]},{"id":3,"type":1,"tabCount":0,"plainContent":"Noodles","style":{"fontSize":30,"fontFamily":"Arial","bold":false,"italic":false,"fontColor":"#003"},"formatedText":[]},{"id":5,"type":1,"tabCount":0,"plainContent":"Garlic","style":{"fontSize":30,"fontFamily":"Arial","bold":false,"italic":false,"fontColor":"#003"},"formatedText":[]},{"id":6,"type":1,"tabCount":0,"plainContent":"Some School stationaries for Arvind","style":{"fontSize":30,"fontFamily":"Arial","bold":false,"italic":false,"fontColor":"#003"},"formatedText":[]},{"id":7,"type":1,"tabCount":1,"plainContent":"Full pack of pen","style":{"fontSize":30,"fontFamily":"Arial","bold":false,"italic":false,"fontColor":"#003"},"formatedText":[]},{"id":8,"type":1,"tabCount":1,"plainContent":"Drawing kit","style":{"fontSize":30,"fontFamily":"Arial","bold":false,"italic":false,"fontColor":"#003"},"formatedText":[]},{"id":9,"type":1,"tabCount":1,"plainContent":"2 register size notebook","style":{"fontSize":30,"fontFamily":"Arial","bold":false,"italic":false,"fontColor":"#003"},"formatedText":[]},{"id":10,"type":1,"tabCount":0,"plainContent":"Window shields","style":{"fontSize":30,"fontFamily":"Arial","bold":false,"italic":false,"fontColor":"#003"},"formatedText":[]},{"id":11,"type":1,"tabCount":0,"plainContent":"Mosquito repelant","style":{"fontSize":30,"fontFamily":"Arial","bold":false,"italic":false,"fontColor":"#003"},"formatedText":[]}]') dataSet = JSON.parse('[{"id":1,"type":0,"plainContent":"Here is a list of household items you need to buy if you are relocating and don\'t have anything with you but you still want go there and settle down.","style":{"fontSize":12,"fontFamily":"Arial","bold":false,"italic":false,"fontColor":"#003"},"formatedText":[]},{"id":2,"type":1,"tabCount":0,"plainContent":"Recipie book for vegetarian noodles","style":{"fontSize":12,"fontFamily":"Arial","bold":false,"italic":false,"fontColor":"#003"},"formatedText":[]},{"id":3,"type":1,"tabCount":0,"plainContent":"Noodles","style":{"fontSize":12,"fontFamily":"Arial","bold":false,"italic":false,"fontColor":"#003"},"formatedText":[]},{"id":5,"type":1,"tabCount":0,"plainContent":"Garlic","style":{"fontSize":12,"fontFamily":"Arial","bold":false,"italic":false,"fontColor":"#003"},"formatedText":[]},{"id":6,"type":1,"tabCount":0,"plainContent":"Some School stationaries for Arvind","style":{"fontSize":12,"fontFamily":"Arial","bold":false,"italic":false,"fontColor":"#003"},"formatedText":[]},{"id":7,"type":1,"tabCount":1,"plainContent":"Full pack of pen","style":{"fontSize":12,"fontFamily":"Arial","bold":false,"italic":false,"fontColor":"#003"},"formatedText":[]},{"id":8,"type":1,"tabCount":1,"plainContent":"Drawing kit","style":{"fontSize":12,"fontFamily":"Arial","bold":false,"italic":false,"fontColor":"#003"},"formatedText":[]},{"id":9,"type":1,"tabCount":1,"plainContent":"2 register size notebook","style":{"fontSize":12,"fontFamily":"Arial","bold":false,"italic":false,"fontColor":"#003"},"formatedText":[]},{"id":10,"type":1,"tabCount":0,"plainContent":"Window shields","style":{"fontSize":12,"fontFamily":"Arial","bold":false,"italic":false,"fontColor":"#003"},"formatedText":[]},{"id":11,"type":1,"tabCount":0,"plainContent":"Mosquito repelant","style":{"fontSize":12,"fontFamily":"Arial","bold":false,"italic":false,"fontColor":"#003"},"formatedText":[]}]')
var lines = [] var lines = []
...@@ -67,6 +67,7 @@ var ADocEditor = function (customConfig) { ...@@ -67,6 +67,7 @@ var ADocEditor = function (customConfig) {
function inititalize(customConfig) { function inititalize(customConfig) {
config = { ...defaultConfig, ...customConfig } config = { ...defaultConfig, ...customConfig }
config.pageSetup.canvasMultiplier = Math.round(screen.width / config.pageSetup.width) config.pageSetup.canvasMultiplier = Math.round(screen.width / config.pageSetup.width)
config.pageSetup.fontMultiplier = config.pageSetup.canvasMultiplier/3
config.pageSetup.canvasWidth = config.pageSetup.canvasMultiplier * config.pageSetup.width config.pageSetup.canvasWidth = config.pageSetup.canvasMultiplier * config.pageSetup.width
config.pageSetup.canvasHeight = config.pageSetup.canvasMultiplier * config.pageSetup.height config.pageSetup.canvasHeight = config.pageSetup.canvasMultiplier * config.pageSetup.height
...@@ -192,8 +193,8 @@ var ADocEditor = function (customConfig) { ...@@ -192,8 +193,8 @@ var ADocEditor = function (customConfig) {
x: 0, // this is the starting point x; it will change based on the tabNumber x: 0, // this is the starting point x; it will change based on the tabNumber
y: 0, // this is the starting y coordinate; it will change based on the max font size y: 0, // this is the starting y coordinate; it will change based on the max font size
plainContent: "", plainContent: "",
fontSize: 30, fontSize: 12,
maxFontSize: 30, maxFontSize: 12,
dataSetIndex: dataSetIndex, dataSetIndex: dataSetIndex,
charStartIndex: 0, // index from where to check charStartIndex: 0, // index from where to check
...@@ -288,6 +289,8 @@ var ADocEditor = function (customConfig) { ...@@ -288,6 +289,8 @@ var ADocEditor = function (customConfig) {
} }
function renderTheLines() { function renderTheLines() {
console.clear()
console.log('to render the lines')
let canvasIndex = 0 let canvasIndex = 0
let ctx = canvasList[canvasIndex].el.getContext('2d', { willReadFrequently: true }) let ctx = canvasList[canvasIndex].el.getContext('2d', { willReadFrequently: true })
let x = 0 let x = 0
...@@ -297,7 +300,7 @@ var ADocEditor = function (customConfig) { ...@@ -297,7 +300,7 @@ var ADocEditor = function (customConfig) {
x = (config.format.margin * config.pageSetup.canvasMultiplier); x = (config.format.margin * config.pageSetup.canvasMultiplier);
y += lines[l].maxFontSize y += (lines[l].maxFontSize*config.pageSetup.fontMultiplier)
if (lines[l].blockStart && l != 0) y += lines[l].maxFontSize if (lines[l].blockStart && l != 0) y += lines[l].maxFontSize
if ((maxVericalWidth + lines[l].maxFontSize) < (y - lines[l].maxFontSize)) { if ((maxVericalWidth + lines[l].maxFontSize) < (y - lines[l].maxFontSize)) {
canvasIndex++ canvasIndex++
...@@ -322,7 +325,7 @@ var ADocEditor = function (customConfig) { ...@@ -322,7 +325,7 @@ var ADocEditor = function (customConfig) {
} }
ctx.save() ctx.save()
ctx.fillStyle = `${style.fontColor}` ctx.fillStyle = `${style.fontColor}`
ctx.font = `${style.bold ? 'bold ' : ''}${style.italic ? 'italic ' : ''} ${style.fontSize}px ${style.fontFamily}` ctx.font = `${style.bold ? 'bold ' : ''}${style.italic ? 'italic ' : ''} ${style.fontSize*config.pageSetup.fontMultiplier}px ${style.fontFamily}`
ctx.fillText(`${lines[l].listIndex + 1}.`, numberX, y) ctx.fillText(`${lines[l].listIndex + 1}.`, numberX, y)
ctx.restore() ctx.restore()
} }
...@@ -336,7 +339,7 @@ var ADocEditor = function (customConfig) { ...@@ -336,7 +339,7 @@ var ADocEditor = function (customConfig) {
if (char) { if (char) {
let style = setData.formatedText[c] let style = setData.formatedText[c]
ctx.save() ctx.save()
ctx.font = `${style?.bold ? 'bold ' : ''}${style?.italic ? 'italic ' : ''} ${style.fontSize}px ${style.fontFamily}` ctx.font = `${style?.bold ? 'bold ' : ''}${style?.italic ? 'italic ' : ''} ${style.fontSize*config.pageSetup.fontMultiplier}px ${style.fontFamily}`
ctx.fillStyle = `${style?.fontColor}` ctx.fillStyle = `${style?.fontColor}`
ctx.fillText(char, x, y) ctx.fillText(char, x, y)
setData.formatedText[c].x = x setData.formatedText[c].x = x
...@@ -380,9 +383,9 @@ var ADocEditor = function (customConfig) { ...@@ -380,9 +383,9 @@ var ADocEditor = function (customConfig) {
let characterData = dataSet[activeDataIndex].formatedText[caretData.index] let characterData = dataSet[activeDataIndex].formatedText[caretData.index]
let rectX = characterData?.x, let rectX = characterData?.x,
rectY = activeLine.y - activeLine.maxFontSize, rectY = activeLine.y - (activeLine.maxFontSize*config.pageSetup.fontMultiplier),
rectWidth = 2, rectWidth = 2,
rectHeight = 5 * activeLine.maxFontSize / 4; rectHeight = 5 * (activeLine.maxFontSize*config.pageSetup.fontMultiplier) / 4;
if (!characterData && dataSet[activeDataIndex].formatedText?.[caretData.index - 1]) { if (!characterData && dataSet[activeDataIndex].formatedText?.[caretData.index - 1]) {
rectX = dataSet[activeDataIndex].formatedText?.[caretData.index - 1]?.x + dataSet[activeDataIndex].formatedText?.[caretData.index - 1]?.width rectX = dataSet[activeDataIndex].formatedText?.[caretData.index - 1]?.x + dataSet[activeDataIndex].formatedText?.[caretData.index - 1]?.width
} }
...@@ -409,7 +412,7 @@ var ADocEditor = function (customConfig) { ...@@ -409,7 +412,7 @@ var ADocEditor = function (customConfig) {
let canvas = canvasList[canvasIndex].el let canvas = canvasList[canvasIndex].el
let ctx = canvas.getContext('2d', { willReadFrequently: true }) let ctx = canvas.getContext('2d', { willReadFrequently: true })
ctx.save() ctx.save()
ctx.font = `${style?.bold ? 'bold ' : ''}${style?.italic ? 'italic ' : ''} ${style.fontSize}px ${style.fontFamily}` ctx.font = `${style?.bold ? 'bold ' : ''}${style?.italic ? 'italic ' : ''} ${style.fontSize*config.pageSetup.fontMultiplier}px ${style.fontFamily}`
ctx.fillStyle = `${style?.fontColor}` ctx.fillStyle = `${style?.fontColor}`
let width = ctx.measureText(char).width let width = ctx.measureText(char).width
ctx.restore() ctx.restore()
......
generate-pdf.js
let ADocEditor = require("./a-doc-editor-node.js") let ADocEditor = require("./a-doc-editor-node.js")
var counter = 0
module.exports = async function(req, res){ module.exports = async function(req, res){
try{ try{
console.log('reaching server', ) console.clear()
console.log('generating PDF', ++counter)
let editor = new ADocEditor() let editor = new ADocEditor()
console.log('editor', editor) editor.generatePDF('temp.pdf')
res.status(200).json( { success: true, message: "Successfull" } ) res.status(200).json( { success: true, message: "Successfull" } )
}catch(err){ }catch(err){
console.log(err) console.log(err)
......
temp.pdf 0 → 100644
No preview for this file type
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment