Merge pull request #46 from bennyboer/9-html-cell-renderer

9 html cell renderer

example/src/app/app.component.ts

@@ -34,6 +34,7 @@ import {ICell} from "../../../src/cell/cell";
 import {DebugCellRenderer} from "./renderer/debug-cell-renderer";
 import {CheckboxCellRenderer} from "../../../src/renderer/canvas/cell/checkbox/checkbox-cell-renderer";
 import {ICheckboxCellRendererValue} from "../../../src/renderer/canvas/cell/checkbox/checkbox-cell-renderer-value";
+import {DOMCellRenderer} from "../../../src/renderer/canvas/cell/dom/dom-cell-renderer";
 
 @Component({
 	selector: "app-root",
@@ -308,7 +309,7 @@ export class AppComponent implements AfterViewInit, OnDestroy {
 						startColumn: column,
 						endColumn: column
 					},
-					rendererName: "row-column-header",
+					rendererName: RowColumnHeaderRenderer.NAME,
 					value: null
 				};
 			}
@@ -336,7 +337,7 @@ export class AppComponent implements AfterViewInit, OnDestroy {
 						startColumn: column,
 						endColumn: column
 					},
-					rendererName: "row-column-header",
+					rendererName: RowColumnHeaderRenderer.NAME,
 					value: null
 				};
 			}
