Merge pull request #33 from stan-donarise/fixes-2

Cell translations (spreading)

app/app.view.css.ts

@@ -34,6 +34,9 @@ namespace $.$$ {
 			Body_content: {
 				gap: $mol_gap.block,
 				maxWidth: '25rem',
+				flex: {
+					direction: 'row',
+				},
 			},
 			Head: {
 				justify: {
@@ -42,6 +45,13 @@ namespace $.$$ {
 			},
 		},
 
+		Body: {
+			flex: { 
+				direction: 'column',
+				grow: 1,
+			},
+		},
+
 		Player: {
 			flex: {
 				grow: 1,

app/app.view.tree

@@ -13,10 +13,11 @@ $mpds_cifplayer_app $mol_drop
 					uri \https://github.com/tilde-lab/cifplayer
 					title \
 				<= Lights $mol_lights_toggle
-			body <= menu_body /
+			body / <= Body $mol_view sub /
 				<= Upload $mol_button_open
 					Icon => Upload_icon
 					Native => Upload_native
+					files? <=> files_read? null
 					sub /
 						<= Upload_icon
 						<= Upload_native

lib/three/view/view.view.web.ts

@@ -29,18 +29,21 @@ namespace $.$$ {
 		/** Remove an existing object and create a new */
 		new_object< T extends InstanceType< THREE["Object3D"] > >( name: string, make: ()=> T ): T {
 			const old = this.scene()?.getObjectByName( name )
-			if( old ) {
-				$mpds_cifplayer_lib_three_view_dispose_deep( old )
-				this.scene()?.remove( old )
-			}
+			if( old ) this.remove_object( old )
 
 			const obj = make()
 			obj.name = name
 			this.scene().add( obj )
+			obj.destructor = ()=> this.remove_object( obj )
 
 			return obj
 		}
 
+		remove_object( obj: any ) {
+			$mpds_cifplayer_lib_three_view_dispose_deep( obj )
+			this.scene()?.remove( obj )
+		}
+
 		@ $mol_mem
 		scene() {
 			const scene = new THREE.Scene()

matinfio/cell/cell.ts

@@ -6,8 +6,17 @@ namespace $ {
 		return math.divide( vec, math.norm( vec ) )
 	}
 
+	export type $mpds_cifplayer_matinfio_cell = {
+		a: number,
+		b: number,
+		c: number,
+		alpha: number,
+		beta: number,
+		gamma: number,
+	}
+
 	/** Crystalline cell parameters to 3x3 matrix */
-	export function $mpds_cifplayer_matinfio_cell_to_matrix( this : $, cell: NonNullable< $mpds_cifplayer_matinfio_internal_obj['cell'] > ): number[][] {
+	export function $mpds_cifplayer_matinfio_cell_to_matrix( this : $, cell: $mpds_cifplayer_matinfio_cell ): number[][] {
 		const { a, b, c, alpha, beta, gamma } = cell
 		if( !a || !b || !c || !alpha || !beta || !gamma ) {
 			return this.$mol_fail( new $mol_data_error('Error: invalid cell definition') )

matinfio/matinfio.web.ts

@@ -34,21 +34,16 @@ namespace $ {
 		x: number,
 		y: number,
 		z: number,
+		c: string, //color
+		r: number, //radius
 		symbol: string,
 		label: string,
 		overlays: Record< string, string | number >,
 	}
 
 	export type $mpds_cifplayer_matinfio_internal_obj = {
 		cell_matrix?: number[][],
-		cell?: {
-			a: number,
-			b: number,
-			c: number,
-			alpha: number,
-			beta: number,
-			gamma: number,
-		},
+		cell?: $mpds_cifplayer_matinfio_cell,
 		atoms: $mpds_cifplayer_matinfio_internal_obj_atom[],
 		sg_name: string,
 		ng_name: string,
@@ -58,6 +53,33 @@ namespace $ {
 		mpds_data: boolean,
 	}
 
+	export type $mpds_cifplayer_matinfio_player_obj = {
+		cell_matrix?: number[][],
+		cell?: $mpds_cifplayer_matinfio_cell,
+		descr: $mpds_cifplayer_matinfio_cell & {
+			symlabel?: string,
+		},
+		overlayed: Record< string, string >,
+		atoms: {
+			fract: {
+				x: number,
+				y: number,
+				z: number,
+			} | null,
+			x: number,
+			y: number,
+			z: number,
+			c: string, //color
+			r: number, //radius
+			overlays: Record< string, string | number >,
+		}[],
+		sg_name: string,
+		ng_name: number,
+		info: string,
+		mpds_demo: boolean,
+		mpds_data: boolean,
+	}
+
 	export class $mpds_cifplayer_matinfio extends $mol_object2 {
 
 		static log = this.$.$mpds_cifplayer_matinfio_log

matinfio/player/player.web.ts

@@ -4,32 +4,28 @@ namespace $ {
 
 	/** Prepare internal repr for visualization in three.js */
 	export function $mpds_cifplayer_matinfio_player_from_obj( this: $, crystal: $mpds_cifplayer_matinfio_internal_obj ) {
-		let cell_matrix
+		let cell_matrix: number[][] | undefined
 		let descr: any = false
 
 		if( crystal.cell && Object.keys( crystal.cell ).length == 6 ) { // for CIF
+
 			cell_matrix = this.$mpds_cifplayer_matinfio_cell_to_matrix( crystal.cell )
 			descr = crystal.cell
 			var symlabel = ( crystal.sg_name || crystal.ng_name ) ? ( ( crystal.sg_name ? crystal.sg_name : "" ) + ( crystal.ng_name ? ( " (" + crystal.ng_name + ")" ) : "" ) ) : false
 			if( symlabel ) descr.symlabel = symlabel
 
 		} else {
+
 			cell_matrix = crystal.cell_matrix // for POSCAR and OPTIMADE
-
-			const params = $mpds_cifplayer_matinfio_cell_params_from_matrix( cell_matrix! )
-			descr = {
-				'a': params[0],
-				'b': params[1],
-				'c': params[2],
-				'alpha': params[3],
-				'beta': params[4],
-				'gamma': params[5],
+			if( cell_matrix ) {
+				const [ a, b, c, alpha, beta, gamma ] = $mpds_cifplayer_matinfio_cell_params_from_matrix( cell_matrix )
+				descr = { a, b, c, alpha, beta, gamma }
 			}
 		}
 
 		if( !crystal.atoms.length ) this.$mpds_cifplayer_matinfio_log.warning( "Note: no atomic coordinates supplied" )
 
-		const render = {
+		const render: $mpds_cifplayer_matinfio_player_obj = {
 			atoms: [] as any[],
 			cell_matrix: cell_matrix,
 			cell: descr,

player/player.view.css.ts

@@ -6,6 +6,8 @@ namespace $.$$ {
 			color: $mol_theme.back,
 		},
 
+		position: 'relative',
+
 		'@': {
 			fullscreen: {
 				'true': {
@@ -31,6 +33,28 @@ namespace $.$$ {
 			color: $mol_style_func.vary('--color_c')
 		},
 
+		Spread_label_a: {
+			color: $mol_style_func.vary('--color_a'),
+			padding: $mol_gap.text,
+		},
+
+		Spread_label_b: {
+			color: $mol_style_func.vary('--color_b'),
+			padding: $mol_gap.text,
+		},
+
+		Spread_label_c: {
+			color: $mol_style_func.vary('--color_c'),
+			padding: $mol_gap.text,
+		},
+
+		Spread_cells: {
+			Bubble: {
+				display: 'grid',
+				gridTemplateColumns: 'auto auto',
+			},
+		},
+
 		Left_panel: {
 			position: 'absolute',
 			zIndex: 1,

player/player.view.tree

@@ -5,14 +5,23 @@ $mpds_cifplayer_player $mol_view
 	zoom_scale_step 0.3
 	vibrate? null
 	unvibrate null
+	spread_cells /
+		<= spread_a? 1
+		<= spread_b? 1
+		<= spread_c? 1
+	spread_cells_limit 50
+	-
 	auto /
 		<= dir_light null
 		<= ambient_light null
-		<= atom_box null
-		<= overlay_box null
+		^ atom_boxes /
+		^ overlay_boxes /
 		<= cell_box null
 		<= axes_box null
 		<= overlay_changed null
+	atom_box* null
+	overlay_box* null
+	-
 	sub /
 		<= Three $mpds_cifplayer_lib_three_view
 			scene => scene
@@ -36,7 +45,7 @@ $mpds_cifplayer_player $mol_view
 							title <= descr_beta \β=
 						<= Descr_gamma $mol_paragraph
 							title <= descr_gamma \γ=
-				<= Symlabel $mol_pick
+				^ symlabel_visible / <= Symlabel $mol_pick
 					trigger_content /
 						<= Sym_icon $mol_icon_eye_check
 						<= symlabel \SG
@@ -51,6 +60,31 @@ $mpds_cifplayer_player $mol_view
 										<= Sym_check*0 $mol_check_box
 											title <= sym_name* \
 											checked? <=> symmetry_visible*? false
+				<= Spread_cells $mol_pick
+					trigger_content /
+						<= spread_cell_label \1×1×1
+					bubble_content /
+						<= Spread_label_a $mol_paragraph
+							title \a
+						<= Spread_a $mol_number
+							value? <=> spread_a?
+							hint \1
+							value_min 1
+							value_max <= spread_limit_a 1
+						<= Spread_label_b $mol_paragraph
+							title \b
+						<= Spread_b $mol_number
+							value? <=> spread_b?
+							hint \1
+							value_min 1
+							value_max <= spread_limit_b 1
+						<= Spread_label_c $mol_paragraph
+							title \c
+						<= Spread_c $mol_number
+							value? <=> spread_c?
+							hint \1
+							value_min 1
+							value_max <= spread_limit_c 1
 				<= Center $mol_check_icon
 					checked? <=> centered? true
 					Icon <= Center_icon $mol_icon_image_filter_center_focus