x4js 2.0.24 → 2.0.26

package/src/components/keyboard/keyboard.ts

@@ -14,7 +14,7 @@
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
  **/
 
-import { Component, ComponentProps, Flex } from '../../core/component';
+import { Component } from '../../core/component';
 import { Box, BoxProps, Button, HBox, VBox } from '../components';
 import { _tr } from '../../core/core_i18n';
 
@@ -107,7 +107,7 @@ export class Keyboard extends HBox<KeyboardProps>
 	keyboard: Box;
 	visible: boolean;
 	input: HTMLInputElement;
-	
+		
     constructor( props: KeyboardProps )  {
         super( { ...props, id: 'v-keyboard' } );
 
@@ -140,11 +140,15 @@ export class Keyboard extends HBox<KeyboardProps>
 		});
     }
 
+	setZoom( perc: number ) {
+		this.setStyleVariable( '--keyboard-zoom', perc+'%' );
+	}
+
 	/**
 	 * 
 	 */
 
-    handleKey( e: UIEvent ) {
+    private handleKey( e: UIEvent ) {
         let target = e.target as HTMLElement;
         let key;
 
@@ -238,19 +242,17 @@ export class Keyboard extends HBox<KeyboardProps>
 	 * 
 	 */
 
-    _redraw( ) {
+    private _redraw( ) {
 		this.setContent( [
-			new Flex( ),
 			this.keyboard = new VBox( {
 				id: "kb",
 				cls: this.mode,
 				content: this._createContent( ),
 			}),
-			new Flex( ),
         ] );
     }
 
-    _scrollIntoView( el: HTMLElement ) {
+    private _scrollIntoView( el: HTMLElement ) {
         
         let parent = el.parentElement ;
 
@@ -275,7 +277,7 @@ export class Keyboard extends HBox<KeyboardProps>
         //el.scrollIntoView( false );
     }
 
-    _updateVis = ( ) => {
+    private _updateVis = ( ) => {
         
         if( this.visible ) {
             if( this.input ) {

package/src/core/core_svg.ts

@@ -149,11 +149,17 @@ class SvgItem {
 	 */
 
 	getAttr( name: string ) : string {
-		return this._dom.getAttribute( name );
+		const a = this._dom.getAttribute( name ) || '';
+		return a;
 	}
 
 	getNumAttr( name: string ) {
-		return parseInt( this._dom.getAttribute( name ) );
+		const a = this._dom.getAttribute( name )
+		if( a=='' ) {
+			return 0;
+		}
+
+		return parseInt( a );
 	}
 
 	/**
@@ -164,7 +170,12 @@ class SvgItem {
 	 */
 
 	setAttr( name: string, value: string ) : this {
-		this._dom.setAttribute( name, value );
+		if( value===null || value===undefined ) {
+			this._dom.removeAttribute( name );
+		}
+		else {
+			this._dom.setAttribute( name, value );
+		}
 		return this;
 	}
 
@@ -238,12 +249,18 @@ class SvgItem {
 		return this;
 	}
 
+	
 	/**
 	 * 
 	 */
 
 	transform( tr: string ): this {
-		const t = this.getAttr( "transform" ) ?? "";
+		this.setAttr( "transform", tr );
+		return this;
+	}
+
+	add_transformation( tr: string ): this {
+		const t = this.getAttr( "transform" );
 		this.setAttr( "transform", t+' '+tr );
 		return this;
 	}
@@ -262,16 +279,32 @@ class SvgItem {
 		return this;
 	}
 
+	add_rotation( deg: number, cx: number, cy: number ): this {
+		this.add_transformation( `rotate( ${deg} ${cx} ${cy} )` );
+		return this;
+	}
+
 	translate( dx: number, dy: number ): this {
 		this.transform( `translate( ${dx} ${dy} )` );
 		return this;
 	}
 
+	add_translation( dx: number, dy: number ): this {
+		this.add_transformation( `translate( ${dx} ${dy} )` );
+		return this;
+	}
+
 	scale( x: number ): this {
 		this.transform( `scale( ${x} )` );
 		return this;
 	}
 
+	add_scale( x: number ): this {
+		this.add_transformation( `scale( ${x} )` );
+		return this;
+	}
+
+
 	/**
 	 * 
 	 */