Browse Source

Implement zoom

better-rectangles
Tissevert 11 months ago
parent
commit
4991d77fe6
  1. 2
      css/main.css
  2. 18
      css/page.css
  3. 7
      css/toolbar/zoom.css
  4. 5
      index.html
  5. 15
      js/GUI.js
  6. 62
      js/Toolbar/Zoom.js
  7. 18
      js/View.js
  8. 26
      js/XML/ALTO.js
  9. 32
      js/XML/ALTO/Element.js

2
css/main.css

@ -4,7 +4,7 @@ html, body {
#workzone {
position: fixed;
overflow: scroll;
overflow: auto;
z-index: -1;
left: 0;
top: 3em;

18
css/page.css

@ -1,13 +1,24 @@
#page {
padding: 1em;
background: #fffdf5;
border-left: 1px solid #e2e2e2;
border-right: 1px solid #ece8da;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
#page.ratio, #page.fitHeight {
border-left: 1px solid #e2e2e2;
border-right: 1px solid #ece8da;
}
#page.ratio, #page.fitWidth {
border-top: 1px solid #e2e2e2;
border-bottom: 1px solid #ece8da;
}
#page.empty {
display: none;
}
#page * {
position: absolute;
}
@ -26,7 +37,6 @@
}
#page p {
font-size: 0.9em;
margin: 0;
white-space: nowrap;
}

7
css/toolbar/zoom.css

@ -0,0 +1,7 @@
#zoom button {
padding: 0;
}
#zoom input[type="number"] {
width: 3em;
}

5
index.html

@ -39,6 +39,11 @@
<option value="edit">Édition des scories</option>
</select>
</span>
<span id="zoom">
<button id="fitWidth" title="Pleine largeur" ></button>
<input type="number" id="zoomAmount" value="100" step="10" min="30" max="250" title="Zoom"/>
<button id="fitHeight" title="Pleine hauteur" ></button>
</span>
</div>
<div id="workzone">
<div id="page"></div>

15
js/GUI.js

