fixed drop down UI, storage

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>