Browse Source

Implement block order rendering

block-order-mode
Tissevert 7 months ago
parent
commit
995c298143
4 changed files with 52 additions and 14 deletions
  1. +0
    -13
      css/page.css
  2. +30
    -0
      css/page/mode/blockOrder.css
  3. +12
    -0
      css/page/mode/edit.css
  4. +10
    -1
      js/XML/ALTO.js

+ 0
- 13
css/page.css View File

@ -23,19 +23,6 @@
position: absolute;
}
#page.editMode .String {
cursor: crosshair;
}
#page.editMode .String:hover {
border: 1px dashed red;
margin: -1px 0 0 -1px;
}
#page.editMode .String.deleted {
cursor: not-allowed;
}
#page p {
margin: 0;
white-space: nowrap;


+ 30
- 0
css/page/mode/blockOrder.css View File

@ -0,0 +1,30 @@
.BlockPosition {
display: none;
width: 100%;
height: 100%;
border: 2px solid #54e654;
color: #54e654;
/*font-weight: bold;*/
z-index: 2;
user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
}
.BlockPosition > div {
width: 100%;
font-size: 10em;
top: 50%;
margin-top: -0.5em;
text-align: center;
}
#page.blockOrderMode .BlockPosition {
display: block;
}
#page.blockOrderMode .TextLine {
opacity: 0.5;
}

+ 12
- 0
css/page/mode/edit.css View File

@ -0,0 +1,12 @@
#page.editMode .String {
cursor: crosshair;
}
#page.editMode .String:hover {
border: 1px dashed red;
margin: -1px 0 0 -1px;
}
#page.editMode .String.deleted {
cursor: not-allowed;
}

+ 10
- 1
js/XML/ALTO.js View File

@ -5,6 +5,8 @@ import GUI;
import * as Dom from UnitJS.Dom;
import * as Zoom from Toolbar.Zoom;
var blockPosition;
return {
edit: edit,
display: display
@ -12,6 +14,7 @@ return {
function display(ALTODoc) {
var page = ALTODoc.querySelector('Page');
blockPosition = 0;
Zoom.scaleTo(Element.make(page).geometry);
Dom.clear(GUI.page);
GUI.page.appendChild(makeDomNode(page.querySelector('PrintSpace')));
@ -31,7 +34,7 @@ function makeDomNode(xmlElement, parentElement) {
}
function makeChildren(xmlElement, element) {
var children = [];
var children = element.tag == 'TextBlock' ? [blockPositionElem()] : [];
xmlElement.querySelectorAll(element.childTag).forEach(function(child) {
children.push(makeDomNode(child, element));
});
@ -46,6 +49,12 @@ function setAttributes(element, attributes) {
attributes.onClick = function(e) {toggleWord(e.target)};
}
function blockPositionElem() {
return Dom.make('div', {class: 'BlockPosition'}, [
Dom.make('div', {textContent: blockPosition++})
]);
}
function edit(ALTODoc) {
var printSpace = ALTODoc.querySelector('Page PrintSpace');
editElement(printSpace);


Loading…
Cancel
Save