Removed resizer code.

mrdoob · Aug 15, 2021 · 1b01b6a · 1b01b6a
1 parent d101fe7
commit 1b01b6a
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 76 deletions.
diff --git a/static/css/codemirror.css b/static/css/codemirror.css
@@ -2,8 +2,12 @@
   color: white;
   text-shadow: rgba( 0, 0, 0, 1 ) 0px 1px 2px;
   background-color: transparent;
-  position: absolute; left: 25px; top: 75px;
-  padding: 12px;
+  padding: 16px 8px;
+  position: absolute;
+  top: 75px;
+  bottom: 25px;
+  left: 25px;
+  right: 25px;
   border: 0px;
   border-radius: 5px;
   line-height: 1.1em;
@@ -102,15 +106,3 @@ span.CodeMirror-selected {
 .CodeMirror:hover pre.errorLine {
   background: rgba(200, 50, 0, 0.2);
 }
-
-.CodeMirror .resizer {
-	display: block;
-	position: absolute;
-	bottom: 3px;
-	right: 3px;
-	width: 11px;
-	height: 11px;
-	background-image: url('resizer.png');
-	background-repeat: no-repeat;
-	cursor: se-resize;
-}
diff --git a/static/css/resizer.png b/static/css/resizer.png
diff --git a/static/index.html b/static/index.html
@@ -16,6 +16,13 @@
 				padding: 0;
 			}
 
+			canvas {
+				display: block;
+				width: 100%;
+				height: 100%;
+				touch-action: none;
+			}
+
 			button, select, a, a:visited {
 				padding: 8px 12px;
 
@@ -140,7 +147,7 @@
 			var code, canvas, gl, buffer, currentProgram, vertexPosition, screenVertexPosition,
 			parameters = { startTime: Date.now(), time: 0, mouseX: 0.5, mouseY: 0.5, screenWidth: 0, screenHeight: 0 },
 			surface = { centerX: 0, centerY: 0, width: 1, height: 1, isPanning: false, isZooming: false, lastX: 0, lastY: 0 },
-			frontTarget, backTarget, screenProgram, getWebGL, resizer = {}, compileOnChangeCode = true;
+			frontTarget, backTarget, screenProgram, getWebGL, compileOnChangeCode = true;
 
 			init();
 
@@ -149,10 +156,6 @@
 			function init() {
 
 				canvas = document.createElement( 'canvas' );
-				canvas.style.display = 'block';
-				canvas.style.width = '100%';
-				canvas.style.height = '100%';
-				canvas.style.touchAction = 'none';
 				document.body.appendChild( canvas );
 
 				//
@@ -221,7 +224,7 @@
 				for ( var i = 0; i < quality_levels.length; i ++ ) {
 
 					var option = document.createElement( 'option' );
-					option.textContent = quality_levels[ i ];
+					option.textContent = quality_levels[ i ] + 'x';
 					if ( quality_levels[ i ] == quality ) option.selected = true;
 					select.appendChild( option );
 
@@ -292,28 +295,6 @@
 					}
 				});
 
-				resizer.offsetMouseX = 0;
-				resizer.offsetMouseY = 0;
-				resizer.isResizing = false;
-				resizer.currentWidth = 100;
-				resizer.currentHeight = 100;
-				resizer.minWidth = 100;
-				resizer.minHeight = 100;
-				resizer.maxWidth = 100;
-				resizer.maxHeight = 100;
-				resizer.element = document.createElement( 'div' );
-				resizer.element.className = 'resizer';
-				code.getWrapperElement().appendChild(resizer.element);
-
-				resizer.element.addEventListener( 'mousedown', function ( event ) {
-					if (event.button !== 2) {
-						resizer.offsetMouseX = event.clientX - resizer.currentWidth;
-						resizer.offsetMouseY = event.clientY - resizer.currentHeight;
-						resizer.isResizing = true;
-						event.preventDefault();
-					}
-				}, false );
-
 				if (gl) {
 
 					var surfaceMouseDown = function ( event ) {
@@ -370,17 +351,7 @@
 					parameters.mouseX = clientX / window.innerWidth;
 					parameters.mouseY = 1 - clientY / window.innerHeight;
 
-					if (resizer.isResizing) {
-
-						resizer.currentWidth = Math.max(Math.min(clientX - resizer.offsetMouseX, resizer.maxWidth), resizer.minWidth);
-						resizer.currentHeight = Math.max(Math.min(clientY - resizer.offsetMouseY, resizer.maxHeight), resizer.minWidth);
-						codeElement = code.getWrapperElement();
-						codeElement.style.width = resizer.currentWidth + 'px';
-						codeElement.style.height = resizer.currentHeight + 'px';
-						code.refresh();
-						event.preventDefault();
-
-					} else if (surface.isPanning) {
+					if (surface.isPanning) {
 
 						dx = clientX - surface.lastX;
 						dy = clientY - surface.lastY;
@@ -405,7 +376,6 @@
 				}, false );
 
 				function settleDown ( event ) {
-					resizer.isResizing = surface.isPanning = surface.isZooming = false;
 					document.body.style.cursor = 'default';
 					panButton.style.cursor = 'move';
 				}
@@ -812,36 +782,15 @@
 
 			function onWindowResize( event ) {
 
-				var isMaxWidth = ((resizer.currentWidth === resizer.maxWidth) || (resizer.currentWidth === resizer.minWidth)),
-					isMaxHeight = ((resizer.currentHeight === resizer.maxHeight) || (resizer.currentHeight === resizer.minHeight));
-
-				resizer.isResizing = false;
-				resizer.maxWidth = window.innerWidth - 52;
-				resizer.maxHeight = window.innerHeight - 100;
-				if (isMaxWidth || (resizer.currentWidth > resizer.maxWidth)) {
-					resizer.currentWidth = resizer.maxWidth;
-				}
-				if (isMaxHeight || (resizer.currentHeight > resizer.maxHeight)) {
-					resizer.currentHeight = resizer.maxHeight;
-				}
-				if (resizer.currentWidth < resizer.minWidth) { resizer.currentWidth = resizer.minWidth; }
-				if (resizer.currentHeight < resizer.minHeight) { resizer.currentHeight = resizer.minHeight; }
-
-				code.getWrapperElement().style.top = '75px';
-				code.getWrapperElement().style.left = '25px';
-				code.getWrapperElement().style.width = resizer.currentWidth + 'px';
-				code.getWrapperElement().style.height = resizer.currentHeight + 'px';
-
 				canvas.width = window.innerWidth / quality;
 				canvas.height = window.innerHeight / quality;
 
-
 				parameters.screenWidth = canvas.width;
 				parameters.screenHeight = canvas.height;
 
 				computeSurfaceCorners();
 
-				if (gl) {
+				if ( gl ) {
 
 					gl.viewport( 0, 0, canvas.width, canvas.height );