6502/8bitworkshop
1
0
Fork 0
mirror of https://github.com/sehugg/8bitworkshop.git synced 2024-06-20 23:29:45 +00:00
Code Issues Projects Releases Wiki Activity

scripting: dropdown mode for ui.select

Browse Source
This commit is contained in:
Steven Hugg 2021-08-30 12:05:26 -05:00
parent 5542555193
commit 1d66f77f9a
1 changed files with 68 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

96
src/common/script/ui/notebook.ts
View File

@ -166,8 +166,7 @@ class ObjectKeyValueComponent extends Component<ObjectTreeComponentProps, Object
render(virtualDom, containerNode, replaceNode) { render(virtualDom, containerNode, replaceNode) {
let expandable = typeof this.props.object === 'object'; let expandable = typeof this.props.object === 'object';
let hdrclass = ''; let hdrclass = '';
if (expandable) if (expandable) hdrclass = this.state.expanded ? 'tree-expanded' : 'tree-collapsed'
hdrclass = this.state.expanded ? 'tree-expanded' : 'tree-collapsed'
let propName = this.props.name || null; let propName = this.props.name || null;
return h('div', { return h('div', {
class: 'tree-content', class: 'tree-content',
@ -250,6 +249,18 @@ function objectToChildren(object: any) : any[] {
} }
} }
function objectToChild(object: any, index: number) : any {
if (color.isPalette(object)) {
return color.from(object.colors[index]);
} else if (isArray(object)) {
return object[index];
} else if (object != null) {
return object
} else {
return null
}
}
function objectToDiv(object: any, name: string, objpath: string): VNode<any> { function objectToDiv(object: any, name: string, objpath: string): VNode<any> {
// don't view any keys that start with "$" // don't view any keys that start with "$"
if (name && name.startsWith("$")) { if (name && name.startsWith("$")) {
@ -324,6 +335,7 @@ function objectToContentsDiv(object: {} | [], objpath: string) {
interface UIComponentProps { interface UIComponentProps {
iokey: string; iokey: string;
uiobject: scriptui.ScriptUIType; uiobject: scriptui.ScriptUIType;
dropdown?: boolean;
} }
class UISliderComponent extends Component<UIComponentProps> { class UISliderComponent extends Component<UIComponentProps> {
@ -347,38 +359,66 @@ class UISliderComponent extends Component<UIComponentProps> {
} }
} }
class UISelectComponent extends Component<UIComponentProps> { class UISelectComponent extends Component<UIComponentProps, ObjectTreeComponentState> {
ref = createRef(); ref = createRef();
render(virtualDom, containerNode, replaceNode) { render(virtualDom, containerNode, replaceNode) {
let select = this.props.uiobject as scriptui.ScriptUISelectType<any>; let select = this.props.uiobject as scriptui.ScriptUISelectType<any>;
let children = objectToChildren(select.options); let children = objectToChildren(select.options);
return h('div', { this.props.dropdown = children.length > 16;
class: 'scripting-select scripting-flex', let showselections = !this.props.dropdown || this.state.expanded;
ref: this.ref, let seldiv = null;
onClick: (e) => { if (showselections) {
// select object -- iterate parents until we find select div, then find index of child seldiv = h('div', {
let target = e.target as HTMLElement; class: 'scripting-select scripting-flex',
while (target.parentElement && target.parentElement != this.ref.current) { ref: this.ref,
target = target.parentElement; onClick: (e) => {
} // select object -- iterate parents until we find select div, then find index of child
if (target.parentElement) { let target = e.target as HTMLElement;
const selindex = Array.from(target.parentElement.children).indexOf(target); while (target.parentElement && target.parentElement != this.ref.current) {
if (selindex >= 0 && selindex < children.length) { target = target.parentElement;
let newUIValue = { value: children[selindex], index: selindex }; }
this.setState(this.state); if (target.parentElement) {
current_project.updateDataItems([{key: this.props.iokey, value: newUIValue}]); const selindex = Array.from(target.parentElement.children).indexOf(target);
} else { if (selindex >= 0 && selindex < children.length) {
throw new Error(`Could not find click target of ${this.props.iokey}`); let newUIValue = { value: children[selindex], index: selindex };
this.setState({ expanded: false });
current_project.updateDataItems([{key: this.props.iokey, value: newUIValue}]);
} else {
throw new Error(`Could not find click target of ${this.props.iokey}`);
}
} }
} }
} },
}, children.map((child, index) => {
children.map((child, index) => { let div = objectToDiv(child, null, `${this.props.iokey}__select_${index}`);
let div = objectToDiv(child, null, `${this.props.iokey}__select_${index}`); let selected = (index == select.index);
let selected = (index == select.index); return h('div', { class: selected ? 'scripting-selected' : '' }, [ div ]);
return h('div', { class: selected ? 'scripting-selected' : '' }, [ div ]); }));
})) }
// TODO: show current selection if (this.props.dropdown) {
let selectedDiv = objectToDiv(objectToChild(select.options, select.index), null, `${this.props.iokey}__selected`);
return h('div', {
class: 'tree-content',
key: `${this.props.iokey}__tree`
}, [
h('div', {
class: 'tree-header ' + (this.state.expanded ? 'tree-expanded' : 'tree-collapsed'),
onClick: () => this.toggleExpand()
}, [
this.props.iokey,
h('span', { class: 'tree-value scripting-item' }, [
selectedDiv,
//getShortName(select.options)
])
]),
seldiv
]);
} else {
return seldiv;
}
}
toggleExpand() {
this.setState({ expanded: !this.state.expanded });
} }
} }