@@ -382,7 +383,7 @@ export class AppComponent implements AfterViewInit, OnDestroy {
 			const cellModel = AppComponent.initializeCellModel();
 			this.engine = new TableEngine(this.tableContainer.nativeElement, cellModel);
 
-			this.engine.getOptions().misc.debug = true; // Enable debug mode
+			this.engine.getOptions().misc.debug = false; // Enable/Disable debug mode
 
 			// Setup row/column resizing
 			this.engine.getOptions().renderer.canvas.rowColumnResizing.allowResizing = true;
@@ -475,6 +476,7 @@ export class AppComponent implements AfterViewInit, OnDestroy {
 			this.engine.registerCellRenderer(new ImageCellRenderer());
 			this.engine.registerCellRenderer(new LoadingCellRenderer());
 			this.engine.registerCellRenderer(new CheckboxCellRenderer());
+			this.engine.registerCellRenderer(new DOMCellRenderer());
 
 			// Set an example border
 			this.engine.getBorderModel().setBorder({
@@ -537,10 +539,10 @@ export class AppComponent implements AfterViewInit, OnDestroy {
 						startColumn: 5,
 						endColumn: 8
 					},
-					rendererName: "loading",
+					rendererName: LoadingCellRenderer.NAME,
 					value:
 						{
-							cellRenderer: "image",
+							cellRenderer: ImageCellRenderer.NAME,
 							promiseSupplier: async () => {
 								return new Promise(resolve => setTimeout(() => resolve({
 									src: "assets/sloth.svg"
@@ -550,7 +552,7 @@ export class AppComponent implements AfterViewInit, OnDestroy {
 				},
 				{
 					range: CellRange.fromSingleRowColumn(25, 4),
-					rendererName: "text",
+					rendererName: TextCellRenderer.NAME,
 					value: {
 						text: "This is a cell for which we enabled line wrapping since this text is pretty long and will not fit into the cells available space.",
 						options: {
@@ -562,7 +564,7 @@ export class AppComponent implements AfterViewInit, OnDestroy {
 				},
 				{
 					range: CellRange.fromSingleRowColumn(1000, 1000),
-					rendererName: "text",
+					rendererName: TextCellRenderer.NAME,
 					value: "Last cell with more text than normally"
 				},
 				{
@@ -572,14 +574,14 @@ export class AppComponent implements AfterViewInit, OnDestroy {
 						startColumn: 9,
 						endColumn: 11
 					},
-					rendererName: "debug",
+					rendererName: DebugCellRenderer.NAME,
 					value: null
 				},
 				{
 					range: CellRange.fromSingleRowColumn(10, 2),
-					rendererName: "loading",
+					rendererName: LoadingCellRenderer.NAME,
 					value: {
-						cellRenderer: "text",
+						cellRenderer: TextCellRenderer.NAME,
 						promiseSupplier: async () => {
 							return new Promise(resolve => setTimeout(() => resolve("Done 😀"), 2000))
 						},
@@ -599,14 +601,54 @@ export class AppComponent implements AfterViewInit, OnDestroy {
 						checked: false,
 						label: "with Label"
 					} as ICheckboxCellRendererValue
+				},
+				{
+					range: {
+						startRow: 30,
+						endRow: 33,
+						startColumn: 3,
+						endColumn: 3
+					},
+					rendererName: TextCellRenderer.NAME,
+					value: {
+						text: "HTML/DOM cell renderer:",
+						options: {
+							horizontalAlignment: HorizontalAlignment.RIGHT,
+							verticalAlignment: VerticalAlignment.MIDDLE,
+							fontSize: 18,
+							useLineWrapping: true,
+							editable: false
+						}
+					} as ITextCellRendererValue
+				},
+				{
+					range: {
+						startRow: 30,
+						endRow: 40,
+						startColumn: 4,
+						endColumn: 5
+					},
+					rendererName: DOMCellRenderer.NAME,
+					value: `
+<div style="padding: 5px; user-select: none">
+	<p>The Table-Engine is able to render HTML in a cell</p>
+	<p><button>A button for example!</button></p>
+	<ul>
+		<li>Or</li>
+		<li>a</li>
+		<li>list!</li>
+	</ul>
+	<p style="color: darkred">Nevertheless use these types of renderers <strong>sparingly</strong>, as they may result in poor performance</p>
+</div>
+`
 				}
 			],
 			(row, column) => row * column,
 			(row, column) => {
 				if (row === 0 || column === 0) {
-					return "row-column-header";
+					return RowColumnHeaderRenderer.NAME;
 				} else {
-					return "text";
+					return TextCellRenderer.NAME;
 				}
 			},
 			(row) => 25,

example/src/app/renderer/debug-cell-renderer.ts

@@ -10,6 +10,9 @@ import {VerticalAlignment} from "../../../../src/util/alignment/vertical-alignme
 import {HorizontalAlignment} from "../../../../src/util/alignment/horizontal-alignment";
 
 export class DebugCellRenderer implements ICanvasCellRenderer {
+
+	public static readonly NAME: string = "debug";
+
 	/**
 	 * Event listeners on cells rendered with this cell renderer.
 	 */
@@ -72,7 +75,7 @@ export class DebugCellRenderer implements ICanvasCellRenderer {
 	}
 
 	public getName(): string {
-		return "debug";
+		return DebugCellRenderer.NAME;
 	}
 
 	public initialize(engine: TableEngine): void {
@@ -83,4 +86,12 @@ export class DebugCellRenderer implements ICanvasCellRenderer {
 		ctx.fillText(cell.value ?? "[No event yet]", Math.round(bounds.left + bounds.width / 2), Math.round(bounds.top + bounds.height / 2));
 	}
 
+	/**
+	 * Called when the passed cell is disappearing from the visible area (viewport).
+	 * @param cell that is disappearing
+	 */
+	public onDisappearing(cell: ICell): void {
+		// Do nothing
+	}
+
 }

example/src/styles.scss

@@ -1,5 +1,6 @@
 html, body {
   height: 100%;
+  user-select: none;
 }
 
 body {

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "table-engine",
-	"version": "0.1.0",
+	"version": "0.1.1",
 	"description": "Library to visualize huge tables in web environments",
 	"files": [
 		"lib/**/*"

src/cell/model/cell-model.ts

@@ -4,6 +4,7 @@ import {CellRangeUtil} from "../range/cell-range-util";
 import {IRectangle} from "../../util/rect";
 import {ICellModel} from "./cell-model.interface";
 import {IBorder} from "../../border/border";
+import {TextCellRenderer} from "../../renderer/canvas/cell/text/text-cell-renderer";
 
 /**
  * Model managing cells and their position and size in the table.
@@ -13,7 +14,7 @@ export class CellModel implements ICellModel {
 	/**
 	 * The default cell renderer name to use.
 	 */
-	private static readonly DEFAULT_CELL_RENDERER_NAME: string = "text";
+	private static readonly DEFAULT_CELL_RENDERER_NAME: string = TextCellRenderer.NAME;
 
 	/**
 	 * The default row size.

src/cell/range/cell-range-util.ts

@@ -25,6 +25,21 @@ export class CellRangeUtil {
 			&& range.endColumn <= containedIn.endColumn;
 	}
 
+	/**
+	 * Check whether the two given cell ranges overlap.
+	 * @param a first cell range
+	 * @param b second cell range
+	 */
+	public static overlap(a: ICellRange, b: ICellRange): boolean {
+		const cantOverlapVertically: boolean = a.startRow > b.endRow || a.endRow < b.startRow;
+		if (cantOverlapVertically) {
+			return false;
+		}
+
+		const cantOverlapHorizontally: boolean = a.startColumn > b.endColumn || a.endColumn < b.startColumn;
+		return !cantOverlapHorizontally;
+	}
+
 	/**
 	 * Apply the exclusive or (XOR) operation on two cell ranges.
 	 * @param a first cell range
@@ -37,7 +52,7 @@ export class CellRangeUtil {
 		if (a.startRow !== b.startRow) {
 			result.push({
 				startRow: Math.min(a.startRow, b.startRow),
-				endRow: Math.max(a.startRow, b.startRow),
+				endRow: Math.max(a.startRow, b.startRow) - 1, // Exclusive!
 				startColumn: Math.min(a.startColumn, b.startColumn),
 				endColumn: Math.max(a.endColumn, b.endColumn)
 			});
@@ -46,7 +61,7 @@ export class CellRangeUtil {
 		// Cut bottom rows in necessary
 		if (a.endRow !== b.endRow) {
 			result.push({
-				startRow: Math.min(a.endRow, b.endRow),
+				startRow: Math.min(a.endRow, b.endRow) + 1, // Exclusive!
 				endRow: Math.max(a.endRow, b.endRow),
 				startColumn: Math.min(a.startColumn, b.startColumn),
 				endColumn: Math.max(a.endColumn, b.endColumn)
@@ -59,7 +74,7 @@ export class CellRangeUtil {
 				startRow: Math.max(a.startRow, b.startRow),
 				endRow: Math.min(a.endRow, b.endRow),
 				startColumn: Math.min(a.startColumn, b.startColumn),
-				endColumn: Math.max(a.startColumn, b.startColumn)
+				endColumn: Math.max(a.startColumn, b.startColumn) - 1 // Exclusive!
 			});
 		}
 
@@ -68,7 +83,7 @@ export class CellRangeUtil {
 			result.push({
 				startRow: Math.max(a.startRow, b.startRow),
 				endRow: Math.min(a.endRow, b.endRow),
-				startColumn: Math.min(a.endColumn, b.endColumn),
+				startColumn: Math.min(a.endColumn, b.endColumn) + 1, // Exclusive!
 				endColumn: Math.max(a.endColumn, b.endColumn)
 			});
 		}

src/overlay/overlay-manager.ts

@@ -22,4 +22,10 @@ export interface IOverlayManager {
 	 */
 	getOverlays(): IOverlay[];
 
+	/**
+	 * Update the given overlay.
+	 * @param overlay to update
+	 */
+	updateOverlay(overlay: IOverlay): void;
+
 }