arrow in gutter

.gitignore

@@ -1,4 +1,5 @@
 bindata
+src/js/dist/*
 src/js/node_modules/*
 go_19/*
 src/tags

src/Makefile

@@ -20,7 +20,7 @@ gotty:	asset ${TARGET}/main.go utils/*.go server/*.go webtty/*.go filebrowser/*.
 	#godep go build ${BUILD_OPTIONS}
 
 .PHONY: asset
-asset: bindata/static/js/gotty-bundle.js bindata/static/js/jsconsole.js bindata/static/index.html bindata/static/doc.html bindata/static/about.html bindata/static/NewFile.html bindata/static/images bindata/static/css bindata/static/css/xterm.css bindata/static/meta
+asset: bindata/static/js/gotty-bundle.js bindata/static/index.html bindata/static/doc.html bindata/static/about.html bindata/static/NewFile.html bindata/static/images bindata/static/css bindata/static/css/xterm.css bindata/static/meta
 	$(ROOT)/bin/go-bindata -prefix bindata -pkg server -ignore=\\.gitkeep -o server/asset.go bindata/...
 	GO111MODULE=off $(GOROOT)/bin/gofmt -w server/asset.go
 

src/js/dist/firetty.d.ts

@@ -1,4 +1,5 @@
 import { Terminal } from "./webtty";
+export declare const UID: string;
 export declare const getExampleRef: () => any;
 export declare const firebaseconfig: {
     apiKey: string;
@@ -14,7 +15,12 @@ export declare class FireTTY {
     active: boolean;
     firebasedbref: any;
     dbpath: string;
+    lastrestarted: string;
+    uid: string;
+    private static sharedlastrestarted;
+    private static setngetrestart();
+    private static getrestart();
     constructor(term: Terminal, master: boolean);
-    open(): () => void;
+    open(): (keepdb: boolean) => void;
     dboutput(type: string, data: any): void;
 }

src/js/dist/main.d.ts

@@ -1,4 +1,4 @@
 import { setEventHandler } from "./webtty";
-export declare function ActionOnChange(): void;
+export declare function ActionOnChange(e: any): void;
 declare const launcher: () => void;
 export { setEventHandler, launcher };

src/js/dist/webtty.d.ts

@@ -56,7 +56,7 @@ export interface ConnectionFactory {
     create(): Connection;
 }
 export interface Icallback {
-    (): void;
+    (keepdb: boolean): void;
 }
 export interface WebTTYFactory {
     open(): Icallback;
@@ -73,5 +73,5 @@ export declare class WebTTY {
     iscompiled: boolean;
     constructor(term: Terminal, connectionFactory: ConnectionFactory, ft: WebTTYFactory, payload: Object, args: string, authToken: string);
     dboutput(type: string, data: any): void;
-    open(): () => void;
+    open(): (keepdb: boolean) => void;
 }

src/js/src/firetty.ts

@@ -7,6 +7,9 @@ var getrepl_firebasedbref = () => {
 	return firebase.database().ref("openrepl");
 };
 
+export const UID = Math.random().toString();
+const MIN_SAFE_INTEGER = 1<<31;
+
 export const getExampleRef = () => {
       if(window['dbpath']) {
         return window['dbpath'];
@@ -48,6 +51,20 @@ export class FireTTY {
     active: boolean;
     firebasedbref: any;
     dbpath: string;
+    lastrestarted: string;
+    uid: string;
+    // static property to share accross class
+    private static sharedlastrestarted: string = MIN_SAFE_INTEGER.toString();
+
+    private static setngetrestart(): string {
+        // updates the shared restart timing of all the firetty terminals in this window.
+        this.sharedlastrestarted = Date.now().toString();
+        return this.sharedlastrestarted;
+    }
+
+    private static getrestart(): string {
+        return this.sharedlastrestarted;
+    }
 
     constructor(term: Terminal, master: boolean) {
         this.term = term;
@@ -59,6 +76,8 @@ export class FireTTY {
             window['dbpath']=dbpath;
         }
         this.dbpath = dbpath;
+        this.lastrestarted = FireTTY.getrestart();
+        this.uid = UID;
     };
 
     open() {
@@ -68,11 +87,19 @@ export class FireTTY {
             const optionMenu = document.getElementById("optionMenu");
             if(optionMenu!==null) {
                 const option = (optionMenu.getElementsByClassName("list")[0] as HTMLSelectElement).value;
+                if (!this.master && this.lastrestarted==MIN_SAFE_INTEGER.toString()) {
+                    // slave don't need to update the option in firebase at the start
+                    this.lastrestarted = FireTTY.setngetrestart();
+                    return;
+                }
+                this.lastrestarted = FireTTY.setngetrestart();
                 this.firebasedbref.push ({
                    eventT: "option",
-                   Data: option
+                   Data: option,
+                   last: this.lastrestarted,
+                   uid: this.uid
                 });
-                //console.log("optionhandler: "+option);
+                console.log("optionhandler updated by uid: "+this.uid + " option: " + option + " at " + this.lastrestarted);
             }
         };
 
@@ -86,6 +113,7 @@ export class FireTTY {
 
     	const setupMaster = () => {
             let masterterm = this.term;
+            let thisinst = this;
     		this.firebasedbref.on("child_added", function(data, prevChildKey) {
 				let d = data.val();
                 //console.log("master: ", d.eventT, d.Data);
@@ -108,6 +136,27 @@ export class FireTTY {
                         console.log("optiondebug requested at master.");
                         masterterm.dispatchEvent(new Event("optiondebug"));
                         break;
+                    case "option":
+                        console.log("master caught optionevent:"+d.Data+" event: ", d);
+                        if (d.uid==thisinst.uid) {
+                            console.log("event triggered by me only, skipping..");
+                            return;
+                        }
+                        if (d.last<=thisinst.lastrestarted) {
+                            // = check as i am master
+                            console.log("ignoring previous restarts.");
+                            return;
+                        }
+                        const optionMenu = document.getElementById("optionMenu");
+                        if(optionMenu!==null) {
+                            const SelectOption = (optionMenu.getElementsByClassName("list")[0] as HTMLSelectElement);
+                            if (SelectOption !== null) {   //once
+                                SelectOption.value = d.Data;
+                                let event = new Event('change');
+                                SelectOption.dispatchEvent(event);
+                            }
+                        }
+                        break;
                     default:
                         console.log("unhandled type: ", d.eventT, d.Data);
                         break;
@@ -116,6 +165,7 @@ export class FireTTY {
         };
         const setupSlave = () => {
             let slaveterm = this.term;
+            let thisinst = this;
         	this.firebasedbref.on("child_added", function(data, prevChildKey) {
                 let d = data.val();
                 //console.log("slave: ", d.eventT, d.Data);
@@ -127,14 +177,22 @@ export class FireTTY {
                         slaveterm.output(d.Data);
                         break;
                     case "option":
-                        console.log("slave caught optionevent:"+d.Data)
+                        console.log("slave caught optionevent:"+d.Data+" event: ", d);
+                        if (d.uid==thisinst.uid) {
+                            console.log("event triggered by me only, skipping..");
+                            return;
+                        }
+                        if (d.last<thisinst.lastrestarted) {
+                            console.log("ignoring previous restarts.");
+                            return;
+                        }
                         slaveterm.hardreset();
                         const optionMenu = document.getElementById("optionMenu");
                         if(optionMenu!==null) {
                             const SelectOption = (optionMenu.getElementsByClassName("list")[0] as HTMLSelectElement);
                             if (SelectOption !== null && SelectOption.value !== d.Data) {   //once
                                 SelectOption.value = d.Data;
-                                var event = new Event('change');
+                                let event = new Event('change');
                                 SelectOption.dispatchEvent(event);
                             }
                         }
@@ -173,6 +231,7 @@ export class FireTTY {
 
         if (!this.master) {			//Slave
         	enablehandler();
+            optionhandler();
         	setupSlave();
         } else {					// Master
             this.firebasedbref.set ({
@@ -186,14 +245,14 @@ export class FireTTY {
             setupMaster();
         }
 
-    	return () => {
+    	return (keepdb: boolean) => {
             console.log("closing connection in Firebase");
             this.active = false;
             this.firebasedbref.off(); // detach all callback
             this.term.removeEventListener("optionrun", optionrunhandler);
             this.term.reset();
             this.term.deactivate()
-            if (this.master) {
+            if (!keepdb && this.master) {
                 this.firebasedbref.remove();    // remove database upon closure of master
             }
         }

src/js/src/main.ts

@@ -96,7 +96,13 @@ if(optionMenu!==null) {
     }
 }
 
-export function ActionOnChange() {
+export function ActionOnChange(e: any) {
+    let isSilent = e.detail && e.detail.silent;
+    if (isSilent) {
+        // its a silent event
+        console.log("its a silent event, return...");
+        return;
+    }
     // body...
     const elem = document.getElementById("terminal");
     if (elem !== null) {
@@ -193,9 +199,10 @@ if (elem !== null) {
 		console.log("webtty created: ");
     }
 
-    window.addEventListener("unload", () => {
-        console.log("closing connection")
-        closer();
+    window.addEventListener("unload", (e: any) => {
+        let keepdb = (e.detail && e.detail.keepdb) || false;
+        console.log("closing connection: keepdb: ", keepdb)
+        closer(keepdb);
         term.close();
     });
 
@@ -207,10 +214,13 @@ if (elem !== null) {
         elem.dispatchEvent(event);
     });
 
+    const customunloadevent = new CustomEvent('unload', {
+                          detail: { keepdb: true }
+                        });
     elem.addEventListener("optionchange", () => {
         console.log("event caught: change");
-        var event = new Event('unload');
-        window.dispatchEvent(event);
+
+        window.dispatchEvent(customunloadevent);
         setTimeout(function(){                // timeout between two events
             //var term: Terminal;
             const option = getSelectValue();
@@ -261,8 +271,7 @@ if (elem !== null) {
     elem.addEventListener("optionrun", (e) => {
         console.log("event caught: optionrun");
         if(master) {
-            var event = new Event('unload');
-            window.dispatchEvent(event);    
+            window.dispatchEvent(customunloadevent);    
         } else {
                 //wait till optionrun is dispatched to master
                 setTimeout(function(){

src/js/src/webtty.ts

@@ -97,7 +97,7 @@ export interface ConnectionFactory {
 }
 
 export interface Icallback {
-    (): void;
+    (keepdb: boolean): void;
 }
 
 export interface WebTTYFactory {
@@ -294,13 +294,13 @@ Please close/disconnect the old Terminals to proceed or try after "+sessionCooki
         }
 
         setup();
-        return () => {
+        return (keepdb: boolean) => {
             console.log("closing connection in webtty")
 	        sessionCookieObj.DecrementSessionCount();
             clearTimeout(reconnectTimeout);
             connection.close();
             this.term.removeEventListener('slaveinputEvent', slaveInputhandler);
-            firecloser();
+            firecloser(keepdb);
         }
     };
 };

src/resources/css/scribbler-global.css

@@ -21,6 +21,8 @@
   --code-error-color: #cb4b15;
   --code-data-type-color: #008000;
   --terminal-bg-color: black;
+  --gutter-rotate: 90deg; /* Initial rotation angle */
+  --gutter-right: 3px;
 }
 
 /* normalized */

