Skip to content

A
a-doc-editor
Commit 06b575de by ramdayalmunda
Options

caret render issue resolved

parent 4dd4e821
Showing with 34 additions and 39 deletions
dist/assets/a-doc-editor.js
...@@ -37,35 +37,15 @@ var ADocEditor = function (customConfig) { ...@@ -37,35 +37,15 @@ var ADocEditor = function (customConfig) {
id: ++counter, id: ++counter,
type: 0, type: 0,
formatedText: [], 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.", plainContent: "",
style: { ...config.style }
},
{
id: ++counter,
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: { ...config.style }
},
{
id: ++counter,
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: { ...config.style }
},
{
id: ++counter,
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: { ...config.style }
},
{
id: ++counter,
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: { ...config.style } style: { ...config.style }
}, },
] ]
// // 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"}}]')
var lines = [] var lines = []
var caretData = { var caretData = {
...@@ -78,6 +58,7 @@ var ADocEditor = function (customConfig) { ...@@ -78,6 +58,7 @@ var ADocEditor = function (customConfig) {
caretSize: config.style.fontSize, caretSize: config.style.fontSize,
x: config.format.margin, x: config.format.margin,
y: config.format.margin + (3 * config.style.fontSize / 4), y: config.format.margin + (3 * config.style.fontSize / 4),
previousCaret: null,
} }
var renderInProgress = false; var renderInProgress = false;
...@@ -163,7 +144,7 @@ var ADocEditor = function (customConfig) { ...@@ -163,7 +144,7 @@ var ADocEditor = function (customConfig) {
reRenderPages(dataSet) reRenderPages(dataSet)
} }
function reRenderPages(dataList) { function reRenderPages(dataList, option) {
if (renderInProgress) return if (renderInProgress) return
renderInProgress = true renderInProgress = true
...@@ -188,6 +169,9 @@ var ADocEditor = function (customConfig) { ...@@ -188,6 +169,9 @@ var ADocEditor = function (customConfig) {
} }
renderTheLines() renderTheLines()
if (!caretData.blink && caretData.activeData) renderCaret()
function calculateTextSizeAndPosition(canvasIndex, dataSetIndex) { function calculateTextSizeAndPosition(canvasIndex, dataSetIndex) {
let dataBlock = dataList[dataSetIndex] let dataBlock = dataList[dataSetIndex]
...@@ -199,7 +183,6 @@ var ADocEditor = function (customConfig) { ...@@ -199,7 +183,6 @@ var ADocEditor = function (customConfig) {
let dataLineArr = [] let dataLineArr = []
function getLineObj() { function getLineObj() {
return { return {
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
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: "",
...@@ -237,6 +220,7 @@ var ADocEditor = function (customConfig) { ...@@ -237,6 +220,7 @@ var ADocEditor = function (customConfig) {
} }
lineObj.maxFontSize = style.fontSize lineObj.maxFontSize = style.fontSize
// lineObj.fontSize = style.fontSize
tempLineWidth += charWidth tempLineWidth += charWidth
if (tempLineWidth <= maxLineWidth) { if (tempLineWidth <= maxLineWidth) {
// can be added to the line // // can be added to the line //
...@@ -284,7 +268,6 @@ var ADocEditor = function (customConfig) { ...@@ -284,7 +268,6 @@ var ADocEditor = function (customConfig) {
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++
lines[l].canvasIndex = canvasIndex
if (!canvasList[canvasIndex]) { if (!canvasList[canvasIndex]) {
canvasList[canvasIndex] = { id: ++counter, el: createCanvas(), dataIndex: lines[l].dataSetIndex, lineIndex: l } canvasList[canvasIndex] = { id: ++counter, el: createCanvas(), dataIndex: lines[l].dataSetIndex, lineIndex: l }
} }
...@@ -293,6 +276,7 @@ var ADocEditor = function (customConfig) { ...@@ -293,6 +276,7 @@ var ADocEditor = function (customConfig) {
} }
lines[l].y = y lines[l].y = y
lines[l].x = x lines[l].x = x
lines[l].canvasIndex = canvasIndex
let setData = dataSet[lines[l].dataSetIndex] let setData = dataSet[lines[l].dataSetIndex]
for (let c = lines[l].charStartIndex; c < lines[l].charEndIndex; c++) { for (let c = lines[l].charStartIndex; c < lines[l].charEndIndex; c++) {
...@@ -315,17 +299,21 @@ var ADocEditor = function (customConfig) { ...@@ -315,17 +299,21 @@ var ADocEditor = function (customConfig) {
} }
} }
if (!caretData.blink && caretData.activeData) renderCaret()
// to render caret // to render caret
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;
if (caretData.caretIndex == 0) { let activeDataIndex = dataSet.findIndex( item => item.id == caretData.activeData.id )
// pick style from line let activeLine = lines.find( item => item.dataSetIndex == activeDataIndex && item.charEndIndex>caretData.index )
} else { let characterData = dataSet[activeDataIndex].formatedText[ caretData.index ]
// pick style for previous character
}
let rectX = characterData?characterData.x:activeLine.x,
rectY = activeLine.y-activeLine.maxFontSize,
rectWidth = 2,
rectHeight = 5 * activeLine.maxFontSize / 4;
const imageData = ctx.getImageData(rectX, rectY, rectWidth, rectHeight); const imageData = ctx.getImageData(rectX, rectY, rectWidth, rectHeight);
const data = imageData.data; const data = imageData.data;
...@@ -361,8 +349,8 @@ var ADocEditor = function (customConfig) { ...@@ -361,8 +349,8 @@ var ADocEditor = function (customConfig) {
ctx.fillRect(0, 0, canvas.width, canvas.height) 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)
canvas.addEventListener("blur", onBlurHandler) // canvas.addEventListener("blur", onBlurHandler)
canvas.setAttribute("tabIndex", -1) canvas.setAttribute("tabIndex", -1)
scrollingComponent.append(canvas) scrollingComponent.append(canvas)
return canvas return canvas
...@@ -386,8 +374,8 @@ var ADocEditor = function (customConfig) { ...@@ -386,8 +374,8 @@ var ADocEditor = function (customConfig) {
caretData.blink = false caretData.blink = false
if (e.shiftKey && e.ctrlKey) { } // ctr+shift combination if (e.shiftKey && (e.ctrlKey || e.metaKey)) { } // ctr+shift combination
else if (e.ctrlKey) { else if (e.ctrlKey || e.metaKey) {
if (e.keyCode == 8) { // ctrl+backspace: delete the entrite word if (e.keyCode == 8) { // ctrl+backspace: delete the entrite word
let separatedSentence = caretData.activeData.plainContent.slice(0, caretData.index) let separatedSentence = caretData.activeData.plainContent.slice(0, caretData.index)
let indexOfpreviousBlankChar = separatedSentence.search(/[^a-zA-Z0-9](?=[a-zA-Z0-9]*$)/) let indexOfpreviousBlankChar = separatedSentence.search(/[^a-zA-Z0-9](?=[a-zA-Z0-9]*$)/)
...@@ -435,9 +423,13 @@ var ADocEditor = function (customConfig) { ...@@ -435,9 +423,13 @@ var ADocEditor = function (customConfig) {
caretData.activeData = previousData caretData.activeData = previousData
caretData.index = previousData.plainContent.length caretData.index = previousData.plainContent.length
} }
caretData.canvasIndex = canvasList.findIndex( item => item.el == e.target )
} else { } else {
caretData.index = (caretData.index <= 0) ? 0 : caretData.index - 1 caretData.index = (caretData.index <= 0) ? 0 : caretData.index - 1
} }
reRenderPages(dataSet, { onlyCursor: true })
return
} }
else if (e.keyCode == 38) { // up key else if (e.keyCode == 38) { // up key
e.preventDefault() e.preventDefault()
...@@ -455,6 +447,9 @@ var ADocEditor = function (customConfig) { ...@@ -455,6 +447,9 @@ var ADocEditor = function (customConfig) {
} }
} }
caretData.canvasIndex = canvasList.findIndex( item => item.el == e.target )
reRenderPages(dataSet, { onlyCursor: true })
return
} }
else if (e.keyCode == 40) { // down key else if (e.keyCode == 40) { // down key
e.preventDefault() e.preventDefault()
......
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