Scribd
Upload
9 views3 pages

Index TSX

Uploaded by

AlbertCG93
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
9 views3 pages

Index TSX

Uploaded by

AlbertCG93
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
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