Add full window mode for plots (#709)

ManuelHentschel · web-flow · commit c126649cb060 · 2021-07-19T22:47:54.000+08:00
* Add full window mode for plots

* Add default full window config entry
diff --git a/html/httpgd/index.js b/html/httpgd/index.js
@@ -21,9 +21,14 @@ function getSmallPlots() {
     return smallPlots;
 }
 let isHandlerDragging = false;
+let isFullWindow = false;
 function postResizeMessage(userTriggered = false) {
-    const newHeight = largePlotDiv.clientHeight;
-    const newWidth = largePlotDiv.clientWidth;
+    let newHeight = largePlotDiv.clientHeight;
+    let newWidth = largePlotDiv.clientWidth;
+    if (isFullWindow) {
+        newHeight = window.innerHeight;
+        newWidth = window.innerWidth;
+    }
     if (userTriggered || newHeight !== oldHeight || newWidth !== oldWidth) {
         const msg = {
             message: 'resize',
@@ -66,6 +71,9 @@ window.addEventListener('message', (ev) => {
     else if (msg.message === 'togglePreviewPlotLayout') {
         togglePreviewPlotLayout(msg.style);
     }
+    else if (msg.message === 'toggleFullWindow') {
+        toggleFullWindowMode(msg.useFullWindow);
+    }
 });
 function addPlot(html) {
     const wrapper = document.createElement('div');
@@ -124,6 +132,17 @@ function togglePreviewPlotLayout(newStyle) {
     smallPlotDiv.classList.remove('multirow', 'scroll', 'hidden');
     smallPlotDiv.classList.add(newStyle);
 }
+function toggleFullWindowMode(useFullWindow) {
+    isFullWindow = useFullWindow;
+    if (useFullWindow) {
+        document.body.classList.add('fullWindow');
+        window.scrollTo(0, 0);
+    }
+    else {
+        document.body.classList.remove('fullWindow');
+    }
+    postResizeMessage(true);
+}
 ////
 // On window load
 ////
@@ -136,15 +155,15 @@ window.onload = () => {
 ////
 document.addEventListener('mousedown', (e) => {
     // If mousedown event is fired from .handler, toggle flag to true
-    if (e.target === handler) {
+    if (!isFullWindow && e.target === handler) {
         isHandlerDragging = true;
         handler.classList.add('dragging');
         document.body.style.cursor = 'ns-resize';
     }
 });
 document.addEventListener('mousemove', (e) => {
     // Don't do anything if dragging flag is false
-    if (!isHandlerDragging) {
+    if (isFullWindow || !isHandlerDragging) {
         return false;
     }
     // postLogMessage('mousemove');
diff --git a/html/httpgd/index.ts b/html/httpgd/index.ts
@@ -44,10 +44,15 @@ function getSmallPlots(): HTMLAnchorElement[] {
 let isHandlerDragging = false;
 
 
+let isFullWindow = false;
 
 function postResizeMessage(userTriggered: boolean = false){
-  const newHeight = largePlotDiv.clientHeight;
-  const newWidth = largePlotDiv.clientWidth;
+  let newHeight = largePlotDiv.clientHeight;
+  let newWidth = largePlotDiv.clientWidth;
+  if(isFullWindow){
+    newHeight = window.innerHeight;
+    newWidth = window.innerWidth;
+  }
   if(userTriggered || newHeight !== oldHeight || newWidth !== oldWidth){
     const msg: ResizeMessage = {
       message: 'resize',
@@ -86,6 +91,8 @@ window.addEventListener('message', (ev: MessageEvent<InMessage>) => {
     addPlot(msg.html);
   } else if(msg.message === 'togglePreviewPlotLayout'){
     togglePreviewPlotLayout(msg.style);
+  } else if(msg.message === 'toggleFullWindow'){
+    toggleFullWindowMode(msg.useFullWindow);
   }
 });
 
@@ -165,6 +172,16 @@ function togglePreviewPlotLayout(newStyle: PreviewPlotLayout): void {
   smallPlotDiv.classList.add(newStyle);
 }
 
+function toggleFullWindowMode(useFullWindow): void {
+  isFullWindow = useFullWindow;
+  if(useFullWindow){
+    document.body.classList.add('fullWindow');
+    window.scrollTo(0, 0);
+  } else {
+    document.body.classList.remove('fullWindow');
+  }
+  postResizeMessage(true);
+}
 
 ////
 // On window load
@@ -183,7 +200,7 @@ window.onload = () => {
 
 document.addEventListener('mousedown', (e) => {
   // If mousedown event is fired from .handler, toggle flag to true
-  if (e.target === handler) {
+  if (!isFullWindow && e.target === handler) {
     isHandlerDragging = true;
     handler.classList.add('dragging');
     document.body.style.cursor = 'ns-resize';
@@ -192,7 +209,7 @@ document.addEventListener('mousedown', (e) => {
 
 document.addEventListener('mousemove', (e) => {
   // Don't do anything if dragging flag is false
-  if (!isHandlerDragging) {
+  if (isFullWindow || !isHandlerDragging) {
     return false;
   }
   
diff --git a/html/httpgd/style.css b/html/httpgd/style.css
@@ -12,6 +12,10 @@ body {
     padding-left: 1px;
     padding-right: 1px;
 } 
+body.fullWindow {
+    overflow-x: hidden;
+    overflow-y: hidden;
+}
 
 svg {
     user-select: none;
@@ -29,6 +33,13 @@ svg {
     overflow-x: auto;
     overflow-y: hidden;
     padding: 10px;
+    width: 100%;
+    height: 100%;
+}
+body.fullWindow #largePlot {
+    overflow-x: hidden;
+    width: 100vw !important;
+    height: 100vh !important;
 }
 
 /* Dragbar to resize main plot: */
@@ -42,10 +53,16 @@ svg {
     transition: background-color .1s ease-out;
     transition-delay: .2s;
 }
+body.fullWindow #handler {
+    display: none;
+}
 
 #placeholder {
     height: 95vh;
 }
+body.fullWindow #placeHolder {
+    display: none;
+}
 
 /* Plot history: */
 
@@ -58,6 +75,9 @@ svg {
     overflow-y: hidden;
     padding: 10px;
 }
+body.fullWindow #smallPlots {
+    display: none;
+}
 
 #smallPlots.multirow {
     overflow-x: hidden;
diff --git a/html/httpgd/webviewMessages.d.ts b/html/httpgd/webviewMessages.d.ts
@@ -41,6 +41,11 @@ interface ToggleStyleMessage extends IMessage {
   useOverwrites: boolean
 }
 
+interface ToggleFullWindowMessage extends IMessage {
+  message: 'toggleFullWindow',
+  useFullWindow: boolean
+}
+
 type PreviewPlotLayout = 'multirow' | 'scroll' | 'hidden';
 interface PreviewPlotLayoutMessage extends IMessage {
   message: 'togglePreviewPlotLayout',
@@ -57,5 +62,5 @@ interface AddPlotMessage extends IMessage {
   html: string
 }
 
-type InMessage = UpdatePlotMessage | FocusPlotMessage | ToggleStyleMessage | HidePlotMessage | AddPlotMessage | PreviewPlotLayoutMessage;
+type InMessage = UpdatePlotMessage | FocusPlotMessage | ToggleStyleMessage | HidePlotMessage | AddPlotMessage | PreviewPlotLayoutMessage | ToggleFullWindowMessage;
 
diff --git a/package.json b/package.json
@@ -691,6 +691,12 @@
         "command": "r.plot.toggleStyle",
         "icon": "$(symbol-color)"
       },
+      {
+        "title": "Toggle Full Window Mode",
+        "category": "R Plot",
+        "command": "r.plot.toggleFullWindow",
+        "icon": "$(screen-full)"
+      },
       {
         "title": "Toggle Preview Plot Layout",
         "category": "R Plot",
@@ -937,6 +943,11 @@
           "when": "resourceScheme =~ /webview/ && r.plot.active",
           "command": "r.plot.toggleStyle"
         },
+        {
+          "group": "navigation",
+          "when": "resourceScheme =~ /webview/ && r.plot.active",
+          "command": "r.plot.toggleFullWindow"
+        },
         {
           "group": "httpgd",
           "when": "resourceScheme =~ /webview/ && r.plot.active",
@@ -1348,6 +1359,11 @@
           ],
           "markdownDescription": "How to display plot previews if more than one row required."
         },
+        "r.plot.defaults.fullWindowMode": {
+          "type": "boolean",
+          "default": false,
+          "markdownDescription": "Whether to use full window mode when launching the plot viewer."
+        },
         "r.plot.timing.resizeInterval": {
           "type": "number",
           "default": 100,
diff --git a/src/plotViewer/httpgdTypes.d.ts b/src/plotViewer/httpgdTypes.d.ts
@@ -86,6 +86,7 @@ export interface HttpgdViewerOptions {
     viewColumn?: vscode.ViewColumn;
     htmlRoot: string;
     stripStyles?: boolean;
+    fullWindow?: boolean;
     previewPlotLayout?: PreviewPlotLayout,
     resizeTimeoutLength?: number;
     refreshTimeoutLength?: number;
diff --git a/src/plotViewer/index.ts b/src/plotViewer/index.ts
@@ -12,7 +12,7 @@ import { config, setContext } from '../util';
 
 import { extensionContext } from '../extension';
 
-import { FocusPlotMessage, InMessage, OutMessage, ToggleStyleMessage, UpdatePlotMessage, HidePlotMessage, AddPlotMessage, PreviewPlotLayout, PreviewPlotLayoutMessage } from './webviewMessages';
+import { FocusPlotMessage, InMessage, OutMessage, ToggleStyleMessage, UpdatePlotMessage, HidePlotMessage, AddPlotMessage, PreviewPlotLayout, PreviewPlotLayoutMessage, ToggleFullWindowMessage } from './webviewMessages';
 
 import { isHost, rHostService, shareBrowser } from '../liveshare';
 
@@ -22,6 +22,7 @@ const commands = [
     'openExternal',
     'showIndex',
     'toggleStyle',
+    'toggleFullWindow',
     'togglePreviewPlots',
     'exportPlot',
     'nextPlot',
@@ -83,6 +84,7 @@ export class HttpgdManager {
             this.viewerOptions.previewPlotLayout = conf.get<PreviewPlotLayout>('plot.defaults.plotPreviewLayout', 'multirow');
             this.viewerOptions.refreshTimeoutLength = conf.get('plot.timing.refreshInterval', 10);
             this.viewerOptions.resizeTimeoutLength = conf.get('plot.timing.resizeInterval', 100);
+            this.viewerOptions.fullWindow = conf.get('plot.defaults.fullWindowMode', false);
             this.viewerOptions.token = token;
             const viewer = new HttpgdViewer(host, this.viewerOptions);
             this.viewers.unshift(viewer);
@@ -171,16 +173,16 @@ export class HttpgdManager {
                 void viewer.focusPlot(stringArg);
                 break;
             } case 'nextPlot': {
-                viewer.nextPlot(boolArg);
+                void viewer.nextPlot(boolArg);
                 break;
             } case 'prevPlot': {
-                viewer.prevPlot(boolArg);
+                void viewer.prevPlot(boolArg);
                 break;
             } case 'lastPlot': {
-                viewer.nextPlot(true);
+                void viewer.nextPlot(true);
                 break;
             } case 'firstPlot': {
-                viewer.prevPlot(true);
+                void viewer.prevPlot(true);
                 break;
             } case 'resetPlots': {
                 viewer.resetPlots();
@@ -209,6 +211,9 @@ export class HttpgdManager {
             } case 'openExternal': {
                 void viewer.openExternal();
                 break;
+            } case 'toggleFullWindow': {
+                void viewer.toggleFullWindow();
+                break;
             } default: {
                 break;
             }
@@ -267,6 +272,9 @@ export class HttpgdViewer implements IHttpgdViewer {
 
     readonly defaultPreviewPlotLayout: PreviewPlotLayout = 'multirow';
     previewPlotLayout: PreviewPlotLayout;
+    
+    readonly defaultFullWindow: boolean = false;
+    fullWindow: boolean;
 
     // Custom file to be used instead of `styleOverwrites.css`
     customOverwriteCssPath?: string;
@@ -360,6 +368,8 @@ export class HttpgdViewer implements IHttpgdViewer {
         this.stripStyles = this.defaultStripStyles;
         this.defaultPreviewPlotLayout = options.previewPlotLayout ?? this.defaultPreviewPlotLayout;
         this.previewPlotLayout = this.defaultPreviewPlotLayout;
+        this.defaultFullWindow = options.fullWindow ?? this.defaultFullWindow;
+        this.fullWindow = this.defaultFullWindow;
         this.resizeTimeoutLength = options.refreshTimeoutLength ?? this.resizeTimeoutLength;
         this.refreshTimeoutLength = options.refreshTimeoutLength ?? this.refreshTimeoutLength;
         this.api.start();
@@ -397,7 +407,9 @@ export class HttpgdViewer implements IHttpgdViewer {
 
     // focus a specific plot id
     public async focusPlot(id?: PlotId): Promise<void> {
-        this.activePlot = id;
+        if(id){
+            this.activePlot = id;
+        }
         const plt = this.plots[this.activeIndex];
         if(plt.height !== this.viewHeight * this.scale || plt.width !== this.viewHeight * this.scale){
             await this.refreshPlots();
@@ -416,13 +428,13 @@ export class HttpgdViewer implements IHttpgdViewer {
     }
 
     // navigate through plots (supply `true` to go to end/beginning of list)
-    public nextPlot(last?: boolean): void {
+    public async nextPlot(last?: boolean): Promise<void> {
         this.activeIndex = last ? this.plots.length - 1 : this.activeIndex+1;
-        this._focusPlot();
+        await this.focusPlot();
     }
-    public prevPlot(first?: boolean): void {
+    public async prevPlot(first?: boolean): Promise<void> {
         this.activeIndex = first ? 0 : this.activeIndex-1;
-        this._focusPlot();
+        await this.focusPlot();
     }
 
     // restore closed plots, reset zoom, redraw html
@@ -468,6 +480,15 @@ export class HttpgdViewer implements IHttpgdViewer {
         };
         this.postWebviewMessage(msg);
     }
+    
+    public toggleFullWindow(force?: boolean): void {
+        this.fullWindow = force ?? !this.fullWindow;
+        const msg: ToggleFullWindowMessage = {
+            message: 'toggleFullWindow',
+            useFullWindow: this.fullWindow
+        };
+        this.postWebviewMessage(msg);
+    }
 
     public togglePreviewPlots(force?: PreviewPlotLayout): void{
         if(force){
@@ -664,6 +685,8 @@ export class HttpgdViewer implements IHttpgdViewer {
         this.webviewPanel ??= this.makeNewWebview();
         this.webviewPanel.webview.html = '';
         this.webviewPanel.webview.html = this.makeHtml();
+        // make sure that fullWindow is set correctly:
+        this.toggleFullWindow(this.fullWindow);
         void this.setContextValues(true);
     }
 
diff --git a/src/plotViewer/webviewMessages.d.ts b/src/plotViewer/webviewMessages.d.ts
@@ -46,6 +46,12 @@ export interface ToggleStyleMessage extends IMessage {
   useOverwrites: boolean
 }
 
+export interface ToggleFullWindowMessage extends IMessage {
+  message: 'toggleFullWindow',
+  useFullWindow: boolean
+}
+
+
 export type PreviewPlotLayout = 'multirow' | 'scroll' | 'hidden';
 export interface PreviewPlotLayoutMessage extends IMessage {
   message: 'togglePreviewPlotLayout',
@@ -62,4 +68,4 @@ export interface AddPlotMessage extends IMessage {
   html: string
 }
 
-export type InMessage = UpdatePlotMessage | FocusPlotMessage | ToggleStyleMessage | HidePlotMessage | AddPlotMessage | PreviewPlotLayoutMessage;
+export type InMessage = UpdatePlotMessage | FocusPlotMessage | ToggleStyleMessage | HidePlotMessage | AddPlotMessage | PreviewPlotLayoutMessage | ToggleFullWindowMessage;
