Merge pull request #6 from Federico-G/fede

v1.1.0

CHANGELOG.md

@@ -19,3 +19,8 @@
 - Se agrega analytics al proyecto
 - Se agrega la posibilidad de subir diagrama con sus formas para ayudar a mejorar la detección de formas
 - Se agregan funciones de procesamiento al repositorio
+
+
+## 1.1.0
+- Se agrega la capacidad de cambiar el tamaño de letra y de desactivar el ajuste automático de escala, junto con la capacidad de elegirlo manualmente
+- Se agrega api_key para compilador de C

public/css/main.css

@@ -124,6 +124,7 @@ footer a:hover {
 
 /* EDIT */
 
+.drophidden .dropdown-toggle::before,
 .drophidden .dropdown-toggle::after {
   content: none;
 }
@@ -147,6 +148,20 @@ footer a:hover {
   font-family: monospace;
 }
 
+#change_zoom {
+  position: absolute;
+  right: 25px;
+  top: 105px;
+  z-index: 1001;
+}
+
+#change_zoom > button {
+  border-radius: 40px;
+  width: 40px;
+  height: 40px;
+  outline: 0;
+}
+
 #add_shape {
   position: absolute;
   right: 25px;

public/js/main.js

@@ -1,7 +1,8 @@
 window.dg = {
-	version: "v1.0.2",
+	version: "v1.1.0",
 	config: {
 		width: 1000,
+		autoScale: true,
 		_fontSize: 0,
 		_scale: 1,
 		set fontSize(size) {
@@ -68,10 +69,22 @@ function addInstall() {
 
 $(function() {
 	addInstall();
-	dg.config.scale = document.getElementById("main").clientWidth / dg.config.width;
-	$(window).on("resize", function() {
-		dg.config.scale = document.getElementById("main").clientWidth / dg.config.width;
-	});
+
+	function autoScale() {
+		if (dg.config.autoScale) {
+			dg.config.scale = document.getElementById("main").clientWidth / dg.config.width;
+			document.getElementById("shape-container").style.width = "";
+		} else {
+			dg.config.width = document.getElementById("main").clientWidth / dg.config.scale;
+			document.getElementById("shape-container").style.width = dg.config.width + "px";
+		}
+		// TODO cambiar de lugar
+		$("#shapeRange").val(Math.log2(dg.config.scale * 10));
+	}
+
+	$(window).on("resize", autoScale);
+	autoScale();
+
 	document.getElementById("version").innerHTML = dg.version;
 	dg.step.check();
 });

public/js/menu.js

@@ -422,6 +422,52 @@ dg.menu = {
 		}
 	},
 
+	generarAgregarZoom: function() {
+
+
+		var $todo = $(`<div id="change_zoom" class="dropleft drophidden" style='display: inline-block'>
+      <button class="btn btn-outline-secondary dropdown-toggle" type="button" id="dropdownZoom" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+        <i class="fa fa-cog"></i>
+      </button>
+      <div class="dropdown-menu text-center dropdown-menu-right p-3" style="min-width: 250px; max-width: 400px;">
+
+        <h3>Zoom</h3>
+        <div class='row no-gutters' style='align-items: center;'>
+          <div class='col col-auto pr-2'>
+            <i class="fa fa-font h5"></i>
+          </div>
+          <div class='col'>
+            <input type="range" value="` + dg.config.fontSize + `" min="10" max="60" step="5" class="custom-range d-inline-block" id="fontRange" oninput="dg.menu.cambiarTamañoFuente(this.value);">
+          </div>
+          <div class='col col-auto pl-2'>
+            <i class="fa fa-font h2"></i>
+          </div>
+        </div>
+        
+        <div class='row no-gutters mt-3' style='align-items: center;'>
+          <div class='col col-auto pr-2'>
+            <i class="fa fa-square-o h5"></i>
+          </div>
+          <div class='col'>
+            <input type="range" value="` + Math.log2(dg.config.scale * 10) + `" ` + (dg.config.autoScale ? "disabled " : "") + `min="1" max="5" step="0.125" class="custom-range d-inline-block" id="shapeRange" oninput="dg.menu.cambiarZoom(this.value);">
+          </div>
+          <div class='col col-auto pl-2'>
+            <i class="fa fa-square-o h2"></i>
+          </div>
+        </div>
+        <div class="custom-control custom-switch">
+          <input type="checkbox" ` + (dg.config.autoScale ? "checked " : "") + `class="custom-control-input" id="automaticShapeZoom" oninput="dg.menu.cambiarZoomAutomatico(this.checked);">
+          <label class="custom-control-label" for="automaticShapeZoom">Automático</label>
+        </div>
+        
+      </div>
+    </div>`);
+
+		$("#buttons").append($todo).find('#change_zoom .dropdown-menu').click(function(e) {
+			e.stopPropagation();
+		});
+	},
+
 	generarCrear: function() {
 		document.getElementById('intro').innerHTML = '<h1>¡Nuevo!</h1><br>Elija una opción debajo para comenzar';
 	},
@@ -551,5 +597,25 @@ dg.menu = {
 			localStorage.setItem("functions", JSON.stringify(functions));
 			dg.step.check();
 		}
+	},
+
+	cambiarTamañoFuente: function(value) {
+		dg.config.fontSize = value;
+	},
+
+	cambiarZoom: function(value) {
+		$("#automaticShapeZoom").val(false);
+		dg.config.scale = 0.1 * Math.pow(2, value);
+	},
+
+	cambiarZoomAutomatico: function(value) {
+		dg.config.autoScale = value;
+		if (value) {
+			dg.config.width = 1000;
+		}
+		$(window).trigger("resize");
+		$("#shapeRange").prop("disabled", value);
+		$("#shapeRange").val(Math.log2(dg.config.scale * 10));
 	}
+
 }

public/js/step.js

@@ -86,6 +86,7 @@ dg.step = {
 		dg.shape.generateSVG();
 		dg.menu.generarAgregarShape();
 		dg.menu.generarAgregarShapeTrash();
+		dg.menu.generarAgregarZoom();
 		window.addEventListener('beforeunload', dg.menu.saveDiagram);
 		init_interact();
 	},

public/sw.js

@@ -1,4 +1,4 @@
-const cacheName = 'Cache v1.0.2';
+const cacheName = 'Cache v1.1.0';
 const resourcesToPrecache = [
 	'/',
 	'index.html',