x4js 2.3.30 → 2.3.32

package/src/components/themes.scss

@@ -88,6 +88,9 @@ $color--dark-base: #2d6fa5;
 	--accent-color-focus: var(--color-primary-a0);
 	--accent-color-active: var(--color-primary-a0);
 
+	// the accent as the colour of a text, on the background: a button checked, focused
+	--accent-text: var(--accent-background-active);
+
 	// Borders
 	--border: color-mix(in srgb, var(--color-primary-a100) 11.8%, var(--color-primary-a0));			// #e1e1e1
 	--border-light: color-mix(in srgb, var(--color-primary-a100) 8.2%, var(--color-primary-a0));		// #eaeaea
@@ -162,6 +165,14 @@ html.x4theme-dark {
 	--accent-color-focus: #ffffff;
 	--accent-color-active: #ffffff;
 
+	// the accent as a text: the blues of the scale are dark, lost on the background; a light one (chosen)
+	--accent-text: #{color.adjust($color--dark-base, $lightness: 25%)};
+
+	// the edge of a button checked or focused, in that blue: the dark ones are lost on the background
+	--checkbox-button-border-checked: var( --accent-text );
+	--radio-button-border-checked: var( --accent-text );
+	--ol-button-border-focus: var( --accent-text );
+
 	// the title bar of a Dialog: the one of the window of VS Code
 	--color-dialog-caption: #181818;			// titleBar.activeBackground
 	--color-dialog-caption-text: #cccccc;		// titleBar.activeForeground
@@ -177,5 +188,8 @@ html.x4theme-dark {
 	// the marks of the events out of the view of a Planner: the darkest blue (a90 is the text here)
 	--planner-edge-background: var( --accent-background-active );
 
+	// the icon of a tooltip: the dark blues are lost on its background; the colour of the descriptions
+	--tooltip-icon-color: var( --text-secondary );
+
 	color-scheme: dark;		// the native parts: select, scroll bars, number spinners
 }

package/src/components/treeview/treeview.ts

@@ -16,7 +16,7 @@
 
 import { asap } from '../../core/core_tools';
 import { EventCallback } from '../../core/core_events';
-import { Component, ComponentEvent, ComponentEvents, ComponentProps, EvClick, EvDblClick, EvSelectionChange } from '../../core/component';
+import { Component, ComponentEvent, ComponentEvents, ComponentProps, EvClick, EvContextMenu, EvDblClick, EvSelectionChange } from '../../core/component';
 
 import { ScrollView, Viewport } from '../viewport/viewport';
 import { Label, SimpleText } from '../label/label';
@@ -59,12 +59,14 @@ export interface TreeviewProps extends Omit<ComponentProps,"content"> {
 	selectionChange?: EventCallback<EvSelectionChange>;
 	dblClick?: EventCallback<EvDblClick>;
 	click?: EventCallback<EvClick>;
+	contextMenu?: EventCallback<EvContextMenu>;
 }
 
 export interface TreeviewEvents extends ComponentEvents {
 	selectionChange?: EvSelectionChange;
 	dblClick?: EvDblClick;
 	click?: EvClick;
+	contextMenu?: EvContextMenu;
 }
 
 /**
@@ -185,7 +187,15 @@ class CTreeViewItem extends Box {
 
 
 /**
- * 
+ * A tree of items, folders that open and close.
+ *
+ * A right click selects the item under the mouse, then fires contextMenu, its context the
+ * id of the item (null out of the items); the menu of the browser is not shown.
+ *
+ * @example
+ * new Treeview( { items, contextMenu: ( ev ) => {
+ *     new Menu( { items: [ { text: "Rename", click: ( ) => rename( ev.context ) } ] } ).displayAt( ev.uievent.clientX, ev.uievent.clientY );
+ * } } );
  */
 
 export class Treeview extends Component<TreeviewProps,TreeviewEvents> {
@@ -199,7 +209,7 @@ export class Treeview extends Component<TreeviewProps,TreeviewEvents> {
 	constructor( props: TreeviewProps ) {
 		super( props );
 
-		this.mapPropEvents( props, "selectionChange", "dblClick", "click" );
+		this.mapPropEvents( props, "selectionChange", "dblClick", "click", "contextMenu" );
 
 		const scroller = new ScrollView( { cls: "body" } );
 		this._view = scroller.getViewport( );
@@ -218,6 +228,7 @@ export class Treeview extends Component<TreeviewProps,TreeviewEvents> {
 		this.setDOMEvents( {
 			click: ( ev ) => this._on_click( ev ),
 			dblclick: (e) => this._on_click(e),
+			contextmenu: ( ev ) => this._on_ctx_menu( ev ),
 			keydown: ( ev ) => this._onkey( ev ),
 		});
 
@@ -244,10 +255,18 @@ export class Treeview extends Component<TreeviewProps,TreeviewEvents> {
 		}
 	}
 
+	/**
+	 * the item of this tree an element is in, not one of a component around it; null when none
+	 */
+
+	private _itemOf( target: EventTarget ): Component {
+		const c = Component.closest( target as Element, ".item" );
+		return c && this.contains( c ) ? c : null;
+	}
+
 	private _on_click( ev: UIEvent ) {
-		// an item of this tree, not of a component around it
-		const c = Component.closest( ev.target as Element, ".item" );
-		if( c && this.contains( c ) ) {
+		const c = this._itemOf( ev.target );
+		if( c ) {
 			const id = c.getInternalData( "id" );
 
 			const fev: ComponentEvent = { context:id };
@@ -268,6 +287,25 @@ export class Treeview extends Component<TreeviewProps,TreeviewEvents> {
 		this.clearSelection( );
 	}
 
+	/**
+	 * a right click: the item under the mouse selected, then contextMenu
+	 */
+
+	private _on_ctx_menu( ev: MouseEvent ) {
+		ev.preventDefault( );
+
+		const c = this._itemOf( ev.target );
+		if( c ) {
+			const id = c.getInternalData( "id" );
+
+			this._selectItem( id, c );
+			this.fire( "contextMenu", { uievent: ev, context: id } );
+			return;
+		}
+
+		this.fire( "contextMenu", { uievent: ev, context: null } );
+	}
+
 	private _onkey( ev: KeyboardEvent ) {
 		switch( ev.key ) {
 			case "ArrowDown": {

package/src/core/core_clipboard.ts

@@ -47,6 +47,19 @@ export interface ClipboardRead extends ClipboardContent {
 /** what the application set last */
 let kept: ClipboardContent = null;
 
+/**
+ * The image to read among the types of the clipboard: the PNG when there is one, every
+ * program reads it; else the first image (a program puts its own format first: a SVG).
+ */
+
+function imageTypeOf( types: readonly string[] ): string {
+	if( types.includes( "image/png" ) ) {
+		return "image/png";
+	}
+
+	return types.find( type => type.startsWith( "image/" ) );
+}
+
 function toPng( image: Blob ): Promise<Blob> {
 	return new Promise( ( resolve, reject ) => {
 		const url = URL.createObjectURL( image );
@@ -119,8 +132,9 @@ export async function setClipboard( data: ClipboardContent ): Promise<boolean> {
 /**
  * Read the clipboard, from a menu or a button.
  *
- * @returns what the system holds. When it refuses or cannot be asked, what
- * the application set last. Never files: see getEventClipboard.
+ * @returns what the system holds, its image as a PNG when it has one. When it
+ * refuses or cannot be asked, what the application set last. Never files: see
+ * getEventClipboard.
  *
  * @example
  * const data = await getClipboard( );
@@ -143,12 +157,14 @@ export async function getClipboard( ): Promise<ClipboardRead> {
 			const data: ClipboardRead = { files: [] };
 
 			for( const item of await system.read( ) ) {
+				const imageType = imageTypeOf( item.types );
+
 				for( const type of item.types ) {
 					if( type==="text/plain" && !data.text ) {
 						const blob = await item.getType( type );
 						data.text = ( await blob.text( ) ) || undefined;
 					}
-					else if( type.startsWith( "image/" ) && !data.image ) {
+					else if( type===imageType && !data.image ) {
 						data.image = await item.getType( type );
 					}
 				}
@@ -212,8 +228,9 @@ export function setEventClipboard( ev: ClipboardEvent, data: ClipboardContent ):
 }
 
 /**
- * Read the clipboard in a "paste" event. The default of the event is left
- * as it is: prevent it when what was read is used.
+ * Read the clipboard in a "paste" event, its image the PNG file when there is
+ * one. The default of the event is left as it is: prevent it when what was
+ * read is used.
  *
  * @example
  * this.addDOMEvent( "paste", ev => {
@@ -232,7 +249,9 @@ export function getEventClipboard( ev: ClipboardEvent ): ClipboardRead {
 	if( transfer ) {
 		data.text = transfer.getData( "text/plain" ) || undefined;
 		data.files = Array.from( transfer.files );
-		data.image = data.files.find( file => file.type.startsWith( "image/" ) );
+
+		const imageType = imageTypeOf( data.files.map( file => file.type ) );
+		data.image = data.files.find( file => file.type===imageType );
 	}
 
 	return data;