Merge pull request #12 from stan-donarise/refactor

new features and refactoring

prop/prop.view.css.ts

@@ -3,6 +3,7 @@ namespace $.$$ {
 	const { px, rem, per } = $mol_style_unit
 
 	$mol_style_define( $hyoo_studio_prop, {
+
 		flex: {
 			grow: 1,
 		},
@@ -17,26 +18,17 @@ namespace $.$$ {
 			flex: {
 				grow: 1,
 			},
-		},
-
-		Type: {
-			Trigger: {
-				color: $mol_theme.special,
-			},
-		},
-
-		Over_props: {
-			gap: $mol_gap.space,
-			flex: {
-				grow: 1,
-			},
 			padding: {
-				left: $mol_gap.block,
+				bottom: $mol_gap.space,
+				left: $mol_gap.space,
+			},
+			Bound: {
+				Self: {
+					padding: {
+						left: $mol_gap.block,
+					},
+				},
 			},
-		},
-
-		Over_add: {
-			marginLeft: 'auto',
 		},
 
 		Object: {
@@ -49,15 +41,6 @@ namespace $.$$ {
 			},
 		},
 
-		Label: {
-			background: {
-				color: $mol_theme.card,
-			},
-			border: {
-				radius: $mol_gap.round,
-			},
-		},
-
 		Label_content: {
 			flex: {
 				wrap: 'wrap',
@@ -71,12 +54,17 @@ namespace $.$$ {
 			},
 		},
 
-		Prop_tools: {
-			marginLeft: 'auto',
+		Expander_title: {
+			color: $mol_theme.control,
 		},
 
-		Key: {
-			marginLeft: 'auto',
+		Prop_tools: {
+			flex: {
+				shrink: 1,
+			},
+			margin: {
+				left: 'auto',
+			},
 		},
 
 	} )

prop/prop.view.tree

@@ -8,17 +8,19 @@ $hyoo_studio_prop $mol_view
 					<= Label_content $mol_view
 						sub <= label_sub /
 							<= Trigger $mol_check_expand
-								checked?val <=> expanded?val false
+								Icon => Trigger_icon
+								sub <= trigger_sub /
+									<= Expander_title $mol_paragraph
+										title <= name \
+									<= Trigger_icon
+								checked? <=> expanded? false
 								expandable <= expandable true
-								label /
-									<= expander_title <= name \
 							<= Prop_tools
-			expanded? <=> expanded? false
-			Tools <= Prop_tools $mol_view 
+			expanded? <=> expanded?
+			Tools <= Prop_tools $mol_view
 				sub <= prop_tools /
-					<= Type $hyoo_studio_prop_type
-						tree? <=> value?
-						type? => type?
+					<= Value_tools $mol_view
+						sub <= value_tools
 					<= Key $mol_check_icon
 						hint @ \Multiple values by key
 						Icon <= Key_icon $mol_icon_key_change
@@ -28,37 +30,12 @@ $hyoo_studio_prop $mol_view
 						Icon <= Next_icon $mol_icon_atom_variant
 						checked? <=> changeable? false
 			content <= prop_content /
-				<= Object $mol_view 
-					sub /
-						<= Object_head $mol_view
-							sub <= object_head /
-								<= Obj $mol_select
-									hint @ \Class
-									align_hor \right
-									value?next <=> obj?next \$mol_view
-									options <= class_list /string
-									Trigger_icon null
-								<= Over_add $mol_select
-									hint @ \Add Override
-									align_hor \left
-									Trigger_icon <= Over_add_icon $mol_icon_wrench_outline
-									value?next <=> over_add?next \
-									options <= over_prop_options /string
-						<= Inner $mol_view sub <= inner /
-							<= Over_props $mol_list
-								sub <= overs /
 				<= Value $hyoo_studio_value
-					Type null
+					hide_tools true
+					value_tools => value_tools
+					belong_to \prop
 					tree? <=> value? $mol_tree2_empty
-					type? <= type?
-					props_of!klass <= props_of!klass $mol_tree2_empty
+					props_of* <= props_of* $mol_tree2_empty
 					props_bindable <= props_bindable $mol_tree2_empty
-					Bound_prop* <= Bound_prop*
-	Over_prop* $hyoo_studio_value
-		parent_type \object
-		tree? <=> over_value*? $mol_tree2_empty
-		name? <= over_prop_name*? \
-		props_of!klass <= props_of!klass $mol_tree2_empty
-		props_bindable <= props_bindable $mol_tree2_empty
-		class_list <= class_list /string
-		Bound_prop* <= Bound_prop* $hyoo_studio_prop
+					class_list <= class_list /string
+					Bound_prop* <= Bound_prop* $hyoo_studio_prop

prop/prop.view.ts

@@ -13,7 +13,6 @@ namespace $.$$ {
 
 			if( next !== undefined ) {
 				const new_sign = $mol_view_tree2_prop_signature.generate( { ...sign_obj, key: next ? '*' : '' } )!
-				console.log( new_sign )
 				this.sign( new_sign )
 				return next
 			}
@@ -23,97 +22,99 @@ namespace $.$$ {
 
 		@ $mol_mem
 		changeable( next?: any ): boolean {
+
 			const sign_obj = [ ...this.sign().matchAll( $mol_view_tree2_prop_signature ) ][ 0 ]?.groups ?? {
 				name: '',
 				key: '',
 				next: '',
 			}
+
 			if( next !== undefined ) {
 				const new_sign = $mol_view_tree2_prop_signature.generate( { ...sign_obj, next: next ? '?' : '' } )!
 				this.sign( new_sign )
 				return next
 			}
+
 			return Boolean( sign_obj.next )
 		}
 
 		prop_content() {
-			return this.type() == 'object' ? [ this.Object() ] : [ this.Value() ]
-		}
-
-		@ $mol_mem
-		value( next?: $mol_tree2 ) {
-			let val = this.tree()
-			if( next !== undefined ) {
-				val = this.tree( next && val.clone( [ next ] ) )
-				return next
+			switch (this.Value().type()) {
+				case 'object':
+				case 'text':
+				case 'number':
+				case 'list':
+				case 'dict':
+				case 'bind':
+				case 'get':
+				case 'put': 
+					return [ this.Value() ]
+				default: 
+					return []
 			}
-
-			return val?.kids[ 0 ]
-		}
-
-		@ $mol_mem
-		prop_name_list() {
-			return this.props_bindable().kids.map( prop => prop.type )
 		}
 
 		@ $mol_mem
-		obj( next?: string ) {
-			return this.value(
-				next === undefined
-					? undefined
-					: this.value().struct( next )
-			).type
+		expandable() {
+			switch (this.Value().type()) {
+				case 'object':
+				case 'text':
+				case 'number':
+				case 'list':
+				case 'dict': 
+				case 'bind':
+				case 'get':
+				case 'put': 
+					return true
+				default: 
+					return false
+			}
 		}
 
 		@ $mol_mem
-		overs() {
-			return this.value().kids.map( ( _, i ) => this.Over_prop( i ) )
-		}
-
-		@ $mol_mem
-		over_prop_options() {
-			return this.props_of( this.obj() ).kids.map( prop => prop.type )
-		}
-
-		@ $mol_mem_key
-		over_prop_name( index: number, next?: string ) {
-			let val = this.value()
-			if( next !== undefined ) {
-				val = this.value(
-					val.insert( val.struct( next, val.kids[ index ].kids ), index )
-				)
+		expanded(next?: boolean): boolean {
+
+			if ( next !== undefined ) return next as never
+
+			let expanded: boolean | undefined = $mol_wire_probe( () => this.expanded() )
+
+			const type = this.Value().type()
+
+			if ( !expanded ) {
+				switch (type) {
+					case 'object': 
+					case 'list': 
+					case 'dict': 
+						return this.value().kids.length > 0 ? false : true
+					case 'text': 
+						return this.value().text().length > 40 ? false : true
+					case 'null' :
+					case 'boolean_true' :
+					case 'boolean_false' :
+					case 'number' :
+					case 'number_nan' :
+					case 'number_infinity_negative' :
+					case 'number_infinity_positive' :
+						return true
+				}
+				return false
 			}
-			return val.kids[ index ].type
-		}
-
-		over_add( next: string ) {
-
-			if( !next ) return ''
-
-			const tree = this.value()
-
-			this.value(
-				tree.clone( [
-					...tree.kids,
-					tree.struct( next, [
-						tree.struct( 'null' ),
-					] ),
-				] )
-			)
-
-			return next
+
+			return expanded
 		}
 
-		@ $mol_mem_key
-		over_value( index: number, next?: $mol_tree2 ) {
-			let val = this.value()
+		@ $mol_mem
+		value( next?: $mol_tree2 ) {
+
+			let val = this.tree()
+
 			if( next !== undefined ) {
-				val = this.value(
-					val.insert( next && val.kids[ index ].clone( [ next ] ), index )
-				)
+				val = this.tree( next && val.clone( [ next ] ) )
+				this.expanded( true )
+				return next
 			}
-			return val.kids[ index ]?.kids[ 0 ]
+
+			return val?.kids[ 0 ]
 		}
-
 	}
 }