drag resize

public/react/public/js/js_min_all.js

@@ -206,6 +206,7 @@ $(function(){
 
     // window resize
     $(window).on('resize', function() {
+        // _resizeVNC_if_needed()
     	$('.CodeMirror.cm-s-railscasts').css("height", $("#games_repository_contents").height() - repositoryTabHeight);
     })
 
@@ -1182,6 +1183,7 @@ $(function(){ 		// 这里重新加一次事件监听，不在原有事件的基
 			dragging = true;
 			dragDom = lab;
 			$('#htmlIframe').css('pointer-events', 'none')
+            $('#can-drag').show()
 	        return false;
 	    }
 	);
@@ -1202,7 +1204,10 @@ $(function(){ 		// 这里重新加一次事件监听，不在原有事件的基
 
 	doc.live("mouseup", function(e) {
 		// 在大窗口将下边测试集滚动条拖上去后，将窗口缩小，再拖下来就有这种情况  https://www.trustie.net/issues/16326
+        $('#can-drag').hide()
+
 		if (dragging === true) {
+            // _resizeVNC_if_needed()
 			window.editor_CodeMirror && window.editor_CodeMirror.refresh()
 			// 使得iframe可以继续捕获事件
     		$('#htmlIframe').css('pointer-events', 'inherit')
@@ -1210,6 +1215,27 @@ $(function(){ 		// 这里重新加一次事件监听，不在原有事件的基
 		dragging = false;
     });
 })
+function _resizeVNC_if_needed() {
+    return;
+    if (window.__isVNC) {
+        // $('#screen>div').width('1024px').height('768px')
+        var trueHeight = $('#game_right_contents').height();
+        var width = $('#game_right_contents').width()
+
+        // __rfb && __rfb.get_display().autoscale(width, trueHeight)
+
+        return;
+        if (trueHeight < 768) {
+            var width = $('#game_right_contents').width()
+            var _left = width - $('#screen').width() / 2
+            var scale = (trueHeight / 768).toFixed(5)
+            // _left
+            $('#screen').css('transform', 'scale(' + scale + ', ' + scale +')').css('transform-origin', 0 + 'px 0px')
+        } else {
+            $('#screen').css('transform', 'scale(' + 1 + ', ' + 1 +')')
+        }
+    }
+}
 
 // ---------------------------------------------------------------------------------------------
 /**

public/react/src/modules/page/MainContent.js

@@ -47,6 +47,7 @@ class MainContent extends Component {
   			games_repository_contents_style = {overflow: 'hidden', height: '445px'}
   		}
 		const showIframeContent = shixun && shixun.vnc == true
+		// window.__isVNC = showIframeContent && !!vnc_url
 	    return (
 	      	<div className="page--body -margin-t-64 -flex">
 		      	<div className="-layout -stretch -fit labelN" id="game_show_content">
@@ -55,6 +56,18 @@ class MainContent extends Component {
 		      			{/* 左侧任务说明等功能的区域 */}
 		      			<LeftViewContainer {...this.props}></LeftViewContainer>
 		      		</div>
+					<style>{`
+					.can-drag {
+						width: 100%;
+						height: 100%;
+						z-index: 100;
+						position: fixed;
+						cursor: col-resize;
+						top: 0px;
+					}
+
+					`}</style>
+					{showIframeContent && vnc_url && <div id="can-drag" className="can-drag" style={{display: 'none'}}></div>}
 
 		      		<div className="b-label -layout" style={{left: '687px'}}>
 		      			<div className="resize-helper ">

public/react/src/modules/page/VNCDisplay.js

@@ -13,6 +13,7 @@ class VNCDisplay extends Component {
         // When this function is called we have
         // successfully connected to a server
         function connectedToServer(e) {
+            $('#top_bar').hide()
             status("Connected to " + desktopName);
         }
         // This function is called when we are disconnected
@@ -109,6 +110,8 @@ class VNCDisplay extends Component {
         // Set parameters that can be changed on an active connection
         rfb.viewOnly = readQueryVariable('view_only', false);
         rfb.scaleViewport = readQueryVariable('scale', false);
+        rfb.resizeSession = true
+        window.__rfb = rfb;
 	}
 	
   	render() {
@@ -116,7 +119,7 @@ class VNCDisplay extends Component {
 
   		
 	    return (
-	      	<div className="">
+	      	<div className="" style={{height: '100%'}}>
                 <style>{`
                     #top_bar {
                         background-color: #6e84a3;
@@ -137,6 +140,7 @@ class VNCDisplay extends Component {
                         cursor: pointer;
                     }
                     #screen {
+                        height: 100%;
                         flex: 1; /* fill remaining space */
                         overflow: hidden;
                     }