Move some layout logic into separate modules
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);
|
||||
};
|
@ -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…
Reference in New Issue