mirror of
https://github.com/placeAtlas/atlas.git
synced 2024-12-24 19:14:09 +01:00
Make zooming more fluid, fix font by including DejaVu Sans as a webfont
This commit is contained in:
Roland Rytz
parent
f80ce2cdd7
commit
94a20f2b34
6 changed files with 246 additions and 98 deletions
19
allCharacters.py
Normal file
19
allCharacters.py
Normal file
|
|
@ -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)
|
||||
|
||||
2
allCharacters.txt
Normal file
2
allCharacters.txt
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
|
||||
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_abcdefghijklmnopqrstuvwxyz{|}~ÅÍÑ×äåèéíñõöøúāćŌōūŵμТбзиру–—’“”•™☆❤カガゴスズタハブモラルンー人友合夏帳日本百目茜野국김녀대마무민설소스시아오와이트한현️
|
||||
29
shrinkFont.py
Normal file
29
shrinkFont.py
Normal file
|
|
@ -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])
|
||||
File diff suppressed because one or more lines are too long
173
web/_js/main.js
173
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,24 +341,30 @@ 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;
|
||||
|
||||
var deltaX = x - lastPosition[0];
|
||||
var deltaY = y - lastPosition[1];
|
||||
|
||||
var pinchTranslateX = (x - container.clientWidth/2 - deltaX)
|
||||
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;
|
||||
|
||||
zoomOrigin[0] = scaleZoomOrigin[0]*zoom;
|
||||
zoomOrigin[1] = scaleZoomOrigin[1]*zoom;
|
||||
|
||||
applyView();
|
||||
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 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;
|
||||
|
||||
zoomOrigin[0] = scaleZoomOrigin[0]*zoom;
|
||||
zoomOrigin[1] = scaleZoomOrigin[1]*zoom;
|
||||
|
||||
applyView();
|
||||
updateLines();
|
||||
}
|
||||
|
||||
window.addEventListener("mouseup", function(e){
|
||||
mouseup(e.clientX, e.clientY);
|
||||
e.preventDefault();
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
Loading…
Reference in a new issue