Skip to content

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

multiple pages fix

parent 92eac048
Showing with 47 additions and 38 deletions
dist/assets/a-doc-editor.js
......@@ -181,7 +181,7 @@ var ADocEditor = function (customConfig) {
// to calculate the lines
let dataLineArr = []
function getLineObj(){
function getLineObj() {
return {
id: ++counter,
x: 0, // this is the starting point x; it will change based on the tabNumber
......@@ -198,39 +198,35 @@ var ADocEditor = function (customConfig) {
}
if (!dataBlock.formatedText) dataBlock.formatedText = []
let lineObj = new getLineObj()
dataLineArr.push( lineObj )
dataLineArr.push(lineObj)
let lineIndex = 0
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 tempLineWidth = 0;
let maxLineWidth = config.pageSetup.canvasWidth
let i=0
for (i=0; i<dataBlock.plainContent.length; i++){
let i = 0
for (i = 0; i < dataBlock.plainContent.length; i++) {
let style = dataBlock?.formatedText?.[i]
if (!style) style = JSON.parse( JSON.stringify( config.style ) )
if ( /\s/.test(dataBlock.plainContent[i]) ){
if (!style) style = JSON.parse(JSON.stringify(config.style))
if (/\s/.test(dataBlock.plainContent[i])) {
wordEndIndex = i
lineObj.charEndIndex = wordEndIndex;
}
let charWidth = getCharacterWidth( canvasIndex, dataBlock.plainContent[i], style )
let charWidth = getCharacterWidth(canvasIndex, dataBlock.plainContent[i], style)
dataBlock.formatedText[i] = {
...config.style,
width: charWidth
}
if (i==0){
style.bold = true; //render problem
dataBlock.formatedText[0].bold = true
}
lineObj.maxFontSize = style.fontSize
tempLineWidth += charWidth
if (tempLineWidth<=maxLineWidth){
if (tempLineWidth <= maxLineWidth) {
// can be added to the line //
}else{
} else {
// cannot add this// new line should be added//
i = wordEndIndex;
lineObj.plainContent = dataBlock.plainContent.slice( lineObj.charStartIndex, lineObj.charEndIndex )
lineObj.plainContent = dataBlock.plainContent.slice(lineObj.charStartIndex, lineObj.charEndIndex)
lineObj = new getLineObj()
lineObj.charStartIndex = i
lineObj.charEndIndex = i
......@@ -244,48 +240,58 @@ var ADocEditor = function (customConfig) {
// 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
if (lineObj.charEndIndex <= dataBlock.plainContent.length){
lineObj.charEndIndex = dataBlock.plainContent.length-1
if (lineObj.charEndIndex <= dataBlock.plainContent.length) {
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()
return true
}
function renderTheLines(){
let canvas = canvasList[0].el
ctx = canvas.getContext('2d', {willReadFrequently: true })
function renderTheLines() {
let canvasIndex = 0
let ctx = canvasList[canvasIndex].el.getContext('2d', { willReadFrequently: true })
let x = 0
let y = 0
for (let l=0; l<lines.length; l++){
for (let l = 0; l < lines.length; l++) {
x = 0
y += lines[l].maxFontSize
let setData = dataSet[ lines[l].dataSetIndex ]
for (let c=lines[l].charStartIndex; c<lines[l].charEndIndex; c++){
let char = setData?.plainContent[ c ]
if (char){
if (canvasList[canvasIndex].el.height <= y) {
canvasIndex++
if (!canvasList[canvasIndex]) {
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]
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.fillText( char, x,y )
ctx.fillText(char, x, y)
setData.formatedText[c].x = x
setData.formatedText[c].y = y
ctx.restore()
if (setData.formatedText[c]?.width){
if (setData.formatedText[c]?.width) {
x += setData.formatedText[c]?.width
}
}
}
}
console.log('dataSet', dataSet)
}
if (!caretData.blink && caretData.activeData) renderCaret()
......@@ -293,7 +299,7 @@ var ADocEditor = function (customConfig) {
function renderCaret() {
let ctx = canvasList[caretData.canvasIndex].el.getContext('2d', { willReadFrequently: true })
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) {
// pick style from line
} else {
......@@ -313,11 +319,11 @@ var ADocEditor = function (customConfig) {
ctx.restore()
}
function getCharacterWidth(canvasIndex, char, style){
function getCharacterWidth(canvasIndex, char, style) {
let canvas = canvasList[canvasIndex].el
let ctx = canvas.getContext('2d', { willReadFrequently: true })
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}`
let width = ctx.measureText(char).width
ctx.restore()
......@@ -326,9 +332,12 @@ var ADocEditor = function (customConfig) {
function createCanvas() {
let canvas = document.createElement('canvas')
let ctx = canvas.getContext('2d', { willReadFrequently: true })
canvas.setAttribute('class', 'page')
canvas.width = config.pageSetup.canvasWidth
canvas.height = config.pageSetup.canvasHeight
ctx.fillStyle = config.format.background
ctx.fillRect(0, 0, canvas.width, canvas.height)
canvas.addEventListener('keydown', keydownHandler)
canvas.addEventListener('mousedown', mousedownHandler)
canvas.addEventListener("focus", onFocusHandler)
......@@ -453,11 +462,11 @@ var ADocEditor = function (customConfig) {
}
renderInProgress = false
}
function removeStyles(dataList){
for (let i=0; i<dataList.length; i++){
function removeStyles(dataList) {
for (let i = 0; i < dataList.length; i++) {
dataList[i].formatedText = []
for(let j=0; j<dataList[i].plainContent.length; j++){
dataList[i].formatedText.push( JSON.parse( JSON.stringify( config.style ) ) )
for (let j = 0; j < dataList[i].plainContent.length; j++) {
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