mthb-canvas-table
Version:
237 lines (236 loc) • 10.5 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const CanvasTableColum_1 = require("../../share/CanvasTableColum");
exports.Align = CanvasTableColum_1.Align;
exports.Sort = CanvasTableColum_1.Sort;
const CanvasTableEditAction_1 = require("../../share/CanvasTableEditAction");
const CanvasTableMode_1 = require("../../share/CanvasTableMode");
exports.CanvasTableMode = CanvasTableMode_1.CanvasTableMode;
const CanvasTableEdit_1 = require("./../../share/CanvasTableEdit");
const CanvasTableTouchEvent_1 = require("./../../share/CanvasTableTouchEvent");
const CustomCanvasTable_1 = require("./../../share/CustomCanvasTable");
exports.CustomCanvasTable = CustomCanvasTable_1.CustomCanvasTable;
const ScrollView_1 = require("./../../share/ScrollView");
/**
* CanvasTable
* draw table in canvas
*
* ```typescript
* import { CanvasTable, Align } from "mthb-canvas-table";
*
* const col:CanvasTableColumnConf[] = [
* {
* header: "Id",
* field: "__rownum__",
* width: 80,
* align: Align.center
* },
* {
* header: "Name",
* field: "name",
* width: 200
* },
* {
* header: "LastName",
* field: "lastName",
* width: 200
* }
* ];
*
* let data = [{name: "Magni", lastName: "Birgisson"}, {name: "Dagrún", lastName: "Þorsteinsdóttir"}];
*
* /// <canvas id="canvas" style="width:400px; height: 400px"> </canvas>
* const canvasTable = new CanvasTable("canvas", col, data);
* ```
* @typeparam T - Type of objects the list contains
*/
class CanvasTable extends CustomCanvasTable_1.CustomCanvasTable {
/**
* Constructor of CanvasTable
* @param canvas id of canvas or htmlCanvasElemnt
* @param col columns
* @param data array of data
* @param config config
*/
constructor(canvas, col, data = [], config) {
super(config);
this.canvasFocus = (ev) => {
this.setIsFocus(true);
};
this.canvasBlur = (ev) => {
this.setIsFocus(false);
};
this.canvasKeydown = (e) => {
this.keydown(e.keyCode);
};
this.canvasTouchStart = (e) => {
e.preventDefault();
this.TouchStart(CanvasTableTouchEvent_1.TouchEventToCanvasTableTouchEvent(e), this.canvas.offsetLeft, this.canvas.offsetTop);
};
this.canvasTouchMove = (e) => {
e.preventDefault();
this.TouchMove(CanvasTableTouchEvent_1.TouchEventToCanvasTableTouchEvent(e), this.canvas.offsetLeft, this.canvas.offsetTop);
};
this.canvasTouchEnd = (e) => {
e.preventDefault();
this.TouchEnd(CanvasTableTouchEvent_1.TouchEventToCanvasTableTouchEvent(e), this.canvas.offsetLeft, this.canvas.offsetTop);
};
this.canvasDblClick = (e) => {
e.preventDefault();
// this.dblClick(e.clientX - this.canvas.offsetLeft, e.clientY - this.canvas.offsetTop);
this.dblClick(e.offsetX, e.offsetY);
};
this.canvasWheel = (e) => {
e.preventDefault();
this.wheel(e.deltaMode, e.deltaX, e.deltaY);
};
this.canvasMouseDown = (e) => {
e.preventDefault();
this.canvas.focus();
// this.mouseDown(e.clientX - this.canvas.offsetLeft, e.clientY - this.canvas.offsetTop);
this.mouseDown(e.offsetX, e.offsetY);
};
this.canvasMouseLeave = () => {
this.mouseLeave();
};
this.canvasMouseUp = (e) => {
e.preventDefault();
// this.mouseUp(e.clientX - this.canvas.offsetLeft, e.clientY - this.canvas.offsetTop);
this.mouseUp(e.offsetX, e.offsetY);
};
this.canvasMouseUpExtended = (e) => {
e.preventDefault();
this.mouseUpExtended(e.clientX - this.canvas.offsetLeft, e.clientY - this.canvas.offsetTop);
};
this.canvasMouseMoveExtended = (e) => {
e.preventDefault();
// this.mouseMoveExtended(e.clientX - this.canvas.offsetLeft, e.clientY - this.canvas.offsetTop);
this.mouseMoveExtended(e.offsetX, e.offsetY);
};
this.canvasMouseMove = (e) => {
e.preventDefault();
// this.mouseMove(e.clientX - this.canvas.offsetLeft, e.clientY - this.canvas.offsetTop);
this.mouseMove(e.offsetX, e.offsetY);
};
this.onEditRemove = (cancel, newData, action) => {
if (!this.canvasTableEdit) {
return;
}
const old = this.canvasTableEdit;
this.canvasTableEdit = undefined;
if (cancel) {
return;
}
const columnField = old.getColumn().field;
const row = old.getRow();
if (String(this.getUpdateDataOrData(row, columnField)) !== String(newData)) {
this.setUpdateData(row, columnField, newData);
this.reCalcIndexIfNeed(columnField);
this.askForReDraw();
}
if (action !== undefined) {
switch (action) {
case CanvasTableEditAction_1.CanvasTableEditAction.moveNext:
if (this.column.length > old.getColumn().index + 1) {
const column = this.column[old.getColumn().index + 1];
const i = old.getRow();
this.canvasTableEdit = new CanvasTableEdit_1.CanvasTableEdit(column, i, this.data[i][column.field], this.cellHeight, this.onEditRemove);
this.updateEditLocation();
}
break;
case CanvasTableEditAction_1.CanvasTableEditAction.movePrev:
if (0 < old.getColumn().index) {
const column = this.column[old.getColumn().index - 1];
const i = old.getRow();
this.canvasTableEdit = new CanvasTableEdit_1.CanvasTableEdit(column, i, this.data[i][column.field], this.cellHeight, this.onEditRemove);
this.updateEditLocation();
}
break;
}
}
else {
this.canvas.focus();
}
};
this.canvasTableEdit = undefined;
this.data = data;
this.canvas = (typeof canvas === "string") ? document.getElementById(canvas) : canvas;
const context = this.canvas.getContext("2d");
if (context === null) {
throw new Error("context is null");
}
this.setR(window.devicePixelRatio);
this.doReize(this.canvas.clientWidth, this.canvas.clientHeight);
this.context = context;
this.scrollView = new ScrollView_1.ScrollView(this.context, this, config ? config.scrollView : undefined, this.askForExtentedMouseMoveAndMaouseUp, this.askForNormalMouseMoveAndMaouseUp, this.scrollViewChange);
this.calcIndex();
this.canvas.addEventListener("blur", this.canvasBlur);
this.canvas.addEventListener("focus", this.canvasFocus);
this.canvas.addEventListener("wheel", this.canvasWheel);
this.canvas.addEventListener("dblclick", this.canvasDblClick);
this.canvas.addEventListener("mousedown", this.canvasMouseDown);
this.canvas.addEventListener("mousemove", this.canvasMouseMove);
this.canvas.addEventListener("mouseup", this.canvasMouseUp);
this.canvas.addEventListener("mouseleave", this.canvasMouseLeave);
this.canvas.addEventListener("touchstart", this.canvasTouchStart);
this.canvas.addEventListener("touchmove", this.canvasTouchMove);
this.canvas.addEventListener("touchend", this.canvasTouchEnd);
this.canvas.addEventListener("keydown", this.canvasKeydown);
this.updateColumns(col);
window.addEventListener("resize", () => {
this.resize();
});
}
updateColumns(col) {
super.updateColumns(col);
if (this.canvasTableEdit) {
this.canvasTableEdit.doRemove(true, undefined);
}
}
resize() {
this.setR(window.devicePixelRatio);
this.doReize(this.canvas.clientWidth, this.canvas.clientHeight);
this.askForReDraw();
}
updateForEdit(col, i) {
if (this.canvasTableEdit) {
this.canvasTableEdit.doRemove(true, undefined);
}
this.canvasTableEdit = new CanvasTableEdit_1.CanvasTableEdit(col, i, this.getUpdateDataOrData(i, col.field), this.cellHeight, this.onEditRemove);
this.updateEditLocation();
}
scrollViewChange() {
this.updateEditLocation();
}
askForExtentedMouseMoveAndMaouseUp() {
this.canvas.removeEventListener("mousemove", this.canvasMouseMove);
this.canvas.removeEventListener("mouseup", this.canvasMouseUp);
window.addEventListener("mousemove", this.canvasMouseMoveExtended);
window.addEventListener("mouseup", this.canvasMouseUpExtended);
}
askForNormalMouseMoveAndMaouseUp() {
window.removeEventListener("mousemove", this.canvasMouseMoveExtended);
window.removeEventListener("mouseup", this.canvasMouseUpExtended);
this.canvas.addEventListener("mousemove", this.canvasMouseMove);
this.canvas.addEventListener("mouseup", this.canvasMouseUp);
}
setCursor(cursor) {
this.canvas.style.cursor = cursor;
}
setCanvasSize(width, height) {
this.canvas.width = width;
this.canvas.height = height;
super.setCanvasSize(width, height);
}
updateEditLocation() {
if (!this.canvasTableEdit) {
return;
}
const rect = this.calcRect(this.canvasTableEdit.getColumn(), this.canvasTableEdit.getRow());
if (rect === undefined) {
return;
}
this.canvasTableEdit.updateEditLocation(this.canvas.offsetTop + rect.top, this.canvas.offsetLeft + rect.left, rect.width, rect.cellHeight, rect.clipTop, rect.clipRight, rect.clipBottom, rect.clipLeft);
}
}
exports.CanvasTable = CanvasTable;