Move some layout logic into separate modules

master
Sven Slootweg 7 years ago
parent 72845b03c8
commit 74dd184f76

@ -0,0 +1,26 @@
'use strict';
module.exports = function drawDebugLine(context, lineNumber, y, width, color = "red") {
context.strokeStyle = color;
context.beginPath();
if (typeof width === "number") {
context.moveTo(0, y);
context.lineTo(width, y);
} else {
context.moveTo(width[0], y);
context.lineTo(width[1], y);
}
context.stroke();
let boxOffsets = ["red", "green", "blue", "orange"];
let boxOffset = boxOffsets.indexOf(color);
context.fillStyle = color;
context.fillRect(boxOffset * 18, y + 3, 16, 16);
context.font = "12px sans-serif";
context.fillStyle = "white";
context.fillText(lineNumber, 5 + boxOffset * 18, y + 15);
};

@ -4,76 +4,14 @@ const parser = require("../parser");
const findAlignment = require("../parser/find-alignment");
const generateStyle = require("../parser/generate-style");
const measureText = require("../render/measure-text");
const adjustLineHeights = require("./adjust-line-heights");
const layoutItems = require("./layout-items");
const drawDebugLine = require("./draw-debug-line");
const sum = require("../util/sum");
const min = require("../util/min");
const max = require("../util/max");
const last = require("../util/last");
function drawDebugLine(context, lineNumber, y, width, color = "red") {
context.strokeStyle = color;
context.beginPath();
if (typeof width === "number") {
context.moveTo(0, y);
context.lineTo(width, y);
} else {
context.moveTo(width[0], y);
context.lineTo(width[1], y);
}
context.stroke();
let boxOffsets = ["red", "green", "blue", "orange"];
let boxOffset = boxOffsets.indexOf(color);
context.fillStyle = color;
context.fillRect(boxOffset * 18, y + 3, 16, 16);
context.font = "12px sans-serif";
context.fillStyle = "white";
context.fillText(lineNumber, 5 + boxOffset * 18, y + 15);
}
function layoutItems(lines, options = {}) {
let currentYOffset = options.initialY;
let currentXOffset = 0;
let debugYOffset = 0;
let debugLines = [];
let positionedItems = lines.reduce((items, line, i) => {
debugLines.push({color: "red", y: debugYOffset, lineNumber: i});
debugLines.push({color: "green", y: currentYOffset, lineNumber: i});
debugLines.push({color: "orange", y: currentYOffset + line.adjustedHeight, lineNumber: i});
let newItems = items.concat(line.items.map((item) => {
let x = currentXOffset;
let y = currentYOffset - (line.minAscender / 2) + (line.adjustedHeight / 2)
debugLines.push({color: "blue", y: y, x1: x, x2: x + item.measurements.width, lineNumber: i});
currentXOffset += item.measurements.width;
return Object.assign({
x: x,
y: y
}, item);
}));
currentYOffset += line.adjustedHeight;
debugYOffset += line.adjustedHeight;
currentXOffset = 0;
return newItems;
}, []);
return {
positionedItems: positionedItems,
debugLines: debugLines
}
}
module.exports = function layoutFormattedText(text, options) {
let lines;

@ -0,0 +1,39 @@
'use strict';
module.exports = function layoutItems(lines, options = {}) {
let currentYOffset = options.initialY;
let currentXOffset = 0;
let debugYOffset = 0;
let debugLines = [];
let positionedItems = lines.reduce((items, line, i) => {
debugLines.push({color: "red", y: debugYOffset, lineNumber: i});
debugLines.push({color: "green", y: currentYOffset, lineNumber: i});
debugLines.push({color: "orange", y: currentYOffset + line.adjustedHeight, lineNumber: i});
let newItems = items.concat(line.items.map((item) => {
let x = currentXOffset;
let y = currentYOffset - (line.minAscender / 2) + (line.adjustedHeight / 2)
debugLines.push({color: "blue", y: y, x1: x, x2: x + item.measurements.width, lineNumber: i});
currentXOffset += item.measurements.width;
return Object.assign({
x: x,
y: y
}, item);
}));
currentYOffset += line.adjustedHeight;
debugYOffset += line.adjustedHeight;
currentXOffset = 0;
return newItems;
}, []);
return {
positionedItems: positionedItems,
debugLines: debugLines
}
};
Loading…
Cancel
Save