Scribd
Upload
3 views

Index TSX

Uploaded by

AlbertCG93
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
3 views

Index TSX

Uploaded by

AlbertCG93
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

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');
}
}
}

You might also like