Make zooming more fluid, fix font by including DejaVu Sans as a webfont

allCharacters.py

@@ -0,0 +1,19 @@
+
+outfile = open('allCharacters.txt', 'w')
+
+chars = set()
+
+with open('./web/_js/atlas.js') as f:
+	while True:
+		c = f.read(1)
+		if not c:
+			chars = list(chars)
+			chars = sorted(chars)
+			string = ""
+			for i in chars:
+				string += i
+			outfile.write(string)
+			break
+
+		chars.add(c)
+

allCharacters.txt

@@ -0,0 +1,2 @@
+	
+ !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_abcdefghijklmnopqrstuvwxyz{|}~ÅÍÑ×äåèéíñõöøúāćŌōūŵμТбзиру​–—’“”•™☆❤カガゴスズタハブモラルンー人友合夏帳日本百目茜野국김녀대마무민설소스시아오와이트한현️

shrinkFont.py

@@ -0,0 +1,29 @@
+#!/usr/bin/python2
+
+
+# By StackOverflow user SadaleNet:
+# https://stackoverflow.com/questions/14557944/downsizing-an-otf-font-by-removing-glyphs/34132900#34132900
+
+
+import sys
+import fontforge
+
+if len(sys.argv) == 4:
+    font = fontforge.open(sys.argv[1])
+
+    f = open(sys.argv[2], "r")
+
+    for i in f.read().decode("UTF-8"):
+        font.selection[ord(i)] = True
+    f.close()
+
+    font.selection.invert()
+
+    for i in font.selection.byGlyphs:
+        font.removeGlyph(i)
+
+    font.generate(sys.argv[3])
+else:
+    print "WARNING: Check the license of the source font\nbefore distributing the output font generated by this script.\nI'm not responsible for any legal issue caused by\ninappropriate use of this script!\n"
+    print "Usage: {} [source font] [file with glyphs NOT to be removed] [output]".format(sys.argv[0])
+    print "Example: {} /path/to/ukai.ttc chineseTranslation.txt ukaiStripped.ttf".format(sys.argv[0])

web/_js/main.js

@@ -35,6 +35,9 @@ if(window.devicePixelRatio){
 	zoom = 1/window.devicePixelRatio;
 }
 
+var maxZoom = 128;
+var minZoom = 0.1;
+
 var zoomOrigin = [0, 0];
 var scaleZoomOrigin = [0, 0];
 
