Skip to content

A
a-doc-editor
Commit 50f40c47 by ramdayalmunda
Options

multiple pages fix

parent 92eac048
Showing with 49 additions and 40 deletions
dist/assets/a-doc-editor.js
...@@ -181,7 +181,7 @@ var ADocEditor = function (customConfig) { ...@@ -181,7 +181,7 @@ var ADocEditor = function (customConfig) {
// to calculate the lines // to calculate the lines
let dataLineArr = [] let dataLineArr = []
function getLineObj(){ function getLineObj() {
return { return {
id: ++counter, id: ++counter,
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
...@@ -193,44 +193,40 @@ var ADocEditor = function (customConfig) { ...@@ -193,44 +193,40 @@ var ADocEditor = function (customConfig) {
dataSetIndex: dataSetIndex, dataSetIndex: dataSetIndex,
charStartIndex: 0, // index from where to check charStartIndex: 0, // index from where to check
charEndIndex: 0, // index till where to check// not including this index. charEndIndex: 0, // index till where to check// not including this index.
} }
} }
if (!dataBlock.formatedText) dataBlock.formatedText = [] if (!dataBlock.formatedText) dataBlock.formatedText = []
let lineObj = new getLineObj() let lineObj = new getLineObj()
dataLineArr.push( lineObj ) dataLineArr.push(lineObj)
let lineIndex = 0 let lineIndex = 0
let lineFirstCharIndex = 0; // this is the index of the first character in any line;; will change inside the loop let lineFirstCharIndex = 0; // this is the index of the first character in any line;; will change inside the loop
let wordEndIndex = 0; // this stores the index of the word which can fit in the line; let wordEndIndex = 0; // this stores the index of the word which can fit in the line;
let tempLineWidth = 0; let tempLineWidth = 0;
let maxLineWidth = config.pageSetup.canvasWidth let maxLineWidth = config.pageSetup.canvasWidth
let i=0 let i = 0
for (i=0; i<dataBlock.plainContent.length; i++){ for (i = 0; i < dataBlock.plainContent.length; i++) {
let style = dataBlock?.formatedText?.[i] let style = dataBlock?.formatedText?.[i]
if (!style) style = JSON.parse( JSON.stringify( config.style ) ) if (!style) style = JSON.parse(JSON.stringify(config.style))
if ( /\s/.test(dataBlock.plainContent[i]) ){ if (/\s/.test(dataBlock.plainContent[i])) {
wordEndIndex = i wordEndIndex = i
lineObj.charEndIndex = wordEndIndex; lineObj.charEndIndex = wordEndIndex;
} }
let charWidth = getCharacterWidth( canvasIndex, dataBlock.plainContent[i], style ) let charWidth = getCharacterWidth(canvasIndex, dataBlock.plainContent[i], style)
dataBlock.formatedText[i] = { dataBlock.formatedText[i] = {
...config.style, ...config.style,
width: charWidth width: charWidth
} }
if (i==0){
style.bold = true; //render problem
dataBlock.formatedText[0].bold = true
}
lineObj.maxFontSize = style.fontSize lineObj.maxFontSize = style.fontSize
tempLineWidth += charWidth tempLineWidth += charWidth
if (tempLineWidth<=maxLineWidth){ if (tempLineWidth <= maxLineWidth) {
// can be added to the line // // can be added to the line //
}else{ } else {
// cannot add this// new line should be added// // cannot add this// new line should be added//
i = wordEndIndex; i = wordEndIndex;
lineObj.plainContent = dataBlock.plainContent.slice( lineObj.charStartIndex, lineObj.charEndIndex ) lineObj.plainContent = dataBlock.plainContent.slice(lineObj.charStartIndex, lineObj.charEndIndex)
lineObj = new getLineObj() lineObj = new getLineObj()
lineObj.charStartIndex = i lineObj.charStartIndex = i
lineObj.charEndIndex = i lineObj.charEndIndex = i
...@@ -244,48 +240,58 @@ var ADocEditor = function (customConfig) { ...@@ -244,48 +240,58 @@ var ADocEditor = function (customConfig) {
// break // break
// } // }
} }
lineObj.plainContent = dataBlock.plainContent.slice( lineObj.charStartIndex, lineObj.charEndIndex ) lineObj.plainContent = dataBlock.plainContent.slice(lineObj.charStartIndex, lineObj.charEndIndex)
// there is chance that the last line is not at the width// so we need to handle the last line separately // there is chance that the last line is not at the width// so we need to handle the last line separately
if (lineObj.charEndIndex <= dataBlock.plainContent.length){ if (lineObj.charEndIndex <= dataBlock.plainContent.length) {
lineObj.charEndIndex = dataBlock.plainContent.length-1 lineObj.charEndIndex = dataBlock.plainContent.length - 1
} }
lineObj.plainContent = dataBlock.plainContent.slice( lineObj.charStartIndex, lineObj.charEndIndex ) lineObj.plainContent = dataBlock.plainContent.slice(lineObj.charStartIndex, lineObj.charEndIndex)
lines.push( ...dataLineArr ) lines.push(...dataLineArr)
ctx.restore() ctx.restore()
return true return true
} }
function renderTheLines(){ function renderTheLines() {
let canvas = canvasList[0].el let canvasIndex = 0
ctx = canvas.getContext('2d', {willReadFrequently: true }) let ctx = canvasList[canvasIndex].el.getContext('2d', { willReadFrequently: true })
let x = 0 let x = 0
let y = 0 let y = 0
for (let l=0; l<lines.length; l++){ for (let l = 0; l < lines.length; l++) {
x = 0 x = 0
y += lines[l].maxFontSize y += lines[l].maxFontSize
let setData = dataSet[ lines[l].dataSetIndex ] if (canvasList[canvasIndex].el.height <= y) {
for (let c=lines[l].charStartIndex; c<lines[l].charEndIndex; c++){ canvasIndex++
let char = setData?.plainContent[ c ] if (!canvasList[canvasIndex]) {
if (char){ canvasList[canvasIndex] = { id: ++counter, el: createCanvas(), dataIndex: lines[l].dataSetIndex, lineIndex: l }
ctx = canvasList[canvasIndex].el.getContext('2d', { willReadFrequently: true })
}
y = lines[l].maxFontSize
}
lines[l].y = y
lines[l].x = x
let setData = dataSet[lines[l].dataSetIndex]
for (let c = lines[l].charStartIndex; c < lines[l].charEndIndex; c++) {
let char = setData?.plainContent[c]
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}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
setData.formatedText[c].y = y setData.formatedText[c].y = y
ctx.restore() ctx.restore()
if (setData.formatedText[c]?.width){ if (setData.formatedText[c]?.width) {
x += setData.formatedText[c]?.width x += setData.formatedText[c]?.width
} }
} }
} }
} }
console.log('dataSet', dataSet)
} }
if (!caretData.blink && caretData.activeData) renderCaret() if (!caretData.blink && caretData.activeData) renderCaret()
...@@ -293,7 +299,7 @@ var ADocEditor = function (customConfig) { ...@@ -293,7 +299,7 @@ var ADocEditor = function (customConfig) {
function renderCaret() { function renderCaret() {
let ctx = canvasList[caretData.canvasIndex].el.getContext('2d', { willReadFrequently: true }) let ctx = canvasList[caretData.canvasIndex].el.getContext('2d', { willReadFrequently: true })
ctx.save() ctx.save()
let rectX = 0, rectY = 0, rectWidth = 2, rectHeight = 5*config.style.fontSize/4; let rectX = 0, rectY = 0, rectWidth = 2, rectHeight = 5 * config.style.fontSize / 4;
if (caretData.caretIndex == 0) { if (caretData.caretIndex == 0) {
// pick style from line // pick style from line
} else { } else {
...@@ -313,11 +319,11 @@ var ADocEditor = function (customConfig) { ...@@ -313,11 +319,11 @@ var ADocEditor = function (customConfig) {
ctx.restore() ctx.restore()
} }
function getCharacterWidth(canvasIndex, char, style){ function getCharacterWidth(canvasIndex, char, style) {
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}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()
...@@ -326,9 +332,12 @@ var ADocEditor = function (customConfig) { ...@@ -326,9 +332,12 @@ var ADocEditor = function (customConfig) {
function createCanvas() { function createCanvas() {
let canvas = document.createElement('canvas') let canvas = document.createElement('canvas')
let ctx = canvas.getContext('2d', { willReadFrequently: true })
canvas.setAttribute('class', 'page') canvas.setAttribute('class', 'page')
canvas.width = config.pageSetup.canvasWidth canvas.width = config.pageSetup.canvasWidth
canvas.height = config.pageSetup.canvasHeight canvas.height = config.pageSetup.canvasHeight
ctx.fillStyle = config.format.background
ctx.fillRect(0, 0, canvas.width, canvas.height)
canvas.addEventListener('keydown', keydownHandler) canvas.addEventListener('keydown', keydownHandler)
canvas.addEventListener('mousedown', mousedownHandler) canvas.addEventListener('mousedown', mousedownHandler)
canvas.addEventListener("focus", onFocusHandler) canvas.addEventListener("focus", onFocusHandler)
...@@ -453,11 +462,11 @@ var ADocEditor = function (customConfig) { ...@@ -453,11 +462,11 @@ var ADocEditor = function (customConfig) {
} }
renderInProgress = false renderInProgress = false
} }
function removeStyles(dataList){ function removeStyles(dataList) {
for (let i=0; i<dataList.length; i++){ for (let i = 0; i < dataList.length; i++) {
dataList[i].formatedText = [] dataList[i].formatedText = []
for(let j=0; j<dataList[i].plainContent.length; j++){ for (let j = 0; j < dataList[i].plainContent.length; j++) {
dataList[i].formatedText.push( JSON.parse( JSON.stringify( config.style ) ) ) dataList[i].formatedText.push(JSON.parse(JSON.stringify(config.style)))
} }
} }
} }
......
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