diff options
| -rw-r--r-- | src/client/views/nodes/ScriptingBox.scss | 56 | ||||
| -rw-r--r-- | src/client/views/nodes/ScriptingBox.tsx | 56 |
2 files changed, 24 insertions, 88 deletions
diff --git a/src/client/views/nodes/ScriptingBox.scss b/src/client/views/nodes/ScriptingBox.scss index 8c91dee6c..ca4c49a7b 100644 --- a/src/client/views/nodes/ScriptingBox.scss +++ b/src/client/views/nodes/ScriptingBox.scss @@ -61,68 +61,12 @@ outline-color: black; } - .scriptingBox-cmdPicker { - margin-left: 3px; - margin-right: 0px; - background: rgb(238, 238, 238); - border: none; - color: grey; - } - .commandEntry-outerDiv { pointer-events: all; background-color: gray; display: flex; flex-direction: row; - - .commandEntry-drop { - color: white; - width: 25px; - margin-top: auto; - margin-bottom: auto; - } - } - - .scriptingBox-collapse { - transition: all .5s, opacity 0.3s; - position: absolute; - width: 40px; - transform-origin: top left; - pointer-events: all; - // margin-top: 10px; } - - .scriptingBox-template, - .scriptingBox-viewModes { - display: grid; - background: rgb(238, 238, 238); - color: grey; - margin-top: auto; - margin-bottom: auto; - margin-left: 5px; - } - - .scriptingBox-viewModes { - margin-left: 25px; - } - - .scriptingBox-viewSpecs { - margin-left: 5px; - display: grid; - - .scriptingBox-filterIcon { - position: relative; - display: flex; - margin: auto; - background: gray; - color: white; - width: 40px; - height: 40px; - align-items: center; - justify-content: center; - } - } - } } diff --git a/src/client/views/nodes/ScriptingBox.tsx b/src/client/views/nodes/ScriptingBox.tsx index 55525ee41..f3c623f78 100644 --- a/src/client/views/nodes/ScriptingBox.tsx +++ b/src/client/views/nodes/ScriptingBox.tsx @@ -207,14 +207,17 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<FieldViewProps, Sc this._paramsValues.splice(this._paramsValues.length - num - 1, 1); } - @undoBatch - viewChanged = (e: React.ChangeEvent) => { + @action + viewChanged = (e: React.ChangeEvent, i: number, name: string) => { + //@ts-ignore + this.props.Document[name] = e.target.selectedOptions[0].value; //@ts-ignore - this.document._viewType = e.target.selectedOptions[0].value; + this._paramsValues[i] = e.target.selectedOptions[0].value; } @action selected = (val: string, index: number, name: string) => { + console.log("selected"); this.stopPropagation; this.props.Document[name] = val; this._paramsValues[index] = val; @@ -475,35 +478,24 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<FieldViewProps, Sc <div className="scriptingBox-paramInputs"> <div className="scriptingBox-viewBase"> - <button className="scriptingBox-collapse" - style={{ - top: this._paramsCollapsed[i] ? 30 : 10, - transform: `rotate(${this._paramsCollapsed[i] ? 180 : 0}deg) scale(0.5) translate(${this._paramsCollapsed[i] ? "-100%, -100%" : "0, 0"})`, - opacity: 0.9, - display: (this._paramsCollapsed[i] && !this.props.isSelected()) ? "none" : undefined, - left: (this._paramsCollapsed[i] ? 0 : "unset"), - }} - onClick={(event) => this.toggleCollapse(i)}> - <FontAwesomeIcon icon="caret-up" size="2x" /> - </button> - <div className="scriptingBox-viewBase" style={{ display: this._paramsCollapsed[i] ? "none" : undefined }}> - <div className="commandEntry-outerDiv" title="select value"> - <select - className="scriptingBox-viewPicker" - onPointerDown={this.stopPropagation} - onChange={this.viewChanged} - value={StrCast(this.props.Document[parameter])}> - {this._paramsTypes[i].split("|").map((type: string, index: number) => - <option - key={Utils.GenerateGuid()} - className="scriptingBox-viewOption" - onPointerDown={(e: React.PointerEvent<HTMLOptionElement>) => this.selected(type, i, parameter)} - value={type.trim()}> - {type.trim()} - </option> - )} - </select> - </div> + <div className="commandEntry-outerDiv"> + <select + className="scriptingBox-viewPicker" + onPointerDown={this.stopPropagation} + onChange={(e: React.ChangeEvent) => this.viewChanged(e, i, parameter)} + value={this._paramsValues[i]}> + + {this._paramsTypes[i].split("|").map((type: string) => + <option + className="scriptingBox-viewOption" + onPointerDown={(e: React.PointerEvent<HTMLOptionElement>) => + this.selected(type, i, parameter)} + value={type.trim()}> + {type.trim()} + </option> + )} + + </select> </div> </div> </div> |