Commit a4c79ebc by ramdayalmunda

caret blinking fix

parent 71e1227a
...@@ -36,8 +36,8 @@ var ADocEditor = function (customConfig) { ...@@ -36,8 +36,8 @@ var ADocEditor = function (customConfig) {
var caretData = { var caretData = {
activeData: dataList[0], activeData: dataList[0],
index: 0, index: 0,
interval: null, timeout: null,
intervalDuration: 800, timeoutDuration: 800,
blink: false, blink: false,
canvasIndex: 0, canvasIndex: 0,
caretSize: config.style.fontSize, caretSize: config.style.fontSize,
...@@ -165,6 +165,7 @@ var ADocEditor = function (customConfig) { ...@@ -165,6 +165,7 @@ var ADocEditor = function (customConfig) {
} }
function reRenderCanvas() { function reRenderCanvas() {
console.clear()
console.log('to rerender the page') console.log('to rerender the page')
if (isRendering) return if (isRendering) return
let pageIndex = 0 let pageIndex = 0
...@@ -200,7 +201,46 @@ var ADocEditor = function (customConfig) { ...@@ -200,7 +201,46 @@ var ADocEditor = function (customConfig) {
} }
function renderCaret(){ function renderCaret(){
console.log('handle blinking') clearTimeout( caretData.timeout )
let ctx = pageList[0].el.getContext('2d', { willReadFrequently: true })
if (caretData.previousCaret){
const imageData = ctx.getImageData(caretData.previousCaret.x, caretData.previousCaret.y, caretData.previousCaret.width, caretData.previousCaret.height);
const data = imageData.data;
// Invert the color of the rectangular region
for (let i = 0; i < data.length; i += 4) {
data[i] = 255 - data[i]; // Red
data[i + 1] = 255 - data[i + 1]; // Green
data[i + 2] = 255 - data[i + 2]; // Blue
// Alpha channel remains unchanged (data[i + 3])
ctx.putImageData(imageData, caretData.previousCaret.x, caretData.previousCaret.y);
}
caretData.previousCaret = null
}
if (!caretData.blink){
const imageData = ctx.getImageData(100, 200, 10, 300);
const data = imageData.data;
// Invert the color of the rectangular region
for (let i = 0; i < data.length; i += 4) {
data[i] = 255 - data[i]; // Red
data[i + 1] = 255 - data[i + 1]; // Green
data[i + 2] = 255 - data[i + 2]; // Blue
// Alpha channel remains unchanged (data[i + 3])
ctx.putImageData(imageData, 100, 200);
}
caretData.previousCaret = { x: 100, y: 200, width: 10, height: 300 }
caretData.blink = true
}else{
caretData.blink = false
}
caretData.timeout = setTimeout( ()=>{
renderCaret()
}, caretData.timeoutDuration )
} }
......
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