Tables

example/tables.js

@@ -0,0 +1,49 @@
+const libui = require('..');
+const {Text, Image, Checkbox, ProgressBar, Button, LabeledCheckbox, LabeledImage} =
+	libui.UiTableModel.Fields;
+
+const win = new libui.UiWindow('Tables example', 800, 600, true);
+win.margined = true;
+
+const model = libui.UiTableModel.fromMetadata({
+	name: {type: Text, editable: true, header: 'Name'},
+	surname: {type: Text},
+	male: {type: Checkbox, editable: true, header: 'Is a male?'},
+	picture: {type: Image, value: () => img},
+	completed: {type: ProgressBar},
+	someProp: {type: LabeledCheckbox, editable: true, label: 'some props'},
+	otherProp: {type: LabeledImage, value: () => img, label: 'an Image'},
+	sayhi: {
+		type: Button,
+		editable: () => 1,
+		label: 'Say Hi',
+		click: obj => libui.UiDialogs.msgBox(win, 'HI', obj.name + ' ' + obj.surname)
+	}
+});
+
+const data = [
+	{name: 'Andrea', surname: 'Parodi', male: true, completed: 30, someProp: true},
+	{name: 'Giorgia', surname: 'Parodi', male: false, completed: 75, someProp: false}
+];
+
+const tb = new libui.UiTable(model.bind(data));
+model.addColumns(tb, 'name', 'surname', 'picture', 'male', 'completed', 'sayhi',
+				 'someProp', 'otherProp');
+
+const vbox = new libui.UiVerticalBox();
+vbox.append(tb, true);
+win.setChild(vbox);
+
+win.onClosing(() => {
+	win.close();
+	libui.stopLoop();
+});
+
+let img = null;
+async function run() {
+	img = await libui.UiImage.loadFromPng(__dirname + '/lightning-orb.png');
+	win.show();
+	libui.startLoop();
+}
+
+run().catch(err => console.error(err));

index.js

@@ -48,7 +48,7 @@ const {
 const {UiBox} = require('./js/box');
 const {SeparatorBase} = require('./js/separator-base');
 const {UiControl} = require('./js/ui-control');
-
+const {UiTable} = require('./js/table');
 const {UiButton} = require('./js/button');
 const {UiWindow} = require('./js/window');
 const {UiSlider} = require('./js/slider');
@@ -81,6 +81,13 @@ const {FontDescriptor} = require('./js/font-descriptor');
 const {FontAttribute} = require('./js/font-attribute');
 const {AttributedString} = require('./js/font-string');
 const {OpenTypeFeatures} = require('./js/font-opentype');
+const {UiTableModel} = require('./js/table-model');
+const {UiImage} = require('./js/image');
+const fromMetadata = require('./js/table-model-from-metadata');
+
+UiTableModel.fromMetadata = fromMetadata;
+UiTableModel.ValueTypes = fromMetadata.ValueTypes;
+UiTableModel.Fields = fromMetadata.Fields;
 
 function applySetterGetter(...classConstructors) {
 	for (const classConstructor of classConstructors) {
@@ -146,19 +153,22 @@ function applySetterGetterAll(doSetter, ...classConstructors) {
 }
 
 // Takes about 3.5ms:
-applySetterGetter(UiEntryBase, UiBox, SeparatorBase, UiControl, UiGrid, UiMenuItem,
-				  UiMenu, UiSpinbox, UiHorizontalSeparator, UiVerticalSeparator,
-				  UiRadioButtons, UiProgressBar, UiGroup, UiEntry, UiPasswordEntry,
-				  UiSearchEntry, UiEditableCombobox, UiTimePicker, UiDatePicker,
-				  UiDateTimePicker, UiCombobox, UiColorButton, UiCheckbox, UiWindow,
-				  UiButton, UiLabel, UiForm, UiSlider, UiMultilineEntry, UiHorizontalBox,
-				  UiVerticalBox, UiTab, UiArea, DrawBrush, BrushGradientStop, UiDrawPath,
-				  DrawStrokeParams, UiDrawMatrix, UiAreaKeyEvent, UiAreaMouseEvent,
-				  UiFontButton, FontDescriptor, FontAttribute, DrawTextLayout);
+applySetterGetter(
+	UiImage, UiTableModel, UiTable, UiEntryBase, UiBox, SeparatorBase, UiControl, UiGrid,
+	UiMenuItem, UiMenu, UiSpinbox, UiHorizontalSeparator, UiVerticalSeparator,
+	UiRadioButtons, UiProgressBar, UiGroup, UiEntry, UiPasswordEntry, UiSearchEntry,
+	UiEditableCombobox, UiTimePicker, UiDatePicker, UiDateTimePicker, UiCombobox,
+	UiColorButton, UiCheckbox, UiWindow, UiButton, UiLabel, UiForm, UiSlider,
+	UiMultilineEntry, UiHorizontalBox, UiVerticalBox, UiTab, UiArea, DrawBrush,
+	BrushGradientStop, UiDrawPath, DrawStrokeParams, UiDrawMatrix, UiAreaKeyEvent,
+	UiAreaMouseEvent, UiFontButton, FontDescriptor, FontAttribute, DrawTextLayout);
 applySetterGetterAll(true, Point, Color, Size);
 applySetterGetterAll(false, AreaDrawParams, UiAreaMouseEvent, UiAreaKeyEvent);
 
 Object.assign(libui, {
+	UiImage,
+	UiTableModel,
+	UiTable,
 	UiFontButton,
 	FontDescriptor,
 	FontAttribute,

js/image.js

@@ -0,0 +1,40 @@
+const {Image} = require('..');
+const {readFile} = require('fs');
+const parsePng = require('parse-png');
+
+/**
+ * An image.
+ */
+class UiImage {
+	/**
+	 * Create a new UiImage object.
+	 * @return {UiImage}
+	 */
+	constructor(width, height) {
+		this._img = Image.create(width, height);
+	}
+
+	append(pixels, pixelWidth, pixelHeight, byteStride) {
+		Image.append(this._img, pixels, pixelWidth, pixelHeight, byteStride);
+	}
+
+	static loadFromPng(pngPath) {
+		return new Promise((resolve, reject) => {
+			readFile(pngPath, (err, data) => {
+				if (err) {
+					return reject(err);
+				}
+
+				parsePng(data)
+					.then(png => {
+						const img = new UiImage(png.width, png.height);
+						img.append(png.data, png.width, png.height, png.width * 4);
+						resolve(img);
+					})
+					.catch(reject);
+			});
+		});
+	}
+}
+
+module.exports = {UiImage};

js/table-model-from-metadata.js

@@ -0,0 +1,199 @@
+const {UiImage} = require('./image');
+const {UiTableModel} = require('./table-model');
+
+const always = val => () => val;
+const noop = () => undefined;
+
+const ValueTypes = {
+	String: 0,
+	Image: 1,
+	Int: 2,
+	Color: 3
+};
+
+const Text = {
+	getter: ({key}) => (data, row) => data[row][key],
+	setter: ({key}) => (data, row, value) => (data[row][key] = value),
+	cellType: () => ValueTypes.String,
+	adder: column => tb =>
+		tb.appendTextColumn(column.header, column.idx, column.idx + 1, null)
+};
+
+const Image = {
+	getter: ({value}) => {
+		if (value instanceof UiImage) {
+			return always(column.value);
+		}
+
+		if (typeof value === 'function') {
+			return value;
+		}
+
+		return (data, row) => data[row][key];
+	},
+	setter: () => noop,
+	cellType: () => ValueTypes.Image,
+	adder: column => tb => tb.appendImageColumn(column.header, column.idx)
+};
+
+const Checkbox = {
+	getter: ({key}) => (data, row) => Number(data[row][key]),
+	setter: ({key}) => (data, row, value) => (data[row][key] = Boolean(value)),
+	cellType: () => ValueTypes.Int,
+	adder: column => tb =>
+		tb.appendCheckboxColumn(column.header, column.idx, column.idx + 1)
+};
+
+const LabeledCheckbox = {
+	getter: ({key}) => (data, row) => Number(data[row][key]),
+	setter: ({key}) => (data, row, value) => (data[row][key] = Boolean(value)),
+	cellType: () => ValueTypes.Int,
+	addFurtherColumns: ({column, columnTypes, cellGetters, cellSetters}) => {
+		const labelIdx = columnTypes.length;
+		console.log('LabeledCheckbox labelIdx', column.idx, labelIdx);
+		columnTypes[labelIdx] = ValueTypes.String;
+		cellGetters[labelIdx] = () => column.label;
+		cellSetters[labelIdx] = noop;
+
+		columnTypes[labelIdx + 1] = ValueTypes.Int;
+		cellGetters[labelIdx + 1] = () => 0;
+		cellSetters[labelIdx + 1] = noop;
+
+		column.labelIdx = labelIdx;
+	},
+	adder: column => tb => {
+		const textModelColumn = column.labelIdx;
+		const textEditableModelColumn = column.labelIdx + 1;
+
+		tb.appendCheckboxTextColumn(column.header, column.idx, column.idx + 1,
+									textModelColumn, textEditableModelColumn, null);
+	}
+};
+
+const LabeledImage = {
+	getter: ({value}) => {
+		if (value instanceof UiImage) {
+			return always(column.value);
+		}
+
+		if (typeof value === 'function') {
+			return value;
+		}
+
+		return (data, row) => data[row][key];
+	},
+	setter: ({key}) => () => 0,
+	cellType: () => ValueTypes.Image,
+	addFurtherColumns: ({column, columnTypes, cellGetters, cellSetters}) => {
+		const labelIdx = columnTypes.length;
+		console.log('LabeledImage labelIdx', column.idx, labelIdx);
+		columnTypes[labelIdx] = ValueTypes.String;
+		cellGetters[labelIdx] = () => {
+			console.log('column.label', column.label);
+			return column.label;
+		};
+		cellSetters[labelIdx] = noop;
+
+		columnTypes[labelIdx + 1] = ValueTypes.Int;
+		cellGetters[labelIdx + 1] = () => 0;
+		cellSetters[labelIdx + 1] = noop;
+
+		column.labelIdx = labelIdx;
+	},
+	adder: column => tb => {
+		console.log('adder', column.labelIdx)
+		const textModelColumn = column.labelIdx;
+		const textEditableModelColumn = column.labelIdx + 1;
+
+		tb.appendImageTextColumn(column.header, column.idx, textModelColumn,
+								 textEditableModelColumn, null);
+	}
+};
+
+const ProgressBar = {
+	getter: ({key}) => (data, row) => Number(data[row][key]),
+	setter: ({key}) => (data, row, value) => (data[row][key] = Number(value)),
+	cellType: () => ValueTypes.Int,
+	adder: column => tb => tb.appendProgressBarColumn(column.header, column.idx)
+};
+
+const Button = {
+	getter: ({label}) => () => String(label),
+	setter: ({key, click}) => (data, row) => click(data[row]),
+	cellType: () => ValueTypes.String,
+	adder: column => tb =>
+		tb.appendButtonColumn(column.header, column.idx, column.idx + 1)
+};
+
+function fromMetadata(model) {
+	const numColumns = Object.keys(model).length;
+	const columnTypes = [];
+	const cellGetters = [];
+	const cellSetters = [];
+
+	for (const [key, column] of Object.entries(model)) {
+		const idx = columnTypes.length;
+		column.key = key;
+		column.idx = idx;
+
+		columnTypes[idx] = column.type.cellType(column);
+		cellGetters[idx] = column.type.getter(column);
+		cellSetters[idx] = column.type.setter(column);
+		column.adder = column.type.adder(column);
+
+		if (typeof column.editable === 'function') {
+			columnTypes[idx + 1] = ValueTypes.Int;
+			cellGetters[idx + 1] = (data, row) => column.editable(data[row]);
+		} else {
+			columnTypes[idx + 1] = ValueTypes.Int;
+			cellGetters[idx + 1] = always(Number(Boolean(column.editable)));
+		}
+		cellSetters[idx + 1] = noop;
+
+		if (typeof column.type.addFurtherColumns === 'function') {
+
+			column.type.addFurtherColumns(
+				{columnTypes, cellGetters, cellSetters, column});
+		}
+
+		if (column.header === undefined) {
+			column.header = key;
+		}
+	}
+
+	return {
+		fields: model,
+		addColumns(tb, ...columnNames) {
+			for (const columnName of columnNames) {
+				debugger;
+				this.fields[columnName].adder(tb);
+			}
+		},
+		bind(data) {
+			return new UiTableModel({
+				numColumns: () => numColumns,
+				columnType: column => columnTypes[column],
+				numRows: () => data.length,
+				cellValue: (row, column) => {
+					const value = cellGetters[column](data, row);
+					return value;
+				},
+				setCellValue: (row, column, value) =>
+					cellSetters[column](data, row, value)
+			});
+		}
+	};
+}
+
+fromMetadata.ValueTypes = ValueTypes;
+fromMetadata.Fields = {
+	Text,
+	Image,
+	Checkbox,
+	ProgressBar,
+	LabeledCheckbox,
+	LabeledImage,
+	Button
+};
+
+module.exports = fromMetadata;

js/table-model.js

@@ -0,0 +1,28 @@
+const {TableModel} = require('..');
+
+class UiTableModel {
+	/**
+	 * Create a new UiTableModel object.
+	 * @param  {object} modelHanlder - handler for the new table model
+	 * @return {UiTable}
+	 */
+	constructor(modelHanlder) {
+		this.model = TableModel.create(modelHanlder.numColumns, modelHanlder.numRows,
+									   modelHanlder.columnType, modelHanlder.cellValue,
+									   modelHanlder.setCellValue);
+	}
+
+	rowInserted(index) {
+		return TableModel.rowInserted(this.model, index);
+	}
+
+	rowChanged(index) {
+		return TableModel.rowChanged(this.model, index);
+	}
+
+	rowDeleted(index) {
+		return TableModel.rowDeleted(this.model, index);
+	}
+}
+
+module.exports = {UiTableModel};