x4js 2.2.58 → 2.2.60

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "x4js",
-  "version": "2.2.58",
+  "version": "2.2.60",
   "type": "module",
   "main": "src/x4.ts",
   "module": "src/x4.ts",

package/src/components/btngroup/btngroup.ts

@@ -37,6 +37,7 @@ type predefined = 		`ok${ "" | `.${string}`}`
 					|	`no${ "" | `.${string}`}`
 					| 	`retry${ "" | `.${string}`}`
 					| 	`abort${ "" | `.${string}`}`
+					| 	`save${ "" | `.${string}`}`
 					| 	"-" | ">>"	// - = Flex
 					|   "~";		// space
 
@@ -120,6 +121,7 @@ export class BtnGroup extends Box<BtnGroupProps,BtnGroupEvents> {
 					case "no":		title = _tr.global.no; break;
 					case "yes":		title = _tr.global.yes; break;
 					case "retry":	title = _tr.global.retry; break;
+					case "save":	title = _tr.global.save; break;
 				}
 
 				b = new Button( { cls, id: txt, label: title, click: ( ) => {

package/src/components/monaco/monaco.ts

@@ -4,6 +4,12 @@ import { Component, ComponentProps } from '../../core/component';
 import Monaco from './bin/monaco'; 
 import "./monaco.module.scss"
 
+export type IMonarchLanguage = monaco.languages.IMonarchLanguage;
+export type CompletionItem = monaco.languages.CompletionItem;
+export type CompletionItemProvider = monaco.languages.CompletionItemProvider;
+
+export { IRange, }
+
 
 interface MonacoEditorProps extends ComponentProps {
 	language: "typescript" | "javascript" | "json" | "css" | "html" | string;
@@ -131,5 +137,13 @@ export class MonacoEditor extends Component<MonacoEditorProps> {
 		await this._start( );
 		return this._monaco;
 	}
+
+	getText( ) : string {
+		return this._editor.getValue( );
+	}
+
+	setText( text: string ) {
+		return this._editor.setValue( text );
+	}
 }
 

package/src/components/popup/popup.ts

@@ -145,15 +145,11 @@ export class Popup<P extends PopupProps = PopupProps, E extends PopupEvents = Po
 		this._do_show( );		// to compute size
 
 		const fixpos = ( ) => {
-			console.log( "fixpos" );
-
 			const orc = this.getBoundingRect( );
 			this.setStyle( {
 				left: ((window.innerWidth - orc.width) / 2) +'px',
 				top:  ((window.innerHeight - orc.height) / 2) +'px',
 			} );
-
-			console.log( orc );
 		}
 
 		asap( fixpos );

package/src/components/propgrid/propgrid.ts

@@ -197,7 +197,7 @@ export class PropertyGrid extends VBox {
 			editor = new Input({ 
 				type: "checkbox", 
 				id: item.name,
-				name: item.name, 
+				//name: item.name, 
 				checked: value as boolean, 
 				dom_events: {
 					change: ( e: Event ) => {
@@ -212,7 +212,7 @@ export class PropertyGrid extends VBox {
 				value: value as ListboxID,
 				id: item.name,
 				items: item.options,
-				name: item.name,
+				//name: item.name,
 				change: ( e: EvChange ) => {
 					item.callback?.( item.name, e.value );
 				}
@@ -222,7 +222,7 @@ export class PropertyGrid extends VBox {
 			editor = new Input({ 
 				type: 'password',
 				id: item.name,
-				name: item.name, 
+				//name: item.name, 
 				value: String(value), 
 				focus: ( e: EvFocus ) => {
 					if( e.focus_out ) {
@@ -235,7 +235,7 @@ export class PropertyGrid extends VBox {
 			editor = new Input({ 
 				type: 'number', 
 				id: item.name,
-				name: item.name, 
+				//name: item.name, 
 				value: String(value),
 				step: item.step,
                 min: item.min,
@@ -273,7 +273,7 @@ export class PropertyGrid extends VBox {
             editor = new Input({ 
                 type: 'text', 
                 id: item.name,
-                name: item.name, 
+                //name: item.name, 
                 value: value as string,
                 focus: ( e: EvFocus ) => {
                     if( e.focus_out ) {

package/src/components/sizers/sizer.module.scss

@@ -17,6 +17,7 @@
 
 .x4csizer {
 	position: absolute;
+	touch-action: none;
 
 	@mixin horz {
 		left: 0;

package/src/components/sizers/sizer.ts

@@ -89,6 +89,7 @@ export class CSizer extends Component<ComponentProps,CSizerEvent> {
 			}
 
 			this.fire( "start", { })
+			e.preventDefault( );
 		});
 
 		this.addDOMEvent( "pointerup", ( e: PointerEvent ) => {

package/src/components/tabs/tabs.module.scss

@@ -65,3 +65,9 @@
 	}
 }
 
+.x4tabs.inline {
+	&> .body {
+		border: none;
+		border-top: 1px solid var( --border );
+	}
+}

package/src/components/tickline/tickline.module.scss

@@ -20,7 +20,7 @@
 	--tickline-background: white;
 }
 
-.x-tick-line {
+.x4tickline {
 	position: relative;
 	background-color: var( --tickline-background );
 }

package/src/components/tickline/tickline.ts

@@ -1,6 +1,7 @@
 import { SvgBuilder, SvgComponent } from '../../core/core_svg';
 import { Color } from '../../core/core_colors';
 import { Component, ComponentProps } from '../../core/component';
+import { class_ns } from '../../core/core_tools';
 
 import "./tickline.module.scss"
 
@@ -23,6 +24,7 @@ interface TickLineProps extends ComponentProps {
  * ```
  */
 
+@class_ns( "x4" )
 export class TickLine extends Component<TickLineProps> {
 	
 	constructor( props: TickLineProps ) {
@@ -47,6 +49,8 @@ export class TickLine extends Component<TickLineProps> {
 		const xmul = rc.width/vals.length;
 		const ymul = rc.height/(max-min);
 
+		const b = rc.height;
+
 		const bld = new SvgBuilder( );
 
 		if( props.background ) {
@@ -56,8 +60,8 @@ export class TickLine extends Component<TickLineProps> {
 
 		if( min!=0 ) {
 			bld.path( )
-				.moveTo( 0, 0-min )
-				.lineTo( rc.width, 0-min )
+				.moveTo( 0, b-(0-min)*ymul )
+				.lineTo( rc.width, b-(0-min)*ymul )
 				.stroke( "var(--tickline-axis-color)", 1 )
 				.antiAlias( false )
 		}
@@ -66,10 +70,10 @@ export class TickLine extends Component<TickLineProps> {
 			const pth = bld.path( );
 			for( let x=0; x<vals.length; x++ ) {
 				if( x==0 ) {
-					pth.moveTo( x*xmul, (vals[x]-min)*ymul );
+					pth.moveTo( x*xmul, b-(vals[x]-min)*ymul );
 				}
 				else {
-					pth.lineTo( x*xmul, (vals[x]-min)*ymul );
+					pth.lineTo( x*xmul, b-(vals[x]-min)*ymul );
 				}
 			}
 
@@ -78,7 +82,7 @@ export class TickLine extends Component<TickLineProps> {
 		}
 		else {
 			for( let x=0; x<vals.length; x++ ) {
-				bld.rect( x*xmul, (0-min)*ymul, xmul-1, vals[x]*ymul )
+				bld.rect( x*xmul, b-(0-min)*ymul, xmul-1, b-vals[x]*ymul )
 					.fill( props.color ? props.color.toHexString() : "var(--tickline-color)" )
 					.antiAlias( false );
 			}

package/src/components/treeview/treeview.ts

@@ -209,6 +209,7 @@ export class Treeview extends Component<TreeviewProps,TreeviewEvents> {
 
 		if( props.footer ) {
 			props.footer.setAttribute( "id", "footer" );
+			props.footer.addClass( "packed" );
 		}
 
 		this.setAttribute( "tabindex", 0 );

package/src/core/core_colors.ts

@@ -88,7 +88,7 @@ export class Color {
 		if( value.startsWith('#') ) {
 			if (value.length == 7 && /#[0-9a-fA-F]{6}/.test(value)) {
 				const hex = parseInt(value.slice(1), 16);
-				return this.setRgb( hex >> 16, hex >> 8, hex, 1.0 );
+				return this.setRgb( (hex >> 16)&0xff, (hex >> 8)&0xff, (hex)&0xff, 1.0 );
 			}
 	
 			if (value.length == 4 && /#[0-9a-fA-F]{3}/.test(value)) {
@@ -98,7 +98,7 @@ export class Color {
 
 			if (value.length == 9 && /#[0-9a-fA-F]{8}/.test(value)) {
 				const hex = parseInt(value.slice(1), 16) >>> 0;
-				return this.setRgb( hex >> 24, hex >> 16, hex >> 8, (hex & 0xFF) / 255.0 );
+				return this.setRgb( (hex >> 24)&0xff, (hex >> 16)&0xff, (hex >> 8)&0xff, (hex & 0xFF) / 255.0 );
 			}
 		}
 		else {
@@ -131,7 +131,7 @@ export class Color {
 			else {
 				const xx = CSS_COLORS[value];
 				if( xx!==undefined ) {
-					return this.setRgb( xx>>16, xx>>8, xx, 1.0 );
+					return this.setRgb( (xx>>16)&0xff, (xx>>8)&0xff, (xx)&0xff, 1.0 );
 				}
 				else if( value=="transparent" ) {
 					return this.setRgb( 0, 0, 0, 0 );