4 files changed, 49 insertions, 13 deletions

diff --git a/src/.DS_Store b/src/.DS_Store
index 5b35884bd..942a5672b 100644
--- a/src/.DS_Store
+++ b/src/.DS_Store
diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index e3cc8ccfe..237951a2c 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -652,6 +652,11 @@ export namespace Docs {
         }
 
         export function ButtonDocument(options?: DocumentOptions) {
+            // const btn = InstanceFromProto(Prototypes.get(DocumentType.BUTTON), undefined, { ...(options || {}), "onClick-rawScript": "-script-" });
+            // btn.layoutKey = "layout_onClick";
+            // btn.height = 250;
+            // btn.width = 200;
+            // btn.layout_onClick = ScriptingBox.LayoutString("onClick");
             return InstanceFromProto(Prototypes.get(DocumentType.BUTTON), undefined, { ...(options || {}), "onClick-rawScript": "-script-" });
         }
 
diff --git a/src/client/views/nodes/ScriptingBox.scss b/src/client/views/nodes/ScriptingBox.scss
index 43695f00d..25fbd3f35 100644
--- a/src/client/views/nodes/ScriptingBox.scss
+++ b/src/client/views/nodes/ScriptingBox.scss
@@ -5,31 +5,38 @@
     flex-direction: column;
     background-color: rgb(241, 239, 235);
     padding: 10px;
+
     .scriptingBox-inputDiv {
         display: flex;
         flex-direction: column;
         height: calc(100% - 30px);
+
+
         .scriptingBox-errorMessage {
             overflow: auto;
         }
+
         .scripting-params {
             background: "beige";
         }
-        .scriptingBox-textArea {
-            width: 100%;
-            height: 100%;
-            box-sizing: border-box;
-            resize: none;
-            padding: 7px;
-        }
+
+            .scriptingBox-textArea {
+                width: 100%;
+                height: 100%;
+                box-sizing: border-box;
+                resize: none;
+                padding: 7px;
+            }
     }
 
     .scriptingBox-toolbar {
         width: 100%;
         height: 30px;
+
         .scriptingBox-button {
-            width: 50%
+            width: 50%;
+            resize: auto;
+
         }
     }
-}
-
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/ScriptingBox.tsx b/src/client/views/nodes/ScriptingBox.tsx
index c607d6614..a5d55018b 100644
--- a/src/client/views/nodes/ScriptingBox.tsx
+++ b/src/client/views/nodes/ScriptingBox.tsx
@@ -41,6 +41,15 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<FieldViewProps, Sc
     componentWillUnmount() { this._overlayDisposer?.(); }
 
     @action
+    onFinish = () => {
+        const result = CompileScript(this.rawScript, {});
+        this.rootDoc.layoutKey = "layout";
+        this.rootDoc.height = 50;
+        this.rootDoc.width = 100;
+        this.props.Document.documentText = this.rawScript;
+    }
+
+    @action
     onCompile = () => {
         const params = this.compileParams.reduce((o: ScriptParam, p: string) => { o[p] = "any"; return o; }, {} as ScriptParam);
         const result = CompileScript(this.rawScript, {
@@ -75,24 +84,39 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<FieldViewProps, Sc
         />;
         return (
             <div className="scriptingBox-outerDiv"
+
                 onWheel={e => this.props.isSelected(true) && e.stopPropagation()}>
+
                 <div className="scriptingBox-inputDiv"
                     onPointerDown={e => this.props.isSelected(true) && e.stopPropagation()} >
+
                     <textarea className="scriptingBox-textarea"
                         placeholder="write your script here"
                         onChange={e => this.rawScript = e.target.value}
                         value={this.rawScript}
                         onFocus={this.onFocus}
-                        onBlur={e => this._overlayDisposer?.()} />
+                        onBlur={e => this._overlayDisposer?.()}
+                        style={{ width: this.compileParams.length > 0 ? "70%" : "100%" }} />
+
+                    {this.compileParams.length > 0 ? <div className="split right" style={{ width: "30%" }}>
+                        parameters go here
+                            </div> : null}
+
                     <div className="scriptingBox-errorMessage" style={{ background: this._errorMessage ? "red" : "" }}>{this._errorMessage}</div>
                     <div className="scriptingBox-params" >{params}</div>
                 </div>
                 {this.rootDoc.layout === "layout" ? <div></div> : (null)}
                 <div className="scriptingBox-toolbar">
-                    <button className="scriptingBox-button" onPointerDown={e => { this.onCompile(); e.stopPropagation(); }}>Compile</button>
-                    <button className="scriptingBox-button" onPointerDown={e => { this.onRun(); e.stopPropagation(); }}>Run</button>
+                    <button className="scriptingBox-button" style={{ width: this.rootDoc.layoutKey === "layout_onClick" ? "33%" : "50%" }}
+                        onPointerDown={e => { this.onCompile(); e.stopPropagation(); }}>Compile</button>
+                    <button className="scriptingBox-button" style={{ width: this.rootDoc.layoutKey === "layout_onClick" ? "33%" : "50%" }}
+                        onPointerDown={e => { this.onRun(); e.stopPropagation(); }}>Run</button>
+                    {this.rootDoc.layoutKey === "layout_onClick" ? <button className="scriptingBox-button"
+                        style={{ width: this.rootDoc.layoutKey === "layout_onClick" ? "33%" : "50%" }}
+                        onPointerDown={e => { this.onFinish(); e.stopPropagation(); }}>Finish</button> : null}
                 </div>
             </div>
         );
     }
+
 }