Commit 9b2648a1 by ramdayalmunda

proper color blinking in caret

parent 19d18528
...@@ -18,7 +18,7 @@ var ADocEditor = function (customConfig) { ...@@ -18,7 +18,7 @@ var ADocEditor = function (customConfig) {
fontFamily: 'Calibri', fontFamily: 'Calibri',
bold: false, bold: false,
italic: false, italic: false,
fontColor: "#001" fontColor: "#f01"
}, },
} }
config = JSON.parse(JSON.stringify(defaultConfig)) config = JSON.parse(JSON.stringify(defaultConfig))
...@@ -194,6 +194,7 @@ var ADocEditor = function (customConfig) { ...@@ -194,6 +194,7 @@ var ADocEditor = function (customConfig) {
calculateTextSizeAndPosition() calculateTextSizeAndPosition()
renderLines() renderLines()
caretData.previousCaret = null
renderCaret() renderCaret()
function calculateTextSizeAndPosition() { function calculateTextSizeAndPosition() {
...@@ -269,6 +270,7 @@ var ADocEditor = function (customConfig) { ...@@ -269,6 +270,7 @@ var ADocEditor = function (customConfig) {
ctx.restore() ctx.restore()
} }
return
} }
...@@ -302,6 +304,7 @@ var ADocEditor = function (customConfig) { ...@@ -302,6 +304,7 @@ var ADocEditor = function (customConfig) {
ctx.restore() ctx.restore()
} }
return
} }
function renderCaret() { function renderCaret() {
...@@ -310,46 +313,36 @@ var ADocEditor = function (customConfig) { ...@@ -310,46 +313,36 @@ var ADocEditor = function (customConfig) {
ctx.save() ctx.save()
if (caretData.previousCaret) { if (caretData.previousCaret) {
ctx.putImageData(caretData.previousCaret.imageData, caretData.previousCaret.x, caretData.previousCaret.y);
const imageData = ctx.getImageData(caretData.style.x, caretData.style.y, caretData.style.fontSize / 5, caretData.style.fontSize);
const data = imageData.data;
// Invert the color of the rectangular region
for (let i = 0; i < data.length; i += 4) {
data[i] = data[i] + 255; // Red
data[i + 1] = data[i + 1] + 255; // Green
data[i + 2] = data[i + 2] + 255; // Blue
// Alpha channel remains unchanged (data[i + 3])
ctx.putImageData(imageData, 100, 200);
}
caretData.previousCaret = null caretData.previousCaret = null
} }
if (!caretData.blink) { if (!caretData.blink) {
console.log(caretData.style.x, caretData.style.y, caretData.style.fontSize / 5, caretData.style.fontSize) let x = config.format.margin*pxMmRatio
const imageData = ctx.getImageData(caretData.style.x, caretData.style.y, caretData.style.fontSize / 5, caretData.style.fontSize); let y = (config.format.margin)*pxMmRatio
let height = config.style.fontSize*pxMmRatio*5/4
let width = height/8
const imageData = ctx.getImageData(x, y, width, height);
const data = imageData.data; const data = imageData.data;
caretData.previousCaret = { imageData: structuredClone(imageData), x, y }
// Invert the color of the rectangular region // Invert the color of the rectangular region
for (let i = 0; i < data.length; i += 4) { for (let i = 0; i < data.length; i += 4) {
data[i] = 255 - data[i]; // Red data[i] = 255 - data[i]; // Red
data[i + 1] = 255 - data[i + 1]; // Green data[i + 1] = 255 - data[i + 1]; // Green
data[i + 2] = 255 - data[i + 2]; // Blue data[i + 2] = 255 - data[i + 2]; // Blue
// Alpha channel remains unchanged (data[i + 3]) // Alpha channel remains unchanged (data[i + 3])
ctx.putImageData(imageData, 100, 200);
} }
caretData.previousCaret = [caretData.style.x, caretData.style.y, caretData.style.fontSize / 5, caretData.style.fontSize] ctx.putImageData(imageData, x, y);
caretData.blink = true caretData.blink = true
} else { } else {
caretData.blink = false caretData.blink = false
} }
ctx.restore()
ctx.restore()
caretData.timeout = setTimeout(() => { caretData.timeout = setTimeout(() => {
renderCaret() renderCaret()
}, caretData.timeoutDuration) }, caretData.timeoutDuration)
return
} }
function getCharacterWidth(char, style) { function getCharacterWidth(char, style) {
console.log('style', style) console.log('style', style)
...@@ -395,7 +388,8 @@ var ADocEditor = function (customConfig) { ...@@ -395,7 +388,8 @@ var ADocEditor = function (customConfig) {
function keydownHandler(e) { function keydownHandler(e) {
console.clear() console.clear()
if (e.key == 'Backspace') { if (e.altKey) return
else if (e.key == 'Backspace') {
if (caretData.index == 0) { if (caretData.index == 0) {
let activeDataIndex = dataList.findIndex( item => item.id==caretData.activeData.id ) let activeDataIndex = dataList.findIndex( item => item.id==caretData.activeData.id )
if (activeDataIndex>0){ if (activeDataIndex>0){
......
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