Browse Source

Implement element positioning by converting ALTO's native PrintSpace-relative positioning to CSS-implementable parent-relative positioning

better-rectangles
Tissevert 8 months ago
parent
commit
356468c5f6
4 changed files with 134 additions and 18 deletions
  1. +28
    -0
      gui.css
  2. +1
    -0
      index.html
  3. +43
    -18
      src/ALTO.js
  4. +62
    -0
      src/ALTO/Element.js

+ 28
- 0
gui.css View File

@ -0,0 +1,28 @@
html, body {
margin: 0;
}
#toolbar {
background: #ddd;
border-top: 1px solid #eee;
border-bottom: 1px solid #ccc;
}
#workzone {
padding: 1em;
background: #fffdf5;
border-left: 1px solid #e2e2e2;
border-right: 1px solid #ece8da;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
#workzone * {
position: absolute;
}
#workzone p {
font-size: 0.99em;
margin: 0;
}

+ 1
- 0
index.html View File

@ -4,6 +4,7 @@
<meta charset="utf-8">
<title>Chaoui</title>
<script src="main.js"></script>
<link rel="stylesheet" href="gui.css" type="text/css"/>
</head>
<body>
<div id="toolbar">


+ 43
- 18
src/ALTO.js View File

@ -1,6 +1,8 @@
import * as Element from ALTO.Element;
import * as Dom from UnitJS.Dom;
var workzone = document.getElementById('workzone');
workzone.style.width = Element.printSpace.pxWidth + 'px';
return {
display: display,
@ -13,29 +15,52 @@ function onNodes(nodeList, f) {
return result;
}
function appendTo(element) {
return function(e) {element.appendChild(e);};
}
function display(ALTODoc) {
var printSpace = Element.make(ALTODoc.querySelector('Page PrintSpace'));
Element.setPrintSpace(printSpace);
workzone.style.height = Element.printSpace.pxHeight + 'px';
Dom.clear(workzone);
var textBlocksNodes = ALTODoc.querySelectorAll('Page PrintSpace TextBlock');
onNodes(textBlocksNodes, makeTextBlock).forEach(
function(e) {workzone.appendChild(e);}
);
}
onNodes(printSpace.get('TextBlock'), makeTextBlock(printSpace))
.forEach(appendTo(workzone));
function makeTextBlock(textBlock) {
var textLines = textBlock.querySelectorAll('TextLine');
return Dom.make('div', {class: "TextBlock"}, onNodes(textLines, makeTextLine));
}
function makeTextBlock(parentElement) {
return function(textBlock) {
var dom = Dom.make(
'div', {class: "TextBlock", id: textBlock.getAttribute('ID')}
);
var element = Element.make(textBlock, dom, parentElement);
onNodes(element.get('TextLine'), makeTextLine(element))
.forEach(appendTo(dom));
return dom;
};
}
function makeTextLine(textLine) {
var strings = textLine.querySelectorAll('String');
return Dom.make('p', {class: "TextLine"}, onNodes(strings, makeString));
}
function makeTextLine(parentElement) {
return function(textLine) {
var dom = Dom.make(
'p', {class: "TextLine", id: textLine.getAttribute('ID')}
);
var element = Element.make(textLine, dom, parentElement);
onNodes(element.get('String'), makeString(element))
.forEach(appendTo(dom));
return dom;
};
}
function makeString(string) {
return Dom.make('span', {
class: "String",
textContent: string.getAttribute('CONTENT')
});
function makeString(parentElement) {
return function(string) {
var dom = Dom.make('span', {
class: "String",
id: string.getAttribute('ID'),
textContent: string.getAttribute('CONTENT')
});
return Element.make(string, dom, parentElement).dom();
};
}
}
function load(file) {


+ 62
- 0
src/ALTO/Element.js View File

@ -0,0 +1,62 @@
var printSpace = {
ratio: null,
pxWidth: 1000,
pxHeight: null
};
return {
make: make,
printSpace: printSpace,
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');
var width = xmlElement.getAttribute('WIDTH');
var height = xmlElement.getAttribute('HEIGHT');
position();
return {
dom: dom,
geometry: geometry,
get: get
};
function dom() {
return domElement;
}
function geometry() {
return {
hPos: hPos,
vPos: vPos,
width: width,
height: height
};
}
function get(tag) {
return xmlElement.querySelectorAll(tag);
}
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';
}
}
}

Loading…
Cancel
Save