Merge pull request #52 from bennyboer/9-combobox-renderer

9 combobox renderer

example/src/app/app.component.ts

@@ -36,6 +36,8 @@ import {CheckboxCellRenderer} from "../../../src/renderer/canvas/cell/checkbox/c
 import {ICheckboxCellRendererValue} from "../../../src/renderer/canvas/cell/checkbox/checkbox-cell-renderer-value";
 import {DOMCellRenderer} from "../../../src/renderer/canvas/cell/dom/dom-cell-renderer";
 import {RatingCellRenderer} from "../../../src/renderer/canvas/cell/rating/rating-cell-renderer";
+import {ComboBoxCellRenderer} from "../../../src/renderer/canvas/cell/combobox/combobox-cell-renderer";
+import {IComboBoxCellRendererValue} from "../../../src/renderer/canvas/cell/combobox/combobox-cell-renderer-value";
 
 @Component({
 	selector: "app-root",
@@ -481,6 +483,7 @@ export class AppComponent implements AfterViewInit, OnDestroy {
 			this.engine.registerCellRenderer(new RatingCellRenderer({
 				editable: true
 			}));
+			this.engine.registerCellRenderer(new ComboBoxCellRenderer());
 
 			// Set an example border
 			this.engine.getBorderModel().setBorder({
@@ -650,6 +653,35 @@ export class AppComponent implements AfterViewInit, OnDestroy {
 					range: CellRange.fromSingleRowColumn(16, 3),
 					rendererName: RatingCellRenderer.NAME,
 					value: 3.5
+				},
+				{
+					range: CellRange.fromSingleRowColumn(18, 3),
+					rendererName: ComboBoxCellRenderer.NAME,
+					value: {
+						select_options: {
+							apple: {label: "Apple"},
+							banana: {label: "Banana"},
+							orange: {label: "Orange"}
+						}
+					} as IComboBoxCellRendererValue
+				},
+				{
+					range: CellRange.fromSingleRowColumn(19, 3),
+					rendererName: ComboBoxCellRenderer.NAME,
+					value: {
+						selected_option_id: "cow",
+						select_options: {
+							cat: {label: "Meow"},
+							dog: {label: "Woof"},
+							wolf: {label: "Howl"},
+							chicken: {label: "Bah-gawk"},
+							cow: {label: "Moo"},
+							bear: {label: "Roar"},
+							bee: {label: "Buzz"},
+							cricket: {label: "Chirp"},
+							duck: {label: "Quack"}
+						}
+					} as IComboBoxCellRendererValue
 				}
 			],
 			(row, column) => row * column,

example/src/styles.scss

@@ -12,3 +12,27 @@ body {
 .small-form-field .mat-form-field-infix {
   padding: 0.5em 0;
 }
+
+.table-engine-combobox-dropdown-list {
+  background: white;
+  border-radius: 0 0 2px 2px;
+  box-shadow: 2px 2px 4px #999;
+
+  ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+
+    li {
+      line-height: 1.0;
+      font-size: 12px;
+      box-sizing: border-box;
+      padding: 4px 8px;
+      border-bottom: 1px solid #EAEAEA;
+
+      &:hover {
+        background-color: #EAEAEA;
+      }
+    }
+  }
+}

src/renderer/canvas/canvas-renderer.ts

@@ -1977,6 +1977,33 @@ export class CanvasRenderer implements ITableEngineRenderer {
 		return this._zoom;
 	}
 
+	public getScrollOffset(): IPoint {
+		return {
+			x: this._scrollOffset.x,
+			y: this._scrollOffset.y
+		};
+	}
+
+	public getViewport(): IRectangle {
+		if (!!this._lastRenderingContext) {
+			return this._lastRenderingContext.viewPort;
+		}
+
+		return this._getViewPort();
+	}
+
+	public getFixedRowsHeight(): number {
+		return !!this._lastRenderingContext && !!this._lastRenderingContext.cells.fixedRowCells
+			? this._lastRenderingContext.cells.fixedRowCells.viewPortBounds.height
+			: 0;
+	}
+
+	public getFixedColumnsWidth(): number {
+		return !!this._lastRenderingContext && !!this._lastRenderingContext.cells.fixedColumnCells
+			? this._lastRenderingContext.cells.fixedColumnCells.viewPortBounds.width
+			: 0;
+	}
+
 	/**
 	 * Scroll to the cell at the given row and column (if not already in the current view).
 	 * @param row to scroll to

src/renderer/canvas/cell/combobox/combobox-cell-renderer-options.ts

@@ -0,0 +1,176 @@
+import {ICell} from "../../../../cell/cell";
+import {IColor} from "../../../../util/color";
+import {Colors} from "../../../../util/colors";
+
+export const DEFAULT_PLACEHOLDER_TEXT: string = "Select...";
+export const DEFAULT_LABEL_COLOR: IColor = Colors.BLACK;
+export const DEFAULT_LABEL_COLOR_HOVERED: IColor = Colors.CORAL;
+export const DEFAULT_LABEL_COLOR_DISABLED: IColor = Colors.GRAY;
+export const DEFAULT_LABEL_FONT_SIZE: number = 12;
+export const DEFAULT_LABEL_FONT_FAMILY: string = "sans-serif";
+export const DEFAULT_PLACEHOLDER_COLOR: IColor = Colors.GRAY;
+export const DEFAULT_PADDING: number = 8;
+export const DEFAULT_SELECT_ARROW_COLOR: IColor = Colors.GRAY;
+export const DEFAULT_SELECT_ARROW_COLOR_DISABLED: IColor = Colors.LIGHTGRAY;
+export const DEFAULT_SELECT_ARROW_HOVER_COLOR: IColor = Colors.CORAL;
+export const DEFAULT_SELECT_ARROW_SIZE: number = 10;
+export const DEFAULT_SELECT_ARROW_THICKNESS: number = 2;
+export const DEFAULT_SELECT_ARROW_LINE_JOIN: "bevel" | "miter" | "round" = "round";
+export const DEFAULT_SELECT_ARROW_LINE_CAP: "butt" | "round" | "square" = "round";
+export const DEFAULT_DROPDOWN_OVERLAY_CLASS_NAME = "table-engine-combobox-dropdown-list";
+export const DEFAULT_DROPDOWN_MAX_HEIGHT = 200;
+
+export interface IComboBoxCellRendererOptions {
+	onChanged?: (cell: ICell) => void;
+	editable?: boolean;
+	padding?: number;
+	label?: ILabelOptions;
+	placeholder?: IPlaceholderOptions,
+	selectArrow?: ISelectArrowOptions,
+	dropdown?: IDropdownOptions
+}
+
+export interface ILabelOptions {
+	color?: IColor;
+	hoveredColor?: IColor;
+	disabledColor?: IColor;
+	fontSize?: number;
+	fontFamily?: string;
+}
+
+export interface IPlaceholderOptions {
+	text?: string;
+	color?: IColor;
+}
+
+export interface ISelectArrowOptions {
+	color?: IColor;
+	hoverColor?: IColor;
+	disabledColor?: IColor;
+	size?: number;
+	thickness?: number;
+	lineJoin?: "bevel" | "miter" | "round";
+	lineCap?: "butt" | "round" | "square";
+}
+
+export interface IDropdownOptions {
+	overlayClassName?: string;
+	maxHeight?: number;
+}
+
+export const fillOptions = (options?: IComboBoxCellRendererOptions) => {
+	if (!options) {
+		options = {};
+	}
+
+	if (options.editable === undefined || options.editable === null) {
+		options.editable = true;
+	}
+
+	if (options.padding === undefined || options.padding === null) {
+		options.padding = DEFAULT_PADDING;
+	}
+
+	options.label = fillLabelOptions(options.label);
+	options.placeholder = fillPlaceholderOptions(options.placeholder);
+	options.selectArrow = fillSelectArrowOptions(options.selectArrow);
+	options.dropdown = fillDropdownOptions(options.dropdown);
+
+	return options;
+}
+
+const fillLabelOptions = (options?: ILabelOptions) => {
+	if (!options) {
+		options = {};
+	}
+
+	if (!options.color) {
+		options.color = DEFAULT_LABEL_COLOR;
+	}
+
+	if (!options.hoveredColor) {
+		options.hoveredColor = DEFAULT_LABEL_COLOR_HOVERED;
+	}
+
+	if (!options.disabledColor) {
+		options.disabledColor = DEFAULT_LABEL_COLOR_DISABLED;
+	}
+
+	if (options.fontSize === undefined || options.fontSize === null) {
+		options.fontSize = DEFAULT_LABEL_FONT_SIZE;
+	}
+
+	if (!options.fontFamily) {
+		options.fontFamily = DEFAULT_LABEL_FONT_FAMILY;
+	}
+
+	return options;
+}
+
+const fillPlaceholderOptions = (options?: IPlaceholderOptions) => {
+	if (!options) {
+		options = {};
+	}
+
+	if (!options.color) {
+		options.color = DEFAULT_PLACEHOLDER_COLOR;
+	}
+
+	if (!options.text) {
+		options.text = DEFAULT_PLACEHOLDER_TEXT;
+	}
+
+	return options;
+}
+
+const fillSelectArrowOptions = (options?: ISelectArrowOptions) => {
+	if (!options) {
+		options = {};
+	}
+
+	if (!options.color) {
+		options.color = DEFAULT_SELECT_ARROW_COLOR;
+	}
+
+	if (!options.hoverColor) {
+		options.hoverColor = DEFAULT_SELECT_ARROW_HOVER_COLOR;
+	}
+
+	if (!options.disabledColor) {
+		options.disabledColor = DEFAULT_SELECT_ARROW_COLOR_DISABLED;
+	}
+
+	if (options.size === undefined || options.size === null) {
+		options.size = DEFAULT_SELECT_ARROW_SIZE;
+	}
+
+	if (options.thickness === undefined || options.thickness === null) {
+		options.thickness = DEFAULT_SELECT_ARROW_THICKNESS;
+	}
+
+	if (!options.lineCap) {
+		options.lineCap = DEFAULT_SELECT_ARROW_LINE_CAP;
+	}
+
+	if (!options.lineJoin) {
+		options.lineJoin = DEFAULT_SELECT_ARROW_LINE_JOIN;
+	}
+
+	return options;
+}
+
+const fillDropdownOptions = (options?: IDropdownOptions) => {
+	if (!options) {
+		options = {};
+	}
+
+	if (!options.overlayClassName) {
+		options.overlayClassName = DEFAULT_DROPDOWN_OVERLAY_CLASS_NAME;
+	}
+
+	if (options.maxHeight === undefined || options.maxHeight === null) {
+		options.maxHeight = DEFAULT_DROPDOWN_MAX_HEIGHT;
+	}
+
+	return options;
+}

src/renderer/canvas/cell/combobox/combobox-cell-renderer-value.ts

@@ -0,0 +1,15 @@
+import {IComboBoxCellRendererOptions} from "./combobox-cell-renderer-options";
+
+export interface IComboBoxCellRendererValue {
+	selected_option_id?: string;
+	select_options: IComboBoxSelectOptions;
+	options?: IComboBoxCellRendererOptions;
+}
+
+export interface IComboBoxSelectOptions {
+	[id: string]: IComboBoxOption;
+}
+
+export interface IComboBoxOption {
+	label: string;
+}