Commit e042810a by ramdayalmunda

handling new page on enter

parent 668fae9e
...@@ -5,8 +5,8 @@ ...@@ -5,8 +5,8 @@
} }
.a-doc-editor canvas:focus-visible { .a-doc-editor canvas:focus-visible {
/* outline: auto rgb(0, 68, 255, 50%); */ outline: auto rgb(0, 68, 255, 50%);
outline: none; /* outline: none; */
background: #fff; background: #fff;
} }
...@@ -109,7 +109,7 @@ ...@@ -109,7 +109,7 @@
} }
.a-doc-editor .body .scrolling-area canvas.page { .a-doc-editor .body .scrolling-area canvas.page {
background: #f3f3f3; background: #dd8181;
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);
......
...@@ -31,7 +31,7 @@ var ADocEditor = function (customConfig) { ...@@ -31,7 +31,7 @@ var ADocEditor = function (customConfig) {
}, },
} }
defaultConfig.style.y = defaultConfig.style.fontSize defaultConfig.style.y = defaultConfig.style.fontSize
var config = JSON.parse( JSON.stringify( defaultConfig ) ); var config = JSON.parse(JSON.stringify(defaultConfig));
var canvasList = [] var canvasList = []
const dataTypes = [ const dataTypes = [
"paragraph", // simple text filled line by line "paragraph", // simple text filled line by line
...@@ -55,7 +55,7 @@ var ADocEditor = function (customConfig) { ...@@ -55,7 +55,7 @@ var ADocEditor = function (customConfig) {
canvasIndex: 0, canvasIndex: 0,
caretSize: config.style.fontSize, caretSize: config.style.fontSize,
x: config.style.margin, x: config.style.margin,
y: 3*config.style.fontSize/4, y: 3 * config.style.fontSize / 4,
} }
var renderInProgress = false; var renderInProgress = false;
...@@ -131,10 +131,10 @@ var ADocEditor = function (customConfig) { ...@@ -131,10 +131,10 @@ var ADocEditor = function (customConfig) {
footerComponent = document.getElementById(footerComponentId) footerComponent = document.getElementById(footerComponentId)
leftSidebar = document.getElementById(leftSidebarId) leftSidebar = document.getElementById(leftSidebarId)
rightSidebar = document.getElementById(rightSidebarId) rightSidebar = document.getElementById(rightSidebarId)
mainComponent.getElementsByClassName('toggle-sidebar')[0].addEventListener('click',(e)=>{ mainComponent.getElementsByClassName('toggle-sidebar')[0].addEventListener('click', (e) => {
leftSidebar.classList.toggle('hide') leftSidebar.classList.toggle('hide')
}) })
mainComponent.getElementsByClassName('toggle-sidebar')[1].addEventListener('click',(e)=>{ mainComponent.getElementsByClassName('toggle-sidebar')[1].addEventListener('click', (e) => {
rightSidebar.classList.toggle('hide') rightSidebar.classList.toggle('hide')
}) })
...@@ -152,7 +152,7 @@ var ADocEditor = function (customConfig) { ...@@ -152,7 +152,7 @@ var ADocEditor = function (customConfig) {
renderInProgress = true renderInProgress = true
let canvasIndex = 0 let canvasIndex = 0
if (!canvasList.length) canvasList[0] = { el: createCanvas(), dataIndex: 0 } if (!canvasList.length) canvasList[0] = { id: ++counter, el: createCanvas(), dataIndex: 0 }
var x = 0, y = 0; var x = 0, y = 0;
...@@ -167,24 +167,24 @@ var ADocEditor = function (customConfig) { ...@@ -167,24 +167,24 @@ var ADocEditor = function (customConfig) {
} }
for (let i = 0; i < dataList.length; i++) { for (let i = 0; i < dataList.length; i++) {
if (dataList[i].plainContent.length ==0 ){ if (dataList[i].plainContent.length == 0) {
y += ( dataList?.[i].style.fontSize ) y += (dataList?.[i].style.fontSize)
} }
let canvas = canvasList[canvasIndex].el let canvas = canvasList[canvasIndex].el
canvas.setAttribute("tabIndex", -1) canvas.setAttribute("tabIndex", -1)
renderText(canvas, dataList[i]) calculateTextPositions(canvas, dataList[i])
x = 0; x = 0;
if (dataList[i].id == caretData.activeData.id) { if (dataList[i].id == caretData.activeData.id) {
caretData.canvasIndex = canvasIndex; caretData.canvasIndex = canvasIndex;
} }
} }
renderFormattedData()
function renderText(canvas, dataBlock) { function calculateTextPositions(canvas, dataBlock) {
let ctx = canvas.getContext('2d', { willReadFrequently: true }) let ctx = canvas.getContext('2d', { willReadFrequently: true })
ctx.save() ctx.save()
let maxWidth = config.pageSetup.canvasWidth let maxWidth = config.pageSetup.canvasWidth
let wordStartIndex = 0
let wordEndIndex = 0 let wordEndIndex = 0
let wordsLength = 0; let wordsLength = 0;
dataBlock.formatedText = [] dataBlock.formatedText = []
...@@ -222,27 +222,39 @@ var ADocEditor = function (customConfig) { ...@@ -222,27 +222,39 @@ var ADocEditor = function (customConfig) {
wordsLength = 0 wordsLength = 0
y += style.fontSize y += style.fontSize
x = 0; x = 0;
wordStartIndex = wordEndIndex
} }
} }
for (let i = 0; i < dataBlock.formatedText.length; i++) {
ctx.save()
ctx.font = `${dataBlock.formatedText[i].fontSize}px ${dataBlock.formatedText[i].fontFamily}`
ctx.fillStyle = dataBlock.formatedText[i].fontColor
ctx.fillText(dataBlock.formatedText[i].char, dataBlock.formatedText[i].x, dataBlock.formatedText[i].y)
ctx.restore() ctx.restore()
return true
} }
function renderFormattedData() {
let canvasIndex = 0;
let pageYOffset = 0;
for (let j = 0; j < dataSet.length; j++) {
let dataBlock = dataSet[j]
if ( dataBlock.style.y - pageYOffset>= config.pageSetup.canvasHeight ){
pageYOffset = dataBlock.style.y - dataBlock.style.fontSize
canvasIndex++;
if (!canvasList[canvasIndex]) canvasList[canvasIndex] = { id: ++counter, el: createCanvas(), dataIndex: j }
}
let ctx = canvasList[canvasIndex].el.getContext('2d', { willReadFrequently: true })
ctx.save()
for (let i = 0; i < dataBlock.formatedText.length; i++) {
ctx.font = `${dataBlock.formatedText[i].fontSize}px ${dataBlock.formatedText[i].fontFamily}`
ctx.fillStyle = dataBlock.formatedText[i].fontColor
ctx.fillText(dataBlock.formatedText[i].char, dataBlock.formatedText[i].x, (dataBlock.formatedText[i].y-pageYOffset))
}
ctx.restore() ctx.restore()
return true }
} }
if (!caretData.blink && caretData.activeData) renderCaret() if (!caretData.blink && caretData.activeData) renderCaret()
...@@ -256,7 +268,7 @@ var ADocEditor = function (customConfig) { ...@@ -256,7 +268,7 @@ var ADocEditor = function (customConfig) {
rectX = rectX ? rectX : 0 rectX = rectX ? rectX : 0
rectY = rectY ? rectY : 0 rectY = rectY ? rectY : 0
let rectWidth = 2; let rectWidth = 2;
let rectHeight = caretData.caretSize + activeTextData?.fontSize/3; let rectHeight = caretData.caretSize + activeTextData?.fontSize / 3;
const imageData = ctx.getImageData(rectX, rectY, rectWidth, rectHeight); const imageData = ctx.getImageData(rectX, rectY, rectWidth, rectHeight);
const data = imageData.data; const data = imageData.data;
...@@ -274,13 +286,19 @@ var ADocEditor = function (customConfig) { ...@@ -274,13 +286,19 @@ var ADocEditor = function (customConfig) {
function createCanvas() { function createCanvas() {
let canvas = document.createElement('canvas') let canvas = document.createElement('canvas')
canvas.setAttribute('class', 'page') canvas.setAttribute('class', 'page')
canvas.setAttribute('id', `canvas_${++counter}`)
canvas.width = config.pageSetup.canvasWidth canvas.width = config.pageSetup.canvasWidth
canvas.height = config.pageSetup.canvasHeight canvas.height = config.pageSetup.canvasHeight
canvas.addEventListener('keydown', keydownHandler) canvas.addEventListener('keydown', keydownHandler)
canvas.addEventListener('mousedown', mousedownHandler) canvas.addEventListener('mousedown', mousedownHandler)
canvas.addEventListener("focus", onFocusHandler) // canvas.addEventListener("focus", onFocusHandler)
canvas.addEventListener("blur", onBlurHandler) // canvas.addEventListener("blur", onBlurHandler)
scrollingComponent.append(canvas) scrollingComponent.append(canvas)
let ctx = canvas.getContext('2d', { willReadFrequently: true })
ctx.fillStyle = config.format.background
ctx.fillRect(0, 0, canvas.width, canvas.height)
return canvas return canvas
} }
...@@ -308,7 +326,7 @@ var ADocEditor = function (customConfig) { ...@@ -308,7 +326,7 @@ var ADocEditor = function (customConfig) {
caretData.blink = false caretData.blink = false
if (e.shiftKey && e.ctrlKey) { } // ctr+shift combination if (e.shiftKey && e.ctrlKey) { } // ctr+shift combination
if (e.keyCode == 16 || e.keyCode==18 || e.keyCode==20) { if (e.keyCode == 16 || e.keyCode == 18 || e.keyCode == 20) {
return return
} }
else if (e.ctrlKey) { else if (e.ctrlKey) {
...@@ -324,16 +342,16 @@ var ADocEditor = function (customConfig) { ...@@ -324,16 +342,16 @@ var ADocEditor = function (customConfig) {
e.preventDefault() e.preventDefault()
} }
else if (e.keyCode == 13) { // Enter Key else if (e.keyCode == 13) { // Enter Key
if (caretData){ if (caretData) {
if (caretData.activeData.type == 0){ // for plain text // just go to next line if (caretData.activeData.type == 0) { // for plain text // just go to next line
let style = caretData?.activeData?.formatedText?.[caretData.activeData.formatedText.length-1] let style = caretData?.activeData?.formatedText?.[caretData.activeData.formatedText.length - 1]
if (!style) style = caretData?.activeData?.style if (!style) style = caretData?.activeData?.style
if (!style) style = config.style if (!style) style = config.style
let newLineData = { let newLineData = {
id: ++counter, id: ++counter,
type: 0, type: 0,
plainContent: "", plainContent: "",
style: JSON.parse( JSON.stringify(style) ) style: JSON.parse(JSON.stringify(style))
} }
newLineData.style.y += newLineData.style.fontSize newLineData.style.y += newLineData.style.fontSize
newLineData.style.x = 0 newLineData.style.x = 0
...@@ -350,32 +368,32 @@ var ADocEditor = function (customConfig) { ...@@ -350,32 +368,32 @@ var ADocEditor = function (customConfig) {
++caretData.index ++caretData.index
} }
else if (e.keyCode == 8) { // backspace else if (e.keyCode == 8) { // backspace
if (caretData.index <= 0){ if (caretData.index <= 0) {
let currentIndex = dataSet.findIndex( item => item.id == caretData.activeData.id ) let currentIndex = dataSet.findIndex(item => item.id == caretData.activeData.id)
if (currentIndex>0){ if (currentIndex > 0) {
caretData.activeData = dataSet[currentIndex-1] caretData.activeData = dataSet[currentIndex - 1]
caretData.index = dataSet[currentIndex-1].plainContent.length caretData.index = dataSet[currentIndex - 1].plainContent.length
if (dataSet[currentIndex].plainContent.length!=0){ if (dataSet[currentIndex].plainContent.length != 0) {
caretData.activeData.plainContent += dataSet[currentIndex].plainContent caretData.activeData.plainContent += dataSet[currentIndex].plainContent
caretData.activeData.formatedText.push( ...dataSet[currentIndex].formatedText ) caretData.activeData.formatedText.push(...dataSet[currentIndex].formatedText)
} }
dataSet.splice(currentIndex, 1) dataSet.splice(currentIndex, 1)
} }
}else{ } else {
caretData.activeData.plainContent = caretData.activeData.plainContent.slice(0, caretData.index - 1) + caretData.activeData.plainContent.slice(caretData.index) caretData.activeData.plainContent = caretData.activeData.plainContent.slice(0, caretData.index - 1) + caretData.activeData.plainContent.slice(caretData.index)
caretData.index = caretData.index - 1 caretData.index = caretData.index - 1
} }
} }
else if (e.keyCode == 37) { // left key else if (e.keyCode == 37) { // left key
e.preventDefault() e.preventDefault()
if (caretData.index<=0){ if (caretData.index <= 0) {
let currentIndex = dataSet.findIndex( item => item.id == caretData.activeData.id ) let currentIndex = dataSet.findIndex(item => item.id == caretData.activeData.id)
let previousData = dataSet[currentIndex-1] let previousData = dataSet[currentIndex - 1]
if (previousData){ if (previousData) {
caretData.activeData = previousData caretData.activeData = previousData
caretData.index = previousData.plainContent.length caretData.index = previousData.plainContent.length
} }
}else{ } else {
caretData.index = (caretData.index <= 0) ? 0 : caretData.index - 1 caretData.index = (caretData.index <= 0) ? 0 : caretData.index - 1
} }
} }
...@@ -384,12 +402,12 @@ var ADocEditor = function (customConfig) { ...@@ -384,12 +402,12 @@ var ADocEditor = function (customConfig) {
} }
else if (e.keyCode == 39) { // right key else if (e.keyCode == 39) { // right key
e.preventDefault() e.preventDefault()
if (caretData.index <= caretData.activeData.plainContent.length-1){ if (caretData.index <= caretData.activeData.plainContent.length - 1) {
caretData.index = (caretData.index >= caretData.activeData.plainContent.length) ? caretData.activeData.plainContent.length : caretData.index + 1 caretData.index = (caretData.index >= caretData.activeData.plainContent.length) ? caretData.activeData.plainContent.length : caretData.index + 1
}else{ } else {
let currentIndex = dataSet.findIndex( item => item.id == caretData.activeData.id ) let currentIndex = dataSet.findIndex(item => item.id == caretData.activeData.id)
let nextData = dataSet[currentIndex+1] let nextData = dataSet[currentIndex + 1]
if (nextData){ if (nextData) {
caretData.index = 0 caretData.index = 0
caretData.activeData = nextData caretData.activeData = nextData
} }
...@@ -410,20 +428,20 @@ var ADocEditor = function (customConfig) { ...@@ -410,20 +428,20 @@ var ADocEditor = function (customConfig) {
// }, caretData.intervalDuration) // }, caretData.intervalDuration)
} }
function setCaretPosition(e){ function setCaretPosition(e) {
let rect = e.target.getBoundingClientRect() let rect = e.target.getBoundingClientRect()
let position = { let position = {
xP: e.offsetX/rect.width, xP: e.offsetX / rect.width,
yP: e.offsetY/rect.height, yP: e.offsetY / rect.height,
} }
let canvasData = canvasList.find( item => item.el == e.target ) let canvasData = canvasList.find(item => item.el == e.target)
position.x = position.xP*config.pageSetup.canvasWidth position.x = position.xP * config.pageSetup.canvasWidth
position.y = position.yP*config.pageSetup.canvasHeight position.y = position.yP * config.pageSetup.canvasHeight
let lineY = dataSet[canvasData.dataIndex].style.y let lineY = dataSet[canvasData.dataIndex].style.y
for (let i=canvasData.dataIndex; i<dataSet.length; i++){ for (let i = canvasData.dataIndex; i < dataSet.length; i++) {
for ( let j=0; j< dataSet[i].formatedText.length; j++ ){ for (let j = 0; j < dataSet[i].formatedText.length; j++) {
if ( Math.floor( dataSet[i].formatedText[j].x ) == Math.floor(position.x) ){ if (Math.floor(dataSet[i].formatedText[j].x) == Math.floor(position.x)) {
break; break;
} }
} }
...@@ -453,8 +471,8 @@ var ADocEditor = function (customConfig) { ...@@ -453,8 +471,8 @@ var ADocEditor = function (customConfig) {
caretData.activeData = null caretData.activeData = null
caretData.activeData = dataSet[0] caretData.activeData = dataSet[0]
}, },
getContent: function (){ getContent: function () {
return JSON.parse( JSON.stringify( dataSet ) ) return JSON.parse(JSON.stringify(dataSet))
} }
} }
return returnObj return returnObj
......
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