@@ -67,6 +70,9 @@ function init(){
 	var initialPinchZoom = 0;
 	var initialPinchZoomOrigin = [0, 0];
 
+	var desiredZoom;
+	var zoomAnimationFrame;
+
 	var mode = "view";
 
 	var args = window.location.search;
@@ -118,38 +124,51 @@ function init(){
 		window.location = "./about.html";
 	}
 
-	function zoomOut(x, y){
-
-		zoomOrigin[0] += x - container.clientWidth/2;
-		zoomOrigin[1] += y - container.clientHeight/2;
-
-		zoomOrigin[0] = zoomOrigin[0]/2;
-		zoomOrigin[1] = zoomOrigin[1]/2;
-	
-		zoom = zoom / 2;
-
-		applyView();
-	}
-
-	function zoomIn(x, y){
-		
-		zoomOrigin[0] = zoomOrigin[0]*2;
-		zoomOrigin[1] = zoomOrigin[1]*2;
-
-		zoomOrigin[0] -= x - container.clientWidth/2;
-		zoomOrigin[1] -= y - container.clientHeight/2;
-		
-		zoom = zoom * 2;
-
-		applyView();
-	}
-
 	document.getElementById("zoomInButton").addEventListener("click", function(e){
-		zoomIn(container.clientWidth/2, container.clientHeight/2);
+
+		if(zoomAnimationFrame){
+			window.cancelAnimationFrame(zoomAnimationFrame);
+		}
+		
+		var x = container.clientWidth/2;
+		var y = container.clientHeight/2;
+
+		initialPinchZoomOrigin = [
+			scaleZoomOrigin[0],
+			scaleZoomOrigin[1]
+		];
+
+		initialPinchZoom = zoom;
+		
+		lastPosition = [x, y];
+		var desiredZoom = zoom * 2;
+		desiredZoom = Math.max(minZoom, Math.min(maxZoom, desiredZoom));
+		
+		setDesiredZoom(x, y, desiredZoom);
+		
 	});
 
 	document.getElementById("zoomOutButton").addEventListener("click", function(e){
-		zoomOut(container.clientWidth/2, container.clientHeight/2);
+
+		if(zoomAnimationFrame){
+			window.cancelAnimationFrame(zoomAnimationFrame);
+		}
+		
+		var x = container.clientWidth/2;
+		var y = container.clientHeight/2;
+
+		initialPinchZoomOrigin = [
+			scaleZoomOrigin[0],
+			scaleZoomOrigin[1]
+		];
+
+		initialPinchZoom = zoom;
+		
+		lastPosition = [x, y];
+		var desiredZoom = zoom / 2;
+		desiredZoom = Math.max(minZoom, Math.min(maxZoom, desiredZoom));
+		
+		setDesiredZoom(x, y, desiredZoom);
 	});
 
 	document.getElementById("zoomResetButton").addEventListener("click", function(e){
@@ -159,33 +178,89 @@ function init(){
 	});
 
 	container.addEventListener("dblclick", function(e){
+		if(zoomAnimationFrame){
+			window.cancelAnimationFrame(zoomAnimationFrame);
+		}
+
+		var x = e.layerX;
+		var y = e.layerY;
+
+		initialPinchZoomOrigin = [
+			scaleZoomOrigin[0],
+			scaleZoomOrigin[1]
+		];
+
+		initialPinchZoom = zoom;
+		
+		lastPosition = [x, y];
+
+		var desiredZoom = 0;
+
 		if(e.ctrlKey){
 
-			zoomOut(e.layerX, e.layerY);
+			desiredZoom = zoom / 2;
 			
 		} else {
 			
-			zoomIn(e.layerX, e.layerY);
+			desiredZoom = zoom * 2;
 		}
 
+		desiredZoom = Math.max(minZoom, Math.min(maxZoom, desiredZoom));
+		setDesiredZoom(x, y, desiredZoom);
+
 		e.preventDefault();
 	});
 
 
 	container.addEventListener("wheel", function(e){
 
+		if(zoomAnimationFrame){
+			window.cancelAnimationFrame(zoomAnimationFrame);
+		}
+
+		var x = e.layerX;
+		var y = e.layerY;
+
+		initialPinchZoomOrigin = [
+			scaleZoomOrigin[0],
+			scaleZoomOrigin[1]
+		];
+
+		initialPinchZoom = zoom;
+		
+		lastPosition = [x, y];
+
+		var desiredZoom = 0;
+		
 		if(e.deltaY > 0){
 
-			zoomOut(e.layerX, e.layerY);
+			desiredZoom = zoom / 2;
 			
 		} else if(e.deltaY < 0){
 			
-			zoomIn(e.layerX, e.layerY);
+			desiredZoom = zoom * 2;
 		}
 
+		desiredZoom = Math.max(minZoom, Math.min(maxZoom, desiredZoom));
+		setDesiredZoom(x, y, desiredZoom);
+
 		e.preventDefault();
 	});
 
+	function setDesiredZoom(x, y, target){
+		zoom = (zoom*2 + target)/3;
+		console.log(zoom);
+		if(Math.abs(1 - zoom/target) <= 0.01){
+			zoom = target;
+		}
+		applyZoom(x, y, zoom);
+		if(zoom != target){
+			zoomAnimationFrame = window.requestAnimationFrame(function(){
+				setDesiredZoom(x, y, target);
+			});
+		}
+	}
+
 	container.addEventListener("mousedown", function(e){
 		mousedown(e.clientX, e.clientY);
 		e.preventDefault();
@@ -266,11 +341,19 @@ function init(){
 			var x = (e.touches[0].clientX + e.touches[1].clientX)/2 - container.offsetLeft;
 			var y = (e.touches[0].clientY + e.touches[1].clientY)/2 - container.offsetTop;
 
+			applyZoom(x, y, zoom);
+			
+		}
+		
+	}
+
+	function applyZoom(x, y, zoom){
+
 		var deltaX = x - lastPosition[0];
 		var deltaY = y - lastPosition[1];
 
-			var pinchTranslateX = (x - container.clientWidth/2 - deltaX)
+		var pinchTranslateX = (x - container.clientWidth/2 - deltaX);
-			var pinchTranslateY = (y - container.clientHeight/2 - deltaY)
+		var pinchTranslateY = (y - container.clientHeight/2 - deltaY);
 
 		scaleZoomOrigin[0] = initialPinchZoomOrigin[0] + deltaX/zoom + pinchTranslateX/zoom - pinchTranslateX/initialPinchZoom;
 		scaleZoomOrigin[1] = initialPinchZoomOrigin[1] + deltaY/zoom + pinchTranslateY/zoom - pinchTranslateY/initialPinchZoom;
@@ -279,9 +362,7 @@ function init(){
 		zoomOrigin[1] = scaleZoomOrigin[1]*zoom;
 		
 		applyView();
-			
+		updateLines();
-		}
-		
 	}
 
 	window.addEventListener("mouseup", function(e){

web/_js/view.js

@@ -22,6 +22,52 @@
 
 	========================================================================
 */
+var linesCanvas = document.getElementById("linesCanvas");
+var linesContext = linesCanvas.getContext("2d");
+var hovered = [];
+
+function updateLines(){
+
+	linesCanvas.width = linesCanvas.clientWidth;
+	linesCanvas.height = linesCanvas.clientHeight;
+	linesContext.lineCap = "round";
+	linesContext.lineWidth = Math.max(Math.min(zoom*1.5, 16*1.5), 6);
+	linesContext.strokeStyle = "#000000";
+
+	for(var i = 0; i < hovered.length; i++){
+		var element = hovered[i].element;
+
+		linesContext.beginPath();
+		//linesContext.moveTo(element.offsetLeft + element.clientWidth - 10, element.offsetTop + 20);
+		linesContext.moveTo(
+			 element.getBoundingClientRect().left + document.documentElement.scrollLeft + element.clientWidth/2
+			,element.getBoundingClientRect().top + document.documentElement.scrollTop + 20
+		);
+		linesContext.lineTo(
+			 ~~(hovered[i].center[0]*zoom) + innerContainer.offsetLeft
+			,~~(hovered[i].center[1]*zoom) + innerContainer.offsetTop
+		);
+		linesContext.stroke();
+	}
+
+	linesContext.lineWidth = Math.max(Math.min(zoom, 16), 4);
+	linesContext.strokeStyle = "#FFFFFF";
+
+	for(var i = 0; i < hovered.length; i++){
+		var element = hovered[i].element;
+
+		linesContext.beginPath();
+		linesContext.moveTo(
+			 element.getBoundingClientRect().left + document.documentElement.scrollLeft + element.clientWidth/2
+			,element.getBoundingClientRect().top + document.documentElement.scrollTop + 20
+		);
+		linesContext.lineTo(
+			 ~~(hovered[i].center[0]*zoom) + innerContainer.offsetLeft
+			,~~(hovered[i].center[1]*zoom) + innerContainer.offsetTop
+		);
+		linesContext.stroke();
+	}
+}
 
 function initView(){
 
@@ -29,9 +75,6 @@ function initView(){
 	
 	var objectsContainer = document.getElementById("objectsList");
 
-	var linesCanvas = document.getElementById("linesCanvas");
-	var linesContext = linesCanvas.getContext("2d");
-
 	var backgroundCanvas = document.createElement("canvas");
 	backgroundCanvas.width = 1000;
 	backgroundCanvas.height = 1000;
@@ -54,8 +97,6 @@ function initView(){
 
 	var viewportWidth = document.documentElement.clientWidth;
 
-	var hovered = [];
-
 	var lastPos = [0, 0];
 	var previousZoomOrigin = [0, 0];
 
@@ -471,49 +512,6 @@ function initView(){
 		}
 	}
 
-	function updateLines(){
-
-		linesCanvas.width = linesCanvas.clientWidth;
-		linesCanvas.height = linesCanvas.clientHeight;
-		linesContext.lineCap = "round";
-		linesContext.lineWidth = Math.max(Math.min(zoom*1.5, 16*1.5), 6);
-		linesContext.strokeStyle = "#000000";
-
-		for(var i = 0; i < hovered.length; i++){
-			var element = hovered[i].element;
-
-			linesContext.beginPath();
-			//linesContext.moveTo(element.offsetLeft + element.clientWidth - 10, element.offsetTop + 20);
-			linesContext.moveTo(
-				 element.getBoundingClientRect().left + document.documentElement.scrollLeft + element.clientWidth/2
-				,element.getBoundingClientRect().top + document.documentElement.scrollTop + 20
-			);
-			linesContext.lineTo(
-				 ~~(hovered[i].center[0]*zoom) + innerContainer.offsetLeft
-				,~~(hovered[i].center[1]*zoom) + innerContainer.offsetTop
-			);
-			linesContext.stroke();
-		}
-
-		linesContext.lineWidth = Math.max(Math.min(zoom, 16), 4);
-		linesContext.strokeStyle = "#FFFFFF";
-
-		for(var i = 0; i < hovered.length; i++){
-			var element = hovered[i].element;
-
-			linesContext.beginPath();
-			linesContext.moveTo(
-				 element.getBoundingClientRect().left + document.documentElement.scrollLeft + element.clientWidth/2
-				,element.getBoundingClientRect().top + document.documentElement.scrollTop + 20
-			);
-			linesContext.lineTo(
-				 ~~(hovered[i].center[0]*zoom) + innerContainer.offsetLeft
-				,~~(hovered[i].center[1]*zoom) + innerContainer.offsetTop
-			);
-			linesContext.stroke();
-		}
-	}
-
 	window.addEventListener("resize", updateLines);
 	window.addEventListener("mousemove", updateLines);
 	window.addEventListener("dblClick", updateLines);