import React, { CSSProperties } from 'react';
import ReactDOM from 'react-dom/client';
import { text } from 'stream/consumers';
import './index.css';
class Caret {
protected INTERVAL_TIME_MS: number = 500;
protected rowIndex: number;
protected columnIndex: number;
protected x: number;
protected y: number;
protected isVisible: boolean;
protected timer: NodeJS.Timer | null;
constructor() {
this.rowIndex = -1;
this.columnIndex = -1;
this.x = -1;
this.y = -1;
this.isVisible = false;
this.timer = null;
}
public setRowIndex(rowIndex: number): boolean {
let doUpdate: boolean = false;
const textDimensions = getTextDimensions("a", getCanvasFont());
if ((this.rowIndex != rowIndex) && (rowIndex >= 0)) {
this.rowIndex = rowIndex;
this.y = Math.round(rowIndex * (textDimensions.height +
Number(getComputedStyle(document.documentElement).getPropertyValue('--text-border-
size'))));
document.documentElement.style.setProperty('--caret-y',
this.y.toString());
doUpdate = true;
}
return doUpdate;
}
public setColumnIndex(columnIndex: number): boolean {
let doUpdate: boolean = false;
const indexWidth: number =
Number(getComputedStyle(document.documentElement).getPropertyValue('--text-index-
width'));
const textDimensions = getTextDimensions("a", getCanvasFont());
if ((this.columnIndex != columnIndex) && (columnIndex >= 0)) {
this.columnIndex = columnIndex;
this.x = indexWidth + Math.round(columnIndex * textDimensions.width);
document.documentElement.style.setProperty('--caret-x',
this.x.toString());
doUpdate = true;
}
return doUpdate;
}
public setIndexes(rowIndex: number, columnIndex: number): boolean {
let doUpdate: boolean = false;
const indexWidth: number =
Number(getComputedStyle(document.documentElement).getPropertyValue('--text-index-
width'));
const textDimensions = getTextDimensions("a", getCanvasFont());
if ((this.rowIndex != rowIndex) && (rowIndex >= 0)) {
this.rowIndex = rowIndex;
this.y = Math.round(rowIndex * (textDimensions.height +
Number(getComputedStyle(document.documentElement).getPropertyValue('--text-border-
size'))));
document.documentElement.style.setProperty('--caret-y',
this.y.toString());
doUpdate = true;
}
if ((this.columnIndex != columnIndex) && (columnIndex >= 0)) {
this.columnIndex = columnIndex;
this.x = indexWidth + Math.round(columnIndex * textDimensions.width);
document.documentElement.style.setProperty('--caret-x',
this.x.toString());
doUpdate = true;
}
// console.log("i, j = (", this.rowIndex, ", ", this.columnIndex, ")");
// console.log("x, y = (", this.x, ", ", this.y, ")");
return doUpdate;
}
public getRowIndex(): number {
return this.rowIndex;
}
public getColumnIndex(): number {
return this.columnIndex;
}
public getCoordinateX(): number {
return this.x;
}
public getCoordinateY(): number {
return this.y;
}
// TODO: Rework all of this to avoid using global CSS properties
public startBlinking() {
this.isVisible = true;
document.documentElement.style.setProperty('--caret-display',
this.isVisible ? 'auto' : 'none');
if (this.timer !== null) {
clearInterval(this.timer);
this.timer = null;
}
this.timer = setInterval(() => {
this.isVisible = !this.isVisible;
document.documentElement.style.setProperty('--caret-display',
this.isVisible ? 'auto' : 'none');
},
this.INTERVAL_TIME_MS);
}
public stopBlinking() {
if (this.timer !== null) {
clearInterval(this.timer);
this.timer = null;
this.isVisible = false;
document.documentElement.style.setProperty('--caret-display',
this.isVisible ? 'auto' : 'none');
}
}
}
