x4js 2.2.59 → 2.2.60

package/package.json

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

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;

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/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 );