How to use _selectedCell method in Cypress

1'use babel';2import Clusterize from "clusterize.js"3export default class DataTable {4  constructor(targetQuery, {columns, data, id}) {5    Object.assign(this, {columns, data, id});6    this._lastRowIndex = "0";7    this._selectedCell = undefined;8    this._resizeObserver = undefined;9    this._element = document.createElement('div');10    this._element.id = `${this.id}-scroll-area`;11    this._element.classList.add('clusterize-scroll');12    this._element.addEventListener('keyup', (e)=>document.execCommand('copy'));13    let table = document.createElement("table");14    table.appendChild(this._getColumnsElement());15    table.onkeydown = (e)=>this._onTableKeyPress(e);16    this._tBody = document.createElement("tbody");17    this._tBody.id = `${this.id}-content-area`;18    this._tBody.classList.add('clusterize-content');19    this._tBody.onclick = (el)=>{20      if (el.target && el.target.tagName === 'TD' && !el.target.classList.contains('dbex-col-index')) {21        this._changeSelectedCell(el.target)22      }23    };24    table.appendChild(this._tBody);25    this._element.appendChild(table);26    let target = document.querySelector(targetQuery);27    target.innerHTML = "";28    target.appendChild(this._element);29    this._makeColsResizable(document.querySelector(`#${this._element.id} > table`));30    this._clusterize(table);31    this._changeSelectedCell(table.getElementsByClassName('dbex-selected-cell')[0]);32  }33  _clusterize(table) {34    this.clusterize = new Clusterize({35      rows: this._generateDataRowsEl(),36      scrollId: this._element.id,37      contentId: this._tBody.id,38      callbacks: {39        clusterWillChange: (e)=>{40          let selectedCell = table.getElementsByClassName('dbex-selected-cell')[0];41           if (selectedCell) {42             this._lastRowIndex = selectedCell.closest('tr').dataset.row;43             this._lastColIndex = this._getSelectedColIndex(selectedCell);44             selectedCell.classList.remove('dbex-selected-cell');45           }46        },47        clusterChanged: (e)=>{48          let row = table.querySelectorAll(`[data-row="${this._lastRowIndex}"] > td`)[this._lastColIndex];49          if (row) {50            row.classList.add('dbex-selected-cell');51            this._changeSelectedCell(row);52          }53        },54      }55    });56  }57  _makeColsResizable(table) {58    table.querySelectorAll('th').forEach((col) => {59        this._setColumnAsResizable(col, col.querySelector('.resizer'));60    });61  }62  _setColumnAsResizable(col, resizer) {63      let clientStartPos = 0;64      let elementWidth = 0;65      let onMouseDown = function(e) {66          clientStartPos = e.clientX;67          elementWidth = parseInt(window.getComputedStyle(col).width, 10);68          document.addEventListener('mousemove', onMouseMove);69          document.addEventListener('mouseup', onMouseUp);70      };71      let onMouseMove = function(el) {72          let newWidth = el.clientX - clientStartPos;73          col.style.minWidth = `${elementWidth + newWidth}px`;74      };75      let onMouseUp = function() {76          document.removeEventListener('mousemove', onMouseMove);77          document.removeEventListener('mouseup', onMouseUp);78      };79      resizer.addEventListener('mousedown', onMouseDown);80  }81  _changeSelectedCell(cellToSelect, scrollBlock = 'nearest') {82    if (!cellToSelect) {83      return;84    }85    if (this._selectedCell) {86      this._selectedCell.classList.remove("dbex-selected-cell");87      this._selectedCell.parentElement.classList.remove("dbex-selected-row");88    }89    this._selectedCell = cellToSelect;90    this._selectedCell.classList.add("dbex-selected-cell")91    this._selectedCell.parentElement.classList.add("dbex-selected-row");92    this._selectedCell.scrollIntoView({block: scrollBlock});93    this._selectedCell.focus();94    this._bringCellToVisible();95  }96  _bringCellToVisible() {97    let visibleEdges = this._tBody.closest('.result-data').getBoundingClientRect();98    let limitTop = visibleEdges.top;99    let cellVisible = this._selectedCell.getBoundingClientRect();100    let headerHeight = cellVisible.height;101    let colIndexWidth = this._selectedCell.parentElement.firstChild.getBoundingClientRect().width;102    let limitLeft = visibleEdges.left;103    if (cellVisible.top < (limitTop + headerHeight)) {104      this._element.scroll(this._element.scrollLeft, this._element.scrollTop - headerHeight);105    }106    if (cellVisible.left < (limitLeft + colIndexWidth)) {107      this._element.scroll(this._element.scrollLeft - colIndexWidth, this._element.scrollTop);108    }109  }110  _onTableKeyPress(event) {111    let keyPressed = event ? event.key : window.event.key;112    let nextCell, scrollBlock;113    if (keyPressed == 'ArrowUp') {114      let nextRow = this._selectedCell.parentElement.previousElementSibling;115      if (nextRow != null && nextRow.cells.length > 0) {116        nextCell = nextRow.cells[this._selectedCell.cellIndex];117        scrollBlock = nextCell.parentElement.dataset.row === "0" ? 'end' : 'nearest';118      }119    } else if (keyPressed == 'ArrowDown') {120      let nextRow = this._selectedCell.parentElement.nextElementSibling;121      if (nextRow != null) {122        nextCell = nextRow.cells[this._selectedCell.cellIndex];123      }124    } else if (keyPressed == 'ArrowLeft') {125      let sibling = this._selectedCell.previousElementSibling;126      if (!sibling) {127        return;128      }129      if (!sibling.classList.contains('dbex-col-index')) {130        nextCell = sibling;131      } else {132        this._element.scrollLeft -= sibling.offsetWidth;133      }134    } else if (keyPressed == 'ArrowRight') {135      nextCell = this._selectedCell.nextElementSibling136    } else if (keyPressed == 'PageDown') {137      let limitBottom = this._tBody.closest('.result-data').getBoundingClientRect().bottom;138      let rowFound, lastRow;139      this._tBody.querySelectorAll('tr').forEach((row)=>{140          if (!rowFound && row.getBoundingClientRect().bottom > limitBottom) {141              rowFound = lastRow;142          }143          lastRow = row;144      });145      if (rowFound) {146        scrollBlock = 'start';147        nextCell = rowFound.querySelectorAll('td')[148          this._getSelectedColIndex(this._selectedCell)149        ];150      }151    } else if (keyPressed == 'PageUp') {152      let limitTop = this._tBody.closest('.result-data').getBoundingClientRect().top;153      let rowFound;154      this._selectedCell.scrollIntoView({block:'end'});155      this._tBody.querySelectorAll('tr').forEach((row)=>{156          if (!rowFound && row.getBoundingClientRect().top > limitTop) {157              rowFound = row;158          }159      });160      if (rowFound) {161        nextCell = rowFound.querySelectorAll('td')[162          this._getSelectedColIndex(this._selectedCell)163        ];164        scrollBlock = nextCell.parentElement.dataset.row === "0" ? 'end' : 'nearest';165      }166    }167    this._changeSelectedCell(nextCell, scrollBlock);168  }169  _getSelectedColIndex(cell) {170    let selectedColIndex = 0;171    cell.closest('tr').querySelectorAll('td').forEach((col, i)=>{172        if (col.classList.contains('dbex-selected-cell')) {173          selectedColIndex = i;174        }175    });176    return selectedColIndex;177  }178  get _columnSizes() {179    //TODO: implement these values in a proper way, as a DI or by another class constant180    return ['dbex-col-undefined', 'dbex-col-number', 'dbex-col-text', 'dbex-col-boolean', 'dbex-col-date'];181  }182  _generateDataRowsEl(selectedCellIndex = 0) {183    let rows = [];184    this.data.forEach((srcData, index) => {185      let row = document.createElement("tr");186      row.dataset.row = index;187      let elData = document.createElement("td");188      elData.classList.add('dbex-col-index', 'tool-panel');189      elData.innerHTML = `<div class="td-inner">${index}</div>`;190      elData.classList.add(this._columnSizes[1]);191      row.appendChild(elData);192      Object.values(srcData).forEach((dataItem, dataIdx) => {193        let elData = document.createElement("td");194        if (dataItem === null) {195          elData.classList.add('dbex-value-null');196        } else {197          elData.innerHTML = dataItem;198        }199        let colType = this.columns[dataIdx] ? this.columns[dataIdx].type : 0;200        elData.classList.add(this._columnSizes[colType]);201        row.appendChild(elData);202      });203      rows.push(row.outerHTML);204    });205    if (this.data.length === 0) {206      let row = document.createElement("tr");207      row.innerHTML = `<td colspan="${this.columns.length}">No data</td>`;208      rows.push(row.outerHTML);209    }210    return rows;211  }212  _getColumnsElement() {213    let colRow = document.createElement("tr");214    let width = this._columnSizes[1];215    let elColumn = document.createElement("th");216    elColumn.classList.add(width, 'dbex-col-index', 'dbex-dead-corner', 'tool-panel');217    elColumn.innerHTML = `218    <div class="th-inner">219      <div class="th-text"></div>220      <div class="resizer"></div>221    </div>222    `;223    colRow.appendChild(elColumn);224    this.columns.forEach((srcColumn) => {225      let width = this._columnSizes[srcColumn.type];226      let elColumn = document.createElement("th");227      elColumn.classList.add(width, 'tool-panel');228      elColumn.innerHTML = `229      <div class="th-inner">230        <div class="th-text">${srcColumn.name}</div>231        <div class="resizer"></div>232      </div>233      `;234      colRow.appendChild(elColumn);235    });236    let cols = document.createElement("thead");237    cols.appendChild(colRow);238    return cols;239  }240  destroy() {241    this.dispose();242  }243  dispose() {244    this.clusterize.destroy();245  }...

1var SudokuUI = function(element) {2	this._root = element;3	this._root.innerHTML = "";4	var ui = this;5	document.addEventListener("keypress", function(evt) { ui.handleKeypress(evt); });6	document.addEventListener("keydown", function(evt) { ui.handleKeydown(evt); });7	this._newbutton = document.createElement("button");8	this._newbutton.innerHTML = "New";9	this._newbutton.id = "new";10	this._newbutton.addEventListener("click", function(evt) { ui.newPuzzle(); });11	this._restartbutton = document.createElement("button");12	this._restartbutton.innerHTML = "Restart";13	this._restartbutton.id = "restart";14	this._restartbutton.addEventListener("click", function(evt) { ui.restartPuzzle(); });15	this._restorebutton = document.createElement("button");16	this._restorebutton.innerHTML = "Restore";17	this._restorebutton.id = "restore";18	this._restorebutton.addEventListener("click", function(evt) { ui.restorePuzzle(); });19	this._restorebutton.style.visibility = "hidden";20	this._levelselect = document.createElement("select");21	this._levelselect.id = "level";22	var levelnames = ["level1", "level2", "level3", "level4", "level5"];23	var leveldescriptions = ["Easy", "Normal", "Hard", "Very hard", "Insane"];24	for(var i=0; i<levelnames.length; ++i) {25		var option = document.createElement("option");26		option.value = levelnames[i];27		option.innerHTML = leveldescriptions[i];28		this._levelselect.appendChild(option);29	}30	this._levelselect.addEventListener("click", function(evt) {evt.stopPropagation(); });31	this._winbox = document.createElement("div");32	this._winbox.classList.add("winbox");33	this._winbox.id = "winbox";34	this._root.appendChild(this._winbox);35	var wintext = document.createElement("span");36	wintext.classList.add("wintext");37	wintext.innerHTML = "Solved!";38	this._winbox.appendChild(wintext);39	this._winbox.style.visibility = "hidden";40	this._root.appendChild(this._newbutton);41	this._root.appendChild(this._restartbutton);42	this._root.appendChild(this._restorebutton);43	this._root.appendChild(this._levelselect);44	document.addEventListener("click", function(evt) { ui.handleClick(); });45	this.loadPuzzle();46};47SudokuUI.prototype.handleClick = function() {48	this.deselectCell();49	this._winbox.style.visibility = "hidden";50}51SudokuUI.prototype.deselectCell = function() {52	if(!this._cellSelected) {53		return;54	}55	this._cells[this._selectedCell.i][this._selectedCell.j].dataset.active = "";56	this._cellSelected = false;57}58SudokuUI.prototype.handleSet = function(i,j,value) {59	this._cells[i][j].innerHTML = (value == -1 ? "&nbsp;" : value);60	this._restorebutton.style.visibility = "hidden";61	this._restartbutton.style.visibility = "visible";62}63SudokuUI.prototype.handleClear = function() {64	for(var i=0; i<this._sudoku.m*this._sudoku.n; ++i) {65		for(var j=0; j<this._sudoku.m*this._sudoku.n; ++j) {66			this.handleSet(i,j,this._sudoku.get(i,j));67		}68	}69	this._restorebutton.style.visibility = "visible";70	this._restartbutton.style.visibility = "hidden";71}72SudokuUI.prototype.handleRestore = function() {73	for(var i=0; i<this._sudoku.m*this._sudoku.n; ++i) {74		for(var j=0; j<this._sudoku.m*this._sudoku.n; ++j) {75			this.handleSet(i,j,this._sudoku.get(i,j));76		}77	}78	this._restorebutton.style.visibility = "hidden";79	this._restartbutton.style.visibility = "visible";80}81SudokuUI.prototype.loadPuzzle = function() {82	var s = Sudoku.load();83	if(!s) {84		this.newPuzzle();85	}86	else {87		this._sudoku = s;88		this.initPuzzle();89	}90}91SudokuUI.prototype.newPuzzle = function(level=null) {92	if(!level) {93		var level = this._levelselect.value;94	}95	this._sudoku = Sudoku.create(level);96	this.initPuzzle();97}98SudokuUI.prototype.handleWin = function() {99	this._winbox.style.visibility = "visible";100}101SudokuUI.prototype.initPuzzle = function() {102	var ui = this;103	this._sudoku.registerCallback("set", function(i,j,value) { ui.handleSet(i,j,value); });104	this._sudoku.registerCallback("clear", function(i,j,value) { ui.handleClear(); });105	this._sudoku.registerCallback("restore", function(i,j,value) { ui.handleRestore(); });106	this._sudoku.registerCallback("win", function() { ui.handleWin(); });107	this._cellSelected = false;108	this._selectedCell = { i : 0, j : 0 };109	// remove old grid110	if(this._table) {111		this._root.removeChild(this._table);112	}113	// create new grid114	var ui = this;115	var m = this._sudoku.m;116	var n = this._sudoku.n;117	this._cells = [];118	this._table = document.createElement("table");119	this._table.id = "grid";120	for(let i=0; i<m*n; ++i) {121		this._cells.push([]);122		var row = document.createElement("tr");123		this._table.appendChild(row);124		for(let j=0; j<m*n; ++j) {125			var cell = document.createElement("td");126			this._cells[i].push(cell);127			row.appendChild(cell);128			cell.addEventListener("click", function(evt) { ui.handleCellClick(evt, i,j); });129			if(i%m == 0) {130				cell.classList.add("thicktop");131			}132			if(j%n == 0) {133				cell.classList.add("thickleft");134			}135			if(this._sudoku.given(i,j)) {136				cell.classList.add("given");137			}138		}139	}140	this._root.appendChild(this._table);141	for(var i=0; i<this._sudoku.m*this._sudoku.n; ++i) {142		for(var j=0; j<this._sudoku.m*this._sudoku.n; ++j) {143			this.handleSet(i,j,this._sudoku.get(i,j));144		}145	}146	this._restorebutton.style.visibility = (this._sudoku);147	this._restartbutton.style.visibility = (this._sudoku.givens + this._sudoku.blanks == m*m*n*n ? "hidden" : "visible");148};149SudokuUI.prototype.restartPuzzle = function() {150	this._sudoku.clear();151};152SudokuUI.prototype.restorePuzzle = function() {153	this._sudoku.restore();154};155SudokuUI.prototype.handleCellClick = function(evt, i, j) {156	if(this._cellSelected) {157		this._cells[this._selectedCell.i][this._selectedCell.j].dataset.active = "";158	}159	this._cellSelected = true;160	this._selectedCell.i = i;161	this._selectedCell.j = j;162	this._cells[this._selectedCell.i][this._selectedCell.j].dataset.active = "active";163	evt.stopPropagation(); // don't propagate to a click on the document164};165SudokuUI.prototype.handleKeypress = function(evt) {166	if(!this._cellSelected) {167		return;168	}169	var i = this._selectedCell.i;170	var j = this._selectedCell.j;171	if(this._sudoku.given(i,j)) {172		return;173	}174	var key = evt.key;175	var number = Number(key);176	if(number && number <= this._sudoku.m * this._sudoku.n) {177		this._sudoku.set(i,j,number);178	} else if (key == " " || key == "0") {179		this._sudoku.set(i,j,-1);180	}181};182SudokuUI.prototype.handleKeydown = function(evt) {183	if(this._cellSelected) {184		var i = this._selectedCell.i;185		var j = this._selectedCell.j;186		this._cells[i][j].dataset.active = "";187		var m = this._sudoku.m;188		var n = this._sudoku.n;189		switch(evt.keyCode) {190			case 37: //left191				j -= 1;192				break;193			case 38: //up194				i -= 1;195				break;196			case 39: //right197				j += 1;198				break;199			case 40: //down200				i += 1;201				break;202			case 46: //delete203			case 8:  //backspace204				this._sudoku.set(i,j,-1);205				break;206			case 27: //escape207				this.deselectCell();208				return;209			default:210				break;211		}212		if(i < 0) i=0;213		if(i >= m*n) i = m*n-1;214		if(j < 0) j=0;215		if(j >= m*n) j = m*n-1;216		this._selectedCell.i = i;217		this._selectedCell.j = j;218		this._cells[i][j].dataset.active = "active";219	}...

1import Cell from "./Cell.js";2class Puzzle {3	constructor({4		element,5		image: { x, y, width: imgWidth, height: imgHeight },6		grid: { rows, cols },7	}) {8		this._canvas = element;9		this._ctx = this._canvas.getContext("2d");10		this._image = {11			x,12			y,13			width: imgWidth,14			height: imgHeight,15			src: "../assets/img/mountains.jpg",16		};17		this._grid = {18			rows,19			cols,20			elements: [],21		};22		this._cells = [];23		this._selectedCell = null;24		this._hoveredCell = null;25		this.init();26	}27	init() {28		this._canvas.width = window.innerWidth;29		this._canvas.height = window.innerHeight;30		this.addEventListeners();31		const image = new Image();32		image.src = this._image.src;33		image.onload = () => {34			this.set();35			this.updateCanvas(image);36		};37	}38	isEnded() {39		return this._grid.elements.length ? false : true;40	}41	restart() {42		this.set();43	}44	addEventListeners() {45		this._canvas.addEventListener("mousedown", this.onMouseDown.bind(this));46		this._canvas.addEventListener("mouseout", this.onMouseOut.bind(this));47		this._canvas.addEventListener(48			"mousemove",49			this.handleHoverEvent.bind(this),50		);51		this._canvas.addEventListener("dragstart", () => {52			return false;53		});54	}55	handleHoverEvent(event) {56		this._hoveredCell = this.getCell(event.x, event.y);57		if (this._hoveredCell === null || this._hoveredCell.isInserted) {58			document.body.style.cursor = "default";59			return;60		}61		if (document.body.style.cursor === "grabbing") return;62		document.body.style.cursor = "grab";63	}64	onMouseOut() {65		this._canvas.onmousemove = null;66	}67	onMouseDown(event) {68		this._selectedCell = this.getCell(event.x, event.y);69		if (this._selectedCell === null) return;70		if (this._selectedCell.isInserted) return;71		document.body.style.cursor = "grabbing";72		const index = this._cells.indexOf(this._selectedCell);73		if (index !== -1) {74			this._cells.splice(index, 1);75			this._cells.push(this._selectedCell);76		}77		this._selectedCell.offset = {78			x: event.x - this._selectedCell.x,79			y: event.y - this._selectedCell.y,80		};81		//this._selectedCell.start = {82		//	x: this._selectedCell.x,83		//	y: this._selectedCell.y,84		//};85		this._canvas.onmousemove = this.onMouseMove.bind(this);86		this._canvas.onmouseup = this.onMouseUp.bind(this);87	}88	onMouseMove(event) {89		let x = event.x - this._selectedCell.offset.x;90		let y = event.y - this._selectedCell.offset.y;91		if (x < 0) {92			x = 0;93		}94		if (y < 0) {95			y = 0;96		}97		if (x > window.innerWidth - this._selectedCell.width) {98			x = window.innerWidth - this._selectedCell.width;99		}100		if (y > window.innerHeight - this._selectedCell.height) {101			y = window.innerHeight - this._selectedCell.height;102		}103		this._selectedCell.x = x;104		this._selectedCell.y = y;105	}106	onMouseUp(event) {107		this._canvas.onmousemove = null;108		this._canvas.onmouseup = null;109		this.insertCell(event.x, event.y);110		delete this._selectedCell.offset;111		//delete this._selectedCell.start;112		this._selectedCell = null;113		document.body.style.cursor = "grab";114	}115	getCell(x, y) {116		for (let i = this._cells.length - 1; i >= 0; i--) {117			let cell = this._cells[i];118			if (119				x > cell.x &&120				x < cell.x + cell.width &&121				y > cell.y &&122				y < cell.y + cell.height123			) {124				return cell;125			}126		}127		return null;128	}129	insertCell(x, y) {130		for (let i = 0; i < this._grid.elements.length; i++) {131			const gridItem = this._grid.elements[i];132			if (133				x >= gridItem.x &&134				x <= gridItem.x + this._selectedCell.width &&135				y >= gridItem.y &&136				y <= gridItem.y + this._selectedCell.height &&137				this._selectedCell.rowIndex === gridItem.rowIndex &&138				this._selectedCell.colIndex === gridItem.colIndex139			) {140				if (!this.isCellFree(gridItem.x, gridItem.y)) {141					return;142				}143				this._selectedCell.x = gridItem.x;144				this._selectedCell.y = gridItem.y;145				this._selectedCell.isInserted = true;146				const index = this._grid.elements.indexOf(gridItem);147				if (index !== -1) {148					this._grid.elements.splice(index, 1);149				}150				return;151			}152		}153		//this._selectedCell.x = this._selectedCell.start.x;154		//this._selectedCell.y = this._selectedCell.start.y;155	}156	isCellFree(gridX, gridY) {157		for (let i = 0; i < this._cells.length - 1; i++) {158			const cell = this._cells[i];159			if (160				((gridX < cell.x && cell.x < gridX + cell.width) ||161					(gridX < cell.x + cell.width &&162						cell.x + cell.width < gridX + cell.width)) &&163				((gridY < cell.y && cell.y < gridY + cell.height) ||164					(gridY < cell.y + cell.height &&165						cell.y + cell.height < gridY + cell.height))166			) {167				return false;168			}169		}170		return true;171	}172	updateCanvas(image) {173		this._ctx.clearRect(0, 0, this._canvas.width, this._canvas.height);174		this._ctx.globalAlpha = 0.25;175		this._ctx.drawImage(176			image,177			this._image.x,178			this._image.y,179			this._image.width,180			this._image.height,181		);182		this._ctx.globalAlpha = 1;183		this.draw(image);184		window.requestAnimationFrame(this.updateCanvas.bind(this, image));185	}186	set() {187		this._cells = [];188		this._grid.elements = [];189		for (let rowIndex = 0; rowIndex < this._grid.rows; rowIndex++) {190			for (let colIndex = 0; colIndex < this._grid.cols; colIndex++) {191				const coordinates = {192					x:193						this._image.x +194						(this._image.width * colIndex) / this._grid.cols,195					y:196						this._image.y +197						(this._image.height * rowIndex) / this._grid.rows,198				};199				const gridItem = {200					rowIndex,201					colIndex,202					x: coordinates.x,203					y: coordinates.y,204				};205				const cell = {206					...gridItem,207					width: this._image.width / this._grid.cols,208					height: this._image.height / this._grid.rows,209					cx: (this._image.width * colIndex) / this._grid.cols,210					cy: (this._image.height * rowIndex) / this._grid.rows,211				};212				this._grid.elements.push(gridItem);213				this._cells.push(new Cell(cell));214			}215		}216		this.scatterCells();217	}218	scatterCells() {219		const positions = [];220		let i = 0;221		while (positions.length < this._cells.length) {222			const position = {223				x:224					Math.random() *225						(window.innerWidth / 2 - this._cells[i].width) *226						0.75 +227					window.innerWidth / 16,228				y:229					Math.random() *230						(window.innerHeight - this._cells[i].height) *231						0.75 +232					window.innerHeight / 8,233			};234			if (235				!positions.some(236					(p) =>237						Math.abs(p.x - position.x) < this._cells[i].width &&238						Math.abs(p.y - position.y) < this._cells[i].height,239				)240			) {241				this._cells[i].x = position.x;242				this._cells[i].y = position.y;243				positions.push(position);244				i++;245			}246		}247	}248	draw(image) {249		this.drawGrid(image);250		this.drawCells(image);251	}252	drawGrid(image) {253		for (let i = 0; i < this._grid.elements.length; i++) {254			const gridItem = this._grid.elements[i];255			this._ctx.beginPath();256			this._ctx.strokeStyle = "#d2e9ee";257			this._ctx.rect(258				gridItem.x,259				gridItem.y,260				this._cells[0]?.width,261				this._cells[0]?.height,262			);263			this._ctx.stroke();264		}265	}266	drawCells(image) {267		for (let i = 0; i < this._cells.length; i++) {268			const cell = this._cells[i];269			cell.draw(this._ctx, image);270		}271	}272}...

1//>>built2define("dijit/_PaletteMixin",["dojo/_base/declare","dojo/dom-attr","dojo/dom-class","dojo/dom-construct","dojo/keys","dojo/_base/lang","dojo/on","./_CssStateMixin","./a11yclick","./focus","./typematic"],function(_1,_2,_3,_4,_5,_6,on,_7,_8,_9,_a){3var _b=_1("dijit._PaletteMixin",_7,{defaultTimeout:500,timeoutChangeRate:0.9,value:"",_selectedCell:-1,tabIndex:"0",cellClass:"dijitPaletteCell",dyeClass:null,_dyeFactory:function(_c){4var _d=typeof this.dyeClass=="string"?_6.getObject(this.dyeClass):this.dyeClass;5return new _d(_c);6},_preparePalette:function(_e,_f){7this._cells=[];8var url=this._blankGif;9this.own(on(this.gridNode,_8,_6.hitch(this,"_onCellClick")));10for(var row=0;row<_e.length;row++){11var _10=_4.create("tr",{tabIndex:"-1",role:"row"},this.gridNode);12for(var col=0;col<_e[row].length;col++){13var _11=_e[row][col];14if(_11){15var _12=this._dyeFactory(_11,row,col,_f[_11]);16var _13=_4.create("td",{"class":this.cellClass,tabIndex:"-1",title:_f[_11],role:"gridcell"},_10);17_12.fillCell(_13,url);18_13.idx=this._cells.length;19this._cells.push({node:_13,dye:_12});20}21}22}23this._xDim=_e[0].length;24this._yDim=_e.length;25var _14={UP_ARROW:-this._xDim,DOWN_ARROW:this._xDim,RIGHT_ARROW:this.isLeftToRight()?1:-1,LEFT_ARROW:this.isLeftToRight()?-1:1};26for(var key in _14){27this.own(_a.addKeyListener(this.domNode,{keyCode:_5[key],ctrlKey:false,altKey:false,shiftKey:false},this,function(){28var _15=_14[key];29return function(_16){30this._navigateByKey(_15,_16);31};32}(),this.timeoutChangeRate,this.defaultTimeout));33}34},postCreate:function(){35this.inherited(arguments);36this._setCurrent(this._cells[0].node);37},focus:function(){38_9.focus(this._currentFocus);39},_onCellClick:function(evt){40var _17=evt.target;41while(_17.tagName!="TD"){42if(!_17.parentNode||_17==this.gridNode){43return;44}45_17=_17.parentNode;46}47var _18=this._getDye(_17).getValue();48this._setCurrent(_17);49_9.focus(_17);50this._setValueAttr(_18,true);51evt.stopPropagation();52evt.preventDefault();53},_setCurrent:function(_19){54if("_currentFocus" in this){55_2.set(this._currentFocus,"tabIndex","-1");56}57this._currentFocus=_19;58if(_19){59_2.set(_19,"tabIndex",this.tabIndex);60}61},_setValueAttr:function(_1a,_1b){62if(this._selectedCell>=0){63_3.remove(this._cells[this._selectedCell].node,this.cellClass+"Selected");64}65this._selectedCell=-1;66if(_1a){67for(var i=0;i<this._cells.length;i++){68if(_1a==this._cells[i].dye.getValue()){69this._selectedCell=i;70_3.add(this._cells[i].node,this.cellClass+"Selected");71break;72}73}74}75this._set("value",this._selectedCell>=0?_1a:null);76if(_1b||_1b===undefined){77this.onChange(_1a);78}79},onChange:function(){80},_navigateByKey:function(_1c,_1d){81if(_1d==-1){82return;83}84var _1e=this._currentFocus.idx+_1c;85if(_1e<this._cells.length&&_1e>-1){86var _1f=this._cells[_1e].node;87this._setCurrent(_1f);88this.defer(_6.hitch(_9,"focus",_1f));89}90},_getDye:function(_20){91return this._cells[_20.idx].dye;92}});93return _b;...