x4js 2.3.12 → 2.3.14

package/src/components/propgrid/progrid.module.scss

@@ -12,8 +12,12 @@
 	--propertygrid-odd-background: var(--color-primary-a5);
 	--propertygrid-even-background: transparent;
 	--propertygrid-disabled-background: rgb(170 170 170 / 14%);
+	--propertygrid-hover-background: var(--color-primary-a10);
+	--propertygrid-focus-background: var(--color-primary-a20);
+	--propertygrid-input-background: rgba(255,255,255,0.6);
 
     --propertygrid-group-background: var( --color-primary-a5 );
+    --propertygrid-group-color: var( --color-primary-a50 );
 }
 
 .x4propertygrid {
@@ -36,19 +40,23 @@
 		margin: 0;
 	}
 
+	// Two columns shared by all the rows: the titles, as wide as the longest
+	// of them but never more than half of the grid, and the editors, which
+	// take the rest.
 	.root {
 		display: grid;
-		grid-template-columns: 1fr;
+		grid-template-columns: fit-content( 50% ) 1fr;
 		grid-template-rows: auto;
 	}
 
 	.group {
+		grid-column: 1 / -1;
 		padding: 6px 4px 4px 4px;
 		min-height: 2em;
 		background-color: var( --propertygrid-group-background );
 		margin-bottom: 8px;
         box-shadow: 4px 3px 8px rgba(0, 0, 0, 0.4);
-        color: var(--color-primary-a50);
+        color: var( --propertygrid-group-color );
         display: flex;
 		align-items: center;
 		padding: 8px;
@@ -75,14 +83,14 @@
             
             &>.x4button {
                 background-color: transparent;
-                color: var(--color-primary-a50);
+                color: var( --propertygrid-group-color );
             }
-         
+
             &>.x4label {
                 .x4icon {
                     .fa-secondary,
                     .fa-primary {
-                        fill: var( --color-primary-a50 );
+                        fill: var( --propertygrid-group-color );
                     }
 
                     width: 1em;
@@ -103,52 +111,62 @@
 		}
 
 		&:not( :last-child ) {
-			border-bottom: 1px solid var(--color-primary-a50);
+			border-bottom: 1px solid var( --propertygrid-group-color );
 			//box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);
 		}
 	}
 
+	// A row has no box of its own: its two cells go straight on the columns
+	// of the grid, which is how all the titles get the same width. (A row is
+	// a fieldset: it cannot be a subgrid.) What a row looked like, background
+	// and bottom line, is carried by its cells.
 	.row {
-		border-bottom: 1px solid var( --border-light );
-		//border-top: none;
-		//border-left: 1px solid var(--color-primary-a50);
-		//border-right: 1px solid var(--color-primary-a50);
+		display: contents;
+
+		> .cell {
+			min-width: 0;
+	    	padding: 4px;
+			border-bottom: 1px solid var( --border-light );
+
+			input {
+				background: var( --propertygrid-input-background );
+			}
+		}
 
-		&.even:not(:disabled) {
+		&.even:not(:disabled) > .cell {
 			background-color: var(--propertygrid-even-background)
 		}
-		
-		&.odd:not(:disabled) {
+
+		&.odd:not(:disabled) > .cell {
 			background-color: var(--propertygrid-odd-background)
 		}
-		
-		&.odd:disabled {
+
+		&.odd:disabled > .cell {
 			background-color: var(--propertygrid-disabled-background)
 		}
-		
-		&:has(:focus) {
-			background-color: var(--color-primary-a20);
-		}
 
-		&:hover {
-			background-color: var(--color-primary-a10);
+		&:has(:focus) > .cell {
+			background-color: var( --propertygrid-focus-background );
 		}
-		
-		.cell {
-			flex-grow: 1;
-			flex-basis: 10px;
-	    	padding: 4px;
 
-			input {
-				background: rgba(255,255,255,0.6);
-			}
+		&:hover > .cell {
+			background-color: var( --propertygrid-hover-background );
 		}
 
-		.cell:first-child {
+		> .cell:first-child {
 			border-right: 1px solid var( --border );
 		}
 
-		.hdr {
+		// a row without title (a button): its editor takes the two columns
+		> .cell:only-child {
+			grid-column: 1 / -1;
+		}
+
+		// The title, centered in the height of the row. Wider than half of
+		// the grid, it is cut by the column and goes on several lines.
+		> .hdr {
+			display: flex;
+			align-items: center;
 			padding: 8px;
 			padding-left: 34px;
 		}

package/src/components/propgrid/propgrid.ts

@@ -23,6 +23,8 @@ import { ListboxID, ListItem } from "../listbox/listbox"
 import { Label, SimpleText } from "../label/label"
 import { asap, class_ns, isFunction, isNumber } from '../../core/core_tools';
 import { Icon, ScrollView } from '../components'
+import { ColorInput } from '../colorinput/colorinput'
+import { EvColorChange } from '../colorpicker/colorpicker'
 
 import icons from "../assets/icons"
 
@@ -32,12 +34,14 @@ type IValue = boolean | number | string;
 type IValueCB = ( name: string) => IValue;
 
 export interface PropertyValue {
-	type: 'boolean' | 'number' | 'string' | 'password' | 'options' | 'label' | 'button';
+	type: 'boolean' | 'number' | 'string' | 'password' | 'options' | 'color' | 'label' | 'button';
 	title?: string;
 	desc?: string;
 	name?: string;
 	value: IValue | IValueCB;
 	options?: ListItem[];
+	swatches?: string[] | ( ( ) => string[] );	// for colors: offered in the picker; a function is called when it opens
+	nullable?: boolean;	// for colors: "no color" can be chosen, the value is then null
 	callback?: ( name: string, value: any ) => void;
 	live?: boolean;	// for live update 
 	cls?: string;
@@ -67,6 +71,16 @@ export interface PropertyProps extends ComponentProps {
  * @cssvar
  * ```
  * --propertygrid-background
+ * --propertygrid-odd-background
+ * --propertygrid-even-background
+ * --propertygrid-disabled-background
+ * --propertygrid-hover-background
+ * --propertygrid-focus-background
+ * --propertygrid-input-background
+ * --propertygrid-group-background
+ * --propertygrid-group-color
+ * --propertygrid-gadget-background
+ * --propertygrid-gadget-color
  * ```
  */
 
@@ -260,10 +274,23 @@ export class PropertyGrid extends VBox {
 				}
 			});
 		}
+		else if (item.type === 'color') {
+			editor = new ColorInput({
+				id: item.name,
+				color: value as string,
+				format: "hex",
+				picker: true,
+				swatches: item.swatches,
+				nullable: item.nullable,
+				change: ( e: EvColorChange ) => {
+					item.callback?.( item.name, e.value );
+				}
+			});
+		}
 		else if (item.type === 'label') {
-			editor = new Label({ 
+			editor = new Label({
 				id: item.name,
-				text: value as string, 
+				text: value as string,
 			});
 		}
 		else if (item.type === 'button') {
@@ -347,6 +374,12 @@ export class PropertyGrid extends VBox {
 				editor.setNumValue( value as number, -2 );
 			}
 		}
+		else if (item.type === 'color') {
+			const editor = this.root.query<ColorInput>( '#'+item.name );
+			if( editor ) {
+				editor.setColor( value as string );
+			}
+		}
 		else if (item.type === 'label') {
 			const label = this.root.query<Label>( '#'+item.name );
 			if( label ) {

package/src/core/component.ts

@@ -70,6 +70,15 @@ export const makeUniqueComponentId = ( ) => {
 	return `x4-${gen_id++}`;
 }
 
+/**
+ * CSS properties. A number gets "px", except for the unitless properties
+ * (opacity, lineHeight, flexGrow...).
+ */
+
+export type StyleProps = {
+	[K in keyof CSSStyleDeclaration]?: CSSStyleDeclaration[K] | number;
+};
+
 /**
  * Base properties for all components.
  */
@@ -80,7 +89,7 @@ export interface ComponentProps {
 	/** Namespace for SVG/MathML elements. */
     ns?: string;
 	/** Inline CSS styles. */
-    style?: Partial<CSSStyleDeclaration>;
+    style?: StyleProps;
 	/** HTML attributes. */
     attrs?: Record<string,string|number|boolean>;
 	/** Child content (components, strings, or HTML). */
@@ -685,17 +694,17 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
      * @returns The component instance for chaining.
      */
 
-	setStyle( style: Partial<CSSStyleDeclaration> ): this {
+	setStyle( style: StyleProps ): this {
 		const _style = (this.dom as HTMLElement).style;
 
 		for( const name in style ) {
-			
-			let value = style[name];
+
+			let value: any = style[name];
 			if( !unitless[name] && (isNumber(value) || RE_NUMBER.test(value)) ) {
 				value += "px";
 			}
 
-			_style[name] = value;
+			(_style as any)[name] = value;
 		}
 
 		return this;

package/src/core/core_tools.ts

@@ -264,7 +264,7 @@ export class Rect implements IRect {
 
     moveTo( x: number, y: number ) {
         this.left = x;
-        this.top = x;
+        this.top = y;
 
         return this;
     }