@ -1,10 +1,8 @@
import printSpace from XML.ALTO.Element;
/* Display */
var windowCatchAll = document.getElementById('windowCatchAll');
var workzone = document.getElementById('workzone');
var page = document.getElementById('page');
page.style.width = printSpace.pxWidth + 'px';
var selector = document.getElementById('selector');
/** Toolbar **/
@ -31,6 +29,12 @@ var wcThreshold = document.getElementById('wcThreshold');
var mode = document.getElementById('mode');
var saveScoria = document.getElementById('saveScoria');
/* Zoom */
var zoom = document.getElementById('zoom');
var fitWidth = document.getElementById('fitWidth');
var zoomAmount = document.getElementById('zoomAmount');
var fitHeight = document.getElementById('fitHeight');
return {
mode: mode,
fileMenu: fileMenu,
@ -42,11 +46,14 @@ return {
loadScoria: loadScoria,
saveScoria: saveScoria,
//inputFiles: inputFiles,
menus: menus,
page: page,
selector: selector,
wcThreshold: wcThreshold,
windowCatchAll: windowCatchAll,
workzone: workzone
workzone: workzone,
fitWidth: fitWidth,
zoomAmount: zoomAmount,
fitHeight: fitHeight
};

62
js/Toolbar/Zoom.js

@ -0,0 +1,62 @@
import GUI;
var initialRatio = 0.25;
var initialFontSize = 9;
var scalingMode = initialRatio;
var ratio = initialRatio;
setScalingMode(scalingMode);
return {
scale: scale,
scaleTo: scaleTo,
setScalingMode: setScalingMode
};
function className() {
if(typeof scalingMode == 'number') {
return 'ratio';
} else {
return scalingMode;
}
}
function scaleTo(geometry) {
switch(scalingMode) {
case 'fitWidth':
GUI.page.style.width = '100%';
ratio = GUI.page.clientWidth / geometry.width;
scale(GUI.page, geometry, 'height');
break;
case 'fitHeight':
GUI.page.style.height = '100%';
ratio = GUI.page.clientHeight / geometry.height;
scale(GUI.page, geometry, 'width');
GUI.zoomAmount.value = 10 * Math.round(10 * ratio / initialRatio);
break;
default:
ratio = scalingMode;
scale(GUI.page, geometry, 'height', 'width');
}
var fontSize = Math.round(initialFontSize * ratio / initialRatio);
GUI.page.style['font-size'] = fontSize + 'px';
}
function setScalingMode(mode) {
GUI.page.classList.remove(className());
if(mode.zoom != undefined) {
scalingMode = mode.zoom * initialRatio / 100;
} else if(mode.fitWidth) {
scalingMode = 'fitWidth';
} else if(mode.fitHeight) {
scalingMode = 'fitHeight';
}
GUI.page.classList.add(className());
}
function scale(element, geometry) {
for(var i = 2; i < arguments.length; i++) {
var pxSize = Math.round(geometry[arguments[i]] * ratio)
element.style[arguments[i]] = pxSize + 'px';
}
}

18
js/View.js

@ -1,15 +1,31 @@
import * as ALTO from XML.ALTO;
import File;
import GUI;
import Scoria;
import * as Zoom from Toolbar.Zoom;
import * as Async from UnitJS.Async;
import XML;
import * as ALTO from XML.ALTO;
var currentALTOFile = null;
GUI.wcThreshold.addEventListener('change', refresh);
GUI.loadScoria.addEventListener('click', importScoria);
GUI.saveScoria.addEventListener('click', exportScoria);
GUI.fitWidth.addEventListener('click', function() {
Zoom.setScalingMode({fitWidth: true});
refresh();
});
GUI.zoomAmount.addEventListener('change', function() {
Zoom.setScalingMode({zoom: GUI.zoomAmount.value});
refresh();
});
GUI.fitHeight.addEventListener('click', function() {
Zoom.setScalingMode({fitHeight: true});
refresh();
});
return {
open: open
};

26
js/XML/ALTO.js

@ -1,9 +1,10 @@
import * as Element from XML.ALTO.Element;
import {isScoria, toggleWord} from Scoria;
import Quality;
import page from GUI;
import GUI;
import * as Dom from UnitJS.Dom;
import {appendTo, onNodes} from XML;
import * as Zoom from Toolbar.Zoom;
return {
edit: edit,
@ -11,12 +12,23 @@ return {
};
function display(ALTODoc) {
var printSpace = Element.make(ALTODoc.querySelector('Page PrintSpace'));
Element.setPrintSpace(printSpace);
page.style.height = Element.printSpace.pxHeight + 'px';
Dom.clear(page);
onNodes(printSpace.get('TextBlock'), makeTextBlock(printSpace))
.forEach(appendTo(page));
var page = Element.make(ALTODoc.querySelector('Page'));
Zoom.scaleTo(page.geometry());
Dom.clear(GUI.page);
onNodes(page.get('PrintSpace'), makePrintSpace())
.forEach(appendTo(GUI.page));
function makePrintSpace() {
return function(printSpace) {
var dom = Dom.make(
'div', {class: "PrintSpace", id: printSpace.getAttribute('ID')}
);
var element = Element.make(printSpace, dom);
onNodes(element.get('TextBlock'), makeTextBlock(element))
.forEach(appendTo(dom));
return dom;
};
}
function makeTextBlock(parentElement) {
return function(textBlock) {

32
js/XML/ALTO/Element.js

@ -1,8 +1,4 @@
var printSpace = {
ratio: null,
pxWidth: 1000,
pxHeight: null
};
import scale from Toolbar.Zoom;
var schema = {
'PrintSpace': 'TextBlock',
@ -12,21 +8,9 @@ var schema = {
return {
make: make,
printSpace: printSpace,
schema: schema,
setPrintSpace: setPrintSpace
};
function setPrintSpace(element) {
var geometry = element.geometry();
printSpace.ratio = printSpace.pxWidth / geometry.width ;
printSpace.pxHeight = scale(geometry.height);
}
function scale(length) {
return Math.ceil(length * printSpace.ratio);
}
function make(xmlElement, domElement, parentElement) {
var hPos = xmlElement.getAttribute('HPOS');
var vPos = xmlElement.getAttribute('VPOS');
@ -58,12 +42,14 @@ function make(xmlElement, domElement, parentElement) {
}
function position() {
if(parentElement) {
var mother = parentElement.geometry();
domElement.style.left = scale(hPos - mother.hPos) + 'px';
domElement.style.top = scale(vPos - mother.vPos) + 'px';
domElement.style.width = scale(width) + 'px';
domElement.style.height = scale(height) + 'px';
if(domElement != undefined) {
var mother = parentElement ? parentElement.geometry() : {hPos: 0, vPos: 0};
scale(domElement, {
left: hPos - mother.hPos, /* due to absolute positioning in CSS, this needs to be */
top: vPos - mother.vPos, /* computed as an offset from the parentElement */
width: width,
height: height
}, 'left', 'top', 'width', 'height')
}
}
}
Loading…
Cancel
Save