Skip to content

A
a-doc-editor
Commit fa347ac4 by ramdayalmunda
Options

Enter event on List fixed

parent 95c117d5
Showing with 53 additions and 46 deletions
dist/assets/a-doc-editor.js
......@@ -45,7 +45,7 @@ var ADocEditor = function (customConfig) {
]
// // these lines are added only for testing please remove this on completion
// // paragraphs
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":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"}}]')
// // lists
dataSet = JSON.parse('[{"id":1,"type":0,"plainContent":"Hey there buddy! Can you bring these items from the groceries please. It will be really helpfull.","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":4,"type":1,"tabCount":0,"plainContent":"Onion","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":[]}]')
......@@ -172,7 +172,6 @@ var ADocEditor = function (customConfig) {
calculateTextSizeAndPosition(canvasIndex, i)
}
renderTheLines()
console.log(lines)
if (!caretData.blink && caretData.activeData) renderCaret()
......@@ -207,28 +206,28 @@ var ADocEditor = function (customConfig) {
let wordEndIndex = 0; // this stores the index of the word which can fit in the line;
let tempLineWidth = 0;
let maxLineWidth = config.pageSetup.canvasWidth - (config.format.margin * 2 * config.pageSetup.canvasMultiplier)
if (dataBlock.tabCount || dataBlock.type == 1){
if (dataBlock.tabCount || dataBlock.type == 1) {
let finalTabCount = dataBlock.tabCount
if (dataBlock.type==1){
if (dataBlock.type == 1) {
finalTabCount++
}
let tabDistance = finalTabCount*config.format.tabWidth*config.pageSetup.canvasMultiplier
if (tabDistance>maxLineWidth*5/6){ tabDistance = 0 }
maxLineWidth = maxLineWidth-tabDistance
let tabDistance = finalTabCount * config.format.tabWidth * config.pageSetup.canvasMultiplier
if (tabDistance > maxLineWidth * 5 / 6) { tabDistance = 0 }
maxLineWidth = maxLineWidth - tabDistance
}
lineObj.maxLineWidth = maxLineWidth
lineObj.tabCount = dataBlock.tabCount
// // for checking the listIndex
if (dataBlock.type == 1){
for (let i=dataSetIndex-1; i>=0; i--){
if (dataList[i].type!=1){
if (dataBlock.type == 1) {
for (let i = dataSetIndex - 1; i >= 0; i--) {
if (dataList[i].type != 1) {
dataBlock.listIndex = 0
break;
}else if (dataList[i].tabCount == dataBlock.tabCount){
dataBlock.listIndex = dataList[i].listIndex+1
} else if (dataList[i].tabCount == dataBlock.tabCount) {
dataBlock.listIndex = dataList[i].listIndex + 1
break
}else if (dataList[i].tabCount<dataBlock.tabCount){
} else if (dataList[i].tabCount < dataBlock.tabCount) {
dataBlock.listIndex = 0
break;
}
......@@ -259,7 +258,7 @@ var ADocEditor = function (customConfig) {
// cannot add this// new line should be added//
i = wordEndIndex;
lineObj.plainContent = dataBlock.plainContent.slice(lineObj.charStartIndex, lineObj.charEndIndex+1)
lineObj.plainContent = dataBlock.plainContent.slice(lineObj.charStartIndex, lineObj.charEndIndex + 1)
lineObj = new getLineObj()
lineObj.listIndex = dataBlock.listIndex
lineObj.maxLineWidth = maxLineWidth
......@@ -271,7 +270,7 @@ var ADocEditor = function (customConfig) {
}
}
lineObj.plainContent = dataBlock.plainContent.slice(lineObj.charStartIndex, lineObj.charEndIndex+1)
lineObj.plainContent = dataBlock.plainContent.slice(lineObj.charStartIndex, lineObj.charEndIndex + 1)
// 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
......@@ -309,19 +308,19 @@ var ADocEditor = function (customConfig) {
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)
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 numberX = x - config.format.tabWidth * config.pageSetup.canvasMultiplier / 2
if (lines[l].blockStart) {
let style = {
...config.style,
...setData.style
}
ctx.save()
ctx.fillStyle = `${style.fontColor}`
ctx.font = `${style.bold?'bold ':''}${style.italic?'italic ':''} ${style.fontSize}px ${style.fontFamily}`
ctx.fillText(`${lines[l].listIndex+1}.`, numberX,y)
ctx.font = `${style.bold ? 'bold ' : ''}${style.italic ? 'italic ' : ''} ${style.fontSize}px ${style.fontFamily}`
ctx.fillText(`${lines[l].listIndex + 1}.`, numberX, y)
ctx.restore()
}
......@@ -354,20 +353,20 @@ var ADocEditor = function (customConfig) {
let ctx = canvasList[caretData.canvasIndex].el.getContext('2d', { willReadFrequently: true })
ctx.save()
let activeDataIndex = dataSet.findIndex( item => item.id == caretData.activeData.id )
let activeLine = lines.find( (item, i) => {
if (item.dataSetIndex == activeDataIndex){
let activeDataIndex = dataSet.findIndex(item => item.id == caretData.activeData.id)
let activeLine = lines.find((item, i) => {
if (item.dataSetIndex == activeDataIndex) {
if (item.charEndIndex == -1) return true
if (item.charEndIndex>=caretData.index) return true
if ( !(lines[i+1]?.dataSetIndex==activeDataIndex) ) return true
if (item.charEndIndex >= caretData.index) return true
if (!(lines[i + 1]?.dataSetIndex == activeDataIndex)) return true
else false
}else return false
} else return false
})
// handle left right on multiple pages
if (activeLine){
canvasList[ activeLine.canvasIndex ].el.focus()
if (activeLine) {
canvasList[activeLine.canvasIndex].el.focus()
caretData.canvasIndex = activeLine.canvasIndex
ctx.restore()
ctx = canvasList[activeLine.canvasIndex].el.getContext('2d', { willReadFrequently: true })
......@@ -375,19 +374,19 @@ var ADocEditor = function (customConfig) {
}
let characterData = dataSet[activeDataIndex].formatedText[ caretData.index ]
let characterData = dataSet[activeDataIndex].formatedText[caretData.index]
let rectX = characterData?.x,
rectY = activeLine.y-activeLine.maxFontSize,
rectY = activeLine.y - activeLine.maxFontSize,
rectWidth = 2,
rectHeight = 5 * activeLine.maxFontSize / 4;
if (!characterData && dataSet[activeDataIndex].formatedText?.[ caretData.index-1 ]){
rectX = dataSet[activeDataIndex].formatedText?.[ caretData.index-1 ]?.x+dataSet[activeDataIndex].formatedText?.[ caretData.index-1 ]?.width
if (!characterData && dataSet[activeDataIndex].formatedText?.[caretData.index - 1]) {
rectX = dataSet[activeDataIndex].formatedText?.[caretData.index - 1]?.x + dataSet[activeDataIndex].formatedText?.[caretData.index - 1]?.width
}
if ( activeLine.charEndIndex == caretData.index ){
rectX = dataSet[activeDataIndex].formatedText?.[ caretData.index-1 ]?.x+dataSet[activeDataIndex].formatedText?.[ caretData.index-1 ]?.width
if (activeLine.charEndIndex == caretData.index) {
rectX = dataSet[activeDataIndex].formatedText?.[caretData.index - 1]?.x + dataSet[activeDataIndex].formatedText?.[caretData.index - 1]?.width
}
if (!(rectX>0 || rectX==0)){ rectX = activeLine.x }
if (!(rectX > 0 || rectX == 0)) { rectX = activeLine.x }
const imageData = ctx.getImageData(rectX, rectY, rectWidth, rectHeight);
const data = imageData.data;
......@@ -464,19 +463,27 @@ var ADocEditor = function (customConfig) {
}
else if (e.keyCode == 13) { // Enter Key
if (caretData) {
if (caretData.activeData.type == 0) { // for plain text // just go to next line
if (caretData.activeData.type == 0 || caretData.activeData.type == 1) { // for plain text // just go to next line
let style = caretData?.activeData?.formatedText?.[caretData.activeData.formatedText.length - 1]
if (!style) style = caretData?.activeData?.style
if (!style) style = config.style
let newLineData = {
id: ++counter,
type: 0,
type: caretData.activeData.type,
plainContent: "",
style: JSON.parse(JSON.stringify(caretData.activeData.formatedText[caretData.activeData.formatedText.length - 1]))
style: JSON.parse(JSON.stringify(style))
}
newLineData.style.y += newLineData.style.fontSize
newLineData.style.x = 0
newLineData.style.width = 0
dataSet.push(newLineData)
caretData.activeData = newLineData
if (typeof caretData.activeData.tabCount == 'number') newLineData.tabCount = caretData.activeData.tabCount
newLineData.plainContent = caretData.activeData.plainContent.slice(caretData.index)
caretData.activeData.plainContent = caretData.activeData.plainContent.slice(0, caretData.index)
let currentDataIndex = dataSet.findIndex(item => item.id == caretData.activeData.id)
dataSet.splice(currentDataIndex + 1, 0, newLineData)
caretData.activeData = dataSet[currentDataIndex + 1]
caretData.y += style.fontSize
caretData.index = 0
}
}
}
......@@ -498,7 +505,7 @@ var ADocEditor = function (customConfig) {
caretData.activeData = previousData
caretData.index = previousData.plainContent.length
}
caretData.canvasIndex = canvasList.findIndex( item => item.el == e.target )
caretData.canvasIndex = canvasList.findIndex(item => item.el == e.target)
} else {
caretData.index = (caretData.index <= 0) ? 0 : caretData.index - 1
}
......@@ -522,7 +529,7 @@ var ADocEditor = function (customConfig) {
}
}
caretData.canvasIndex = canvasList.findIndex( item => item.el == e.target )
caretData.canvasIndex = canvasList.findIndex(item => item.el == e.target)
reRenderPages(dataSet, { onlyCursor: true })
return
}
......
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