src/resources/css/scribbler-landing.css

@@ -677,6 +677,34 @@ display: block;
     float: left;
     cursor: ew-resize;
 }
+/* Add arrow indicator to the gutter */
+.gutter::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 4px; /* Adjust image width */
+    height: 4px; /* Adjust image height */
+    cursor: ew-resize; /* Change cursor to indicate draggable */
+    z-index: 1; /* Ensure the image is above the content */
+    right: var(--gutter-right);
+}
+
+/* Optionally, adjust the horizontal gutter arrow */
+.gutter.gutter-horizontal::after {
+    /* Additional styles for horizontal gutters */
+    border-top: none; /* Remove the top border */
+    border-bottom: 10px solid var(--accent-color-light); /* Add bottom border for horizontal arrow */
+    border-left: 5px solid transparent; /* Adjust the size of the arrow */
+    border-right: 5px solid transparent; /* Adjust the size of the arrow */
+    cursor: ew-resize; /* Change cursor to indicate draggable */
+    transform: translateY(-50%) rotate(var(--gutter-rotate)); /* Rotate the arrow for horizontal gutters */
+    opacity: 0.2;
+}
+
+.gutter.gutter-horizontal:hover::after {
+  opacity: 0.8;
+}
 
 /* On screens that are 800px wide or less, make the columns stack on top of each other instead of next to each other */
 @media screen and (max-width: 800px) {