value list for several properties

kleber-swf · Sep 28, 2021 · 5a4bede · 5a4bede
1 parent ffaccab
commit 5a4bede
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 16 deletions.
diff --git a/src/core/editor.ts b/src/core/editor.ts
@@ -70,18 +70,18 @@ class EditorClass {
 			{ name: 'text', typeHint: 'text', data: { rows: 3 } },
 			{ name: 'font', typeHint: 'string' },
 			{ name: 'fontSize', typeHint: 'number', data: { min: 0, step: 1 } },
-			{ name: 'fontStyle', typeHint: 'string' },
-			{ name: 'fontVariant', typeHint: 'string' },
-			{ name: 'fontWeight', typeHint: 'string' },
+			{ name: 'fontStyle', typeHint: 'valueList', values: ['normal', 'italic', 'oblique'] },
+			{ name: 'fontWeight', typeHint: 'valueList', values: ['normal', 'bold', 'bolder', 'lighter', '100', '200', '300', '400', '500', '600', '700', '800', '900'] },
+			{ name: 'fontVariant', typeHint: 'valueList', values: ['normal', 'small-caps'] },
 			{ name: 'autoRound', typeHint: 'boolean' },
-			{ name: 'align', typeHint: 'string' },
+			{ name: 'align', typeHint: 'valueList', values: ['left', 'center', 'right'] },
 			{ name: 'wordWrap', typeHint: 'boolean' },
 			{ name: 'wordWrapWidth', typeHint: 'number', data: { min: 0, step: 1 } },
 			{ name: 'useAdvancedWordWrap', typeHint: 'boolean' },
 			{ name: 'padding', typeHint: 'point' },
 			// { name: 'textBounds', typeHint: 'rect' },  // TODO waiting for null checking on rect editor
-			{ name: 'boundsAlignH', typeHint: 'string' },
-			{ name: 'boundsAlignV', typeHint: 'string' },
+			{ name: 'boundsAlignH', typeHint: 'valueList', values: ['left', 'center', 'right'] },
+			{ name: 'boundsAlignV', typeHint: 'valueList', values: ['top', 'middle', 'bottom'] },
 		]);
 
 		const basicProperties = {

diff --git a/src/data/inspector-data.ts b/src/data/inspector-data.ts
@@ -3,7 +3,7 @@ export type InspectableType = 'string' | 'text' | 'number' | 'boolean' | 'point'
 export interface InspectorPropertyModel {
 	name: string;
 	typeHint: InspectableType;
-	values?: { value: any, label: string }[] | Object;
+	values?: { value: any, label: string }[] | any[] | Object;
 	data?: any;
 	label?: string;
 }

diff --git a/src/editor-view/properties/editors/value-list/value-list-property-editor.ts b/src/editor-view/properties/editors/value-list/value-list-property-editor.ts
@@ -11,9 +11,12 @@ export class ValueListPropertyEditor extends PropertyEditor<any> {
 
 		let values: { value: any, label: string }[];
 		if (!prop.values) prop.values = [];
-		values = Array.isArray(prop.values)
-			? prop.values
-			: Object.keys(prop.values).map((label, value) => ({ value, label }));
+
+		if (Array.isArray(prop.values)) {
+			values = prop.values.map(v => (typeof v === 'object' ? v : { value: v, label: v }));
+		} else {
+			values = Object.keys(prop.values).map((label, value) => ({ value, label }));
+		}
 
 		values.forEach(v => {
 			const option = document.createElement('option');
@@ -26,16 +29,31 @@ export class ValueListPropertyEditor extends PropertyEditor<any> {
 		return select;
 	}
 
-	public setInternalValue(value: number) {
+	public setInternalValue(value: number | any) {
 		const options = this.select.options;
-		if (value === null || isNaN(value) || value < 0 || value >= options.length) return;
-		this._internalValue = options[value].value;
-		options[value].selected = true;
+		if (typeof value === 'number') {
+			if (value === null || isNaN(value) || value < 0 || value >= options.length) {
+				console.warn(`Invalud value: ${value}`);
+				return;
+			}
+			this._internalValue = options[value].value;
+			options[value].selected = true;
+		} else {
+			for (let i = 0; i < options.length; i++) {
+				if (options[i].value !== value) continue;
+				this._internalValue = options[i].value;
+				options[i].selected = true;
+				return;
+			}
+		}
 	}
 
 	public updateInternalValue(): any {
-		const index = parseInt(this.select.value, 10);
-		this.setInternalValue(index);
+		// TODO what if the value is a number (instead of index)
+		if (typeof this.select.value === 'number') {
+			const index = parseInt(this.select.value, 10);
+			this.setInternalValue(index);
+		} else this.setInternalValue(this.select.value);
 		return this._internalValue;